/* === FRAMBINI OCCASIONS → REVIEWS TRANSITION ===
   Runtime-only 3→4 / 4→3 handoff. It does not alter saved admin geometry or written content. */
html.fr-transition-active,
html.fr-or-transition-lock,
html.fr-or-transition-running {
  scroll-snap-type: none !important;
  overscroll-behavior: none !important;
}

html.fr-transition-active body,
html.fr-or-transition-lock body,
html.fr-or-transition-running body {
  overscroll-behavior: none !important;
}

html.fr-or-transition-lock {
  overflow-x: hidden !important;
}

html.fr-or-transition-lock body {
  overflow-x: clip !important;
  overflow-y: clip !important;
}

@supports not (overflow: clip) {
  html.fr-or-transition-lock body {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
}

.fr-or-padenije-stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: transparent;
  transform: translateZ(0);
  transition: opacity 70ms ease, visibility 0s linear 90ms;
}

.fr-or-padenije-stage.is-active {
  opacity: var(--fr-or-padenije-opacity, 1);
  visibility: visible;
  transition: opacity 70ms ease, visibility 0s linear 0s;
}

.fr-or-padenije-stage.is-holding {
  opacity: var(--fr-or-padenije-opacity, 1);
}

.fr-or-padenije-stage.is-fading {
  opacity: 0;
  visibility: visible;
  transition: opacity 70ms ease-out, visibility 0s linear 90ms;
}

.fr-or-padenije-stage__frame {
  position: absolute;
  left: var(--fr-or-padenije-left, 0%);
  top: var(--fr-or-padenije-top, 0%);
  width: var(--fr-or-padenije-width, 100%);
  height: var(--fr-or-padenije-height, 100%);
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(0);
}

.fr-or-padenije-stage__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: transparent;
  transform: translateZ(0);
}

.fr-or-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483642;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: transparent;
  transform: translateZ(0);
  transition: opacity 160ms ease, visibility 0s linear 180ms;
}

.fr-or-transition-overlay.is-active {
  opacity: var(--fr-or-overlay-opacity, 1);
  visibility: visible;
  transition: opacity 160ms ease, visibility 0s linear 0s;
}

.fr-or-transition-overlay.is-fading {
  opacity: 0;
  visibility: visible;
  transition: opacity var(--fr-or-overlay-fade-ms, 220ms) ease-out, visibility 0s linear calc(var(--fr-or-overlay-fade-ms, 220ms) + 40ms);
}

.fr-or-transition-overlay__frame {
  position: absolute;
  left: var(--fr-or-frame-left, 0%);
  top: var(--fr-or-frame-top, 0%);
  width: var(--fr-or-frame-width, 86%);
  height: var(--fr-or-frame-height, 86%);
  transform: translate3d(calc((100vw - 100%) / 2), calc((100vh - 100%) / 2), 0);
  overflow: visible;
  pointer-events: none;
}

.fr-or-transition-overlay__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  transform: translateZ(0);
}

html.fr-or-transition-occasions-exit #occasions,
html.fr-or-transition-occasions-prepared #occasions,
html.fr-or-transition-occasions-entering #occasions,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions {
  overflow: visible !important;
  contain: none !important;
  pointer-events: none !important;
}

html.fr-or-transition-occasions-exit #occasions .occasions__artboard,
html.fr-or-transition-occasions-prepared #occasions .occasions__artboard,
html.fr-or-transition-occasions-entering #occasions .occasions__artboard,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__artboard,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__artboard {
  overflow: hidden !important;
}

html.fr-or-transition-occasions-exit #occasions .occasions__headline,
html.fr-or-transition-occasions-exit #occasions .occasions__card,
html.fr-or-transition-occasions-exit #occasions .occasions__hover-video-layer,
html.fr-or-transition-occasions-exit #occasions .universal-hover-video-layer,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__headline,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__card,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__hover-video-layer,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .universal-hover-video-layer {
  transition:
    transform var(--fr-or-exit-ms, 3000ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    opacity var(--fr-or-exit-ms, 3000ms) ease-out,
    filter var(--fr-or-exit-ms, 3000ms) ease-out !important;
  opacity: 0 !important;
  filter: blur(1.2px) saturate(1.08) !important;
  pointer-events: none !important;
}

html.fr-or-transition-occasions-exit #occasions .occasions__headline,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__headline {
  transform: translate3d(-50%, -74vh, 0) scale(0.965) !important;
}

html.fr-or-transition-occasions-exit #occasions .occasions__card--1,
html.fr-or-transition-occasions-exit #occasions .occasions__card--3,
html.fr-or-transition-occasions-exit #occasions .occasions__hover-video-layer--1,
html.fr-or-transition-occasions-exit #occasions .occasions__hover-video-layer--3,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__card--1,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__card--3,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__hover-video-layer--1,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__hover-video-layer--3 {
  transform: translate3d(0, -82vh, 0) scale(0.95) !important;
}

html.fr-or-transition-occasions-exit #occasions .occasions__card--2,
html.fr-or-transition-occasions-exit #occasions .occasions__hover-video-layer--2,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__card--2,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__hover-video-layer--2 {
  transform: translate3d(-74vw, 0, 0) scale(0.95) !important;
}

html.fr-or-transition-occasions-exit #occasions .occasions__card--4,
html.fr-or-transition-occasions-exit #occasions .occasions__hover-video-layer--4,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__card--4,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__hover-video-layer--4 {
  transform: translate3d(74vw, 0, 0) scale(0.95) !important;
}

html.fr-or-transition-occasions-exit #occasions .occasions__card--5,
html.fr-or-transition-occasions-exit #occasions .occasions__hover-video-layer--5,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__card--5,
html.fr-admin-mode.fr-or-transition-admin-exit-preview #occasions .occasions__hover-video-layer--5 {
  transform: translate3d(0, 82vh, 0) scale(0.95) !important;
}

html.fr-or-transition-occasions-prepared #occasions .occasions__headline,
html.fr-or-transition-occasions-prepared #occasions .occasions__card,
html.fr-or-transition-occasions-prepared #occasions .occasions__hover-video-layer,
html.fr-or-transition-occasions-prepared #occasions .universal-hover-video-layer,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__headline,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__card,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__hover-video-layer,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .universal-hover-video-layer {
  opacity: 0 !important;
  filter: blur(1.1px) saturate(1.08) !important;
  pointer-events: none !important;
  transition: none !important;
}

html.fr-or-transition-occasions-prepared #occasions .occasions__headline,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__headline {
  transform: translate3d(-50%, -74vh, 0) scale(0.965) !important;
}

html.fr-or-transition-occasions-prepared #occasions .occasions__card--1,
html.fr-or-transition-occasions-prepared #occasions .occasions__card--3,
html.fr-or-transition-occasions-prepared #occasions .occasions__hover-video-layer--1,
html.fr-or-transition-occasions-prepared #occasions .occasions__hover-video-layer--3,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__card--1,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__card--3,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__hover-video-layer--1,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__hover-video-layer--3 {
  transform: translate3d(0, -82vh, 0) scale(0.95) !important;
}

html.fr-or-transition-occasions-prepared #occasions .occasions__card--2,
html.fr-or-transition-occasions-prepared #occasions .occasions__hover-video-layer--2,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__card--2,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__hover-video-layer--2 {
  transform: translate3d(-74vw, 0, 0) scale(0.95) !important;
}

html.fr-or-transition-occasions-prepared #occasions .occasions__card--4,
html.fr-or-transition-occasions-prepared #occasions .occasions__hover-video-layer--4,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__card--4,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__hover-video-layer--4 {
  transform: translate3d(74vw, 0, 0) scale(0.95) !important;
}

html.fr-or-transition-occasions-prepared #occasions .occasions__card--5,
html.fr-or-transition-occasions-prepared #occasions .occasions__hover-video-layer--5,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__card--5,
html.fr-admin-mode.fr-or-transition-admin-enter-preview #occasions .occasions__hover-video-layer--5 {
  transform: translate3d(0, 82vh, 0) scale(0.95) !important;
}

html.fr-or-transition-occasions-entering #occasions .occasions__headline,
html.fr-or-transition-occasions-entering #occasions .occasions__card,
html.fr-or-transition-occasions-entering #occasions .occasions__hover-video-layer,
html.fr-or-transition-occasions-entering #occasions .universal-hover-video-layer {
  transition:
    transform var(--fr-or-enter-ms, 3000ms) cubic-bezier(0.16, 0.86, 0.2, 1),
    opacity 820ms ease-out,
    filter 1280ms ease-out !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

html.fr-or-transition-occasions-entering #occasions .occasions__headline {
  transform: translateX(-50%) !important;
}

html.fr-or-transition-occasions-entering #occasions .occasions__card--1,
html.fr-or-transition-occasions-entering #occasions .occasions__card--2,
html.fr-or-transition-occasions-entering #occasions .occasions__card--3,
html.fr-or-transition-occasions-entering #occasions .occasions__card--4,
html.fr-or-transition-occasions-entering #occasions .occasions__card--5,
html.fr-or-transition-occasions-entering #occasions .occasions__hover-video-layer,
html.fr-or-transition-occasions-entering #occasions .universal-hover-video-layer {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.fr-admin-or-transition {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(255, 133, 184, 0.28);
  border-radius: 18px;
  padding: 14px;
  background: rgba(24, 2, 12, 0.72);
}

.fr-admin-or-transition__head {
  display: grid;
  gap: 4px;
  color: #fff6fa;
}

.fr-admin-or-transition__head strong {
  font: 900 13px/1.15 Arial, Helvetica, sans-serif;
}

.fr-admin-or-transition__head span,
.fr-admin-or-transition__status {
  color: rgba(255, 231, 240, 0.72);
  font: 700 11px/1.35 Arial, Helvetica, sans-serif;
}

.fr-admin-or-transition__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fr-admin-or-transition__grid label {
  display: grid;
  gap: 4px;
  color: rgba(255, 231, 240, 0.76);
  font: 800 10px/1.2 Arial, Helvetica, sans-serif;
}

.fr-admin-or-transition__grid input {
  width: 100%;
  border: 1px solid rgba(255, 133, 184, 0.28);
  border-radius: 10px;
  padding: 8px 9px;
  color: #fff6fa;
  background: rgba(27, 2, 12, 0.82);
  font: 800 12px/1.2 Arial, Helvetica, sans-serif;
}

.fr-admin-or-transition__buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.fr-admin-or-transition button {
  width: 100%;
  border: 1px solid rgba(255, 133, 184, 0.45);
  border-radius: 12px;
  padding: 10px 12px;
  color: #fff6fa;
  background: linear-gradient(180deg, rgba(255, 105, 164, 0.44), rgba(128, 16, 59, 0.58));
  font: 900 11px/1.1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.fr-admin-or-transition button[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(255, 198, 221, 0.36), rgba(168, 31, 86, 0.50));
  border-color: rgba(255, 218, 232, 0.65);
}

.fr-admin-or-transition button:disabled {
  opacity: 0.55;
  cursor: progress;
}

.fr-admin-or-transition__status.is-error {
  color: #ffb8cc;
}

html.fr-admin-mode.fr-or-transition-admin-video-preview .fr-or-transition-overlay {
  z-index: 2147482600 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition: none !important;
}

html.fr-admin-mode.fr-or-transition-admin-video-preview .fr-or-padenije-stage.is-active {
  z-index: 2147482600 !important;
  opacity: var(--fr-or-padenije-opacity, 1) !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce), (max-width: 900px), (hover: none) {
  .fr-or-transition-overlay {
    display: none !important;
  }

  html.fr-or-transition-occasions-exit #occasions .occasions__headline,
  html.fr-or-transition-occasions-exit #occasions .occasions__card,
  html.fr-or-transition-occasions-prepared #occasions .occasions__headline,
  html.fr-or-transition-occasions-prepared #occasions .occasions__card {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* Transition-only camera for 3 → 4. Normal third-window layout stays untouched. */
html.fr-or-transition-camera-prepared #occasions .occasions__artboard,
html.fr-admin-mode.fr-or-transition-camera-prepared #occasions .occasions__artboard {
  transform: translate3d(var(--fr-or-camera-start-x, 0%), var(--fr-or-camera-start-y, 0%), 0) scale(var(--fr-or-camera-start-scale, 1)) !important;
  transform-origin: 50% 50% !important;
  will-change: transform;
}

html.fr-or-transition-camera-active #occasions .occasions__artboard,
html.fr-admin-mode.fr-or-transition-camera-active #occasions .occasions__artboard {
  transform: translate3d(var(--fr-or-camera-end-x, 0%), var(--fr-or-camera-end-y, 0%), 0) scale(var(--fr-or-camera-end-scale, 1.07)) !important;
  transform-origin: 50% 50% !important;
  transition: transform var(--fr-or-camera-ms, 3000ms) cubic-bezier(0.18, 0.84, 0.2, 1) !important;
  will-change: transform;
}

/* Root fix: occasion hover-video follows the card motion group, not a separate
   transition plane. */
html:not(.fr-admin-mode) #occasions .frambini-runtime-local-video-card > .occasions__hover-video-layer.frambini-local-hover-video,
html:not(.fr-admin-mode) #occasions .frambini-runtime-local-video-card > .occasions__hover-video-layer.frambini-local-hover-video.frambini-bound-active,
html:not(.fr-admin-mode) #occasions .frambini-runtime-local-video-card > .occasions__hover-video-layer.frambini-local-hover-video.is-active {
  position: absolute !important;
  transform: none !important;
  translate: 0 0 !important;
  scale: 1 !important;
  opacity: 0.96 !important;
  visibility: visible !important;
  z-index: 22 !important;
  pointer-events: none !important;
  object-fit: fill !important;
  object-position: center center !important;
  filter: saturate(1.15) brightness(1.05) !important;
}


/* Runtime guard: old standalone hover-video planes must not receive their own
   transition movement. Active hover videos are mounted inside the card and
   inherit the card transform instead. */
html:not(.fr-admin-mode).fr-or-transition-running #occasions .occasions__hover-video-layer:not(.frambini-local-hover-video),
html:not(.fr-admin-mode).fr-or-transition-running #occasions .universal-hover-video-layer:not(.frambini-local-hover-video),
html:not(.fr-admin-mode).fr-or-transition-occasions-exit #occasions .occasions__hover-video-layer:not(.frambini-local-hover-video),
html:not(.fr-admin-mode).fr-or-transition-occasions-prepared #occasions .occasions__hover-video-layer:not(.frambini-local-hover-video),
html:not(.fr-admin-mode).fr-or-transition-occasions-entering #occasions .occasions__hover-video-layer:not(.frambini-local-hover-video) {
  transform: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 120ms ease-out, visibility 0s linear 140ms !important;
}