/* === FRAMBINI HERO → EXPERIENCE VIDEO TRANSITION ===
   Isolated fullscreen transition layer. It does not change saved window layout. */
.hero-experience-transition {
  position: fixed;
  inset: 0;
  z-index: 2147482400;
  display: block;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: transparent;
  contain: strict;
  transform: translateZ(0);
  transition: opacity 150ms ease, visibility 0s linear 150ms;
}


html.fr-hero-transition-running .hero-experience-transition,
html.fr-hero-transition-reverse-video .hero-experience-transition {
  z-index: 2147483640 !important;
  visibility: visible !important;
}

html.fr-hero-transition-running .hero-experience-transition:not(.is-revealing),
html.fr-hero-transition-reverse-video .hero-experience-transition:not(.is-revealing) {
  opacity: 1 !important;
}

html.fr-hero-transition-running .hero-experience-transition__video,
html.fr-hero-transition-reverse-video .hero-experience-transition__video {
  opacity: 1 !important;
  visibility: visible !important;
}


html.fr-hero-transition-reverse-handoff .hero-experience-transition {
  z-index: 2147483640 !important;
  visibility: visible !important;
}

html.fr-hero-transition-reverse-handoff .hero-experience-transition:not(.is-revealing) {
  opacity: 1 !important;
}

html.fr-hero-transition-reverse-handoff #experience {
  pointer-events: none !important;
}

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

.hero-experience-transition.is-revealing {
  opacity: 0;
  visibility: visible;
  transition: opacity 180ms ease-out, visibility 0s linear 220ms;
}

html.fr-hero-transition-running .hero-experience-transition.is-active .hero-experience-transition__video-frame {
  animation: fr-hero-transition-video-grow var(--fr-hero-transition-video-grow-ms, 3000ms) cubic-bezier(0.16, 0.86, 0.2, 1) both;
}

.hero-experience-transition__video-frame {
  position: absolute;
  left: var(--fr-hero-frame-left, 0%);
  top: var(--fr-hero-frame-top, 0%);
  width: var(--fr-hero-frame-width, 100%);
  height: var(--fr-hero-frame-height, 100%);
  display: block;
  overflow: hidden;
  transform: translateZ(0) scale(var(--fr-hero-transition-video-start-scale, 1)) rotate(0deg);
  transform-origin: center center;
  background: transparent;
  will-change: transform, opacity;
}

.hero-experience-transition__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #020004;
  filter: saturate(1.08) contrast(1.03);
  will-change: opacity, transform;
}

.hero-experience-transition::after {
  content: "";
  position: absolute;
  inset: -12%;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 232, 241, 0.96) 0 7%, rgba(255, 83, 142, 0.56) 14%, rgba(101, 0, 37, 0) 42%);
  mix-blend-mode: screen;
  transform: translateZ(0) scale(0.92);
}

.hero-experience-transition.is-revealing::after {
  animation: fr-hero-transition-final-flash 220ms ease-out both;
}

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

html.fr-hero-transition-lock:not(.fr-hero-transition-scroll-under-video) {
  overflow-x: hidden !important;
}

html.fr-hero-transition-lock:not(.fr-hero-transition-scroll-under-video) body {
  overflow-x: clip !important;
  overflow-y: clip !important;
}

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


html.fr-hero-transition-preparing #hero .portal,
html.fr-admin-mode.fr-hero-transition-admin-preview #hero .portal {
  transition:
    translate var(--fr-hero-transition-exit-ms, 1000ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    scale var(--fr-hero-transition-exit-ms, 1000ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    filter var(--fr-hero-transition-exit-ms, 1000ms) ease-out !important;
  translate: var(--fr-hero-transition-portal-x, 135px) var(--fr-hero-transition-portal-y, 28px) !important;
  scale: var(--fr-hero-transition-portal-zoom-scale, 1.16) !important;
  transform-origin: center center !important;
  filter: saturate(1.08) contrast(1.04) !important;
}

html.fr-hero-transition-preparing #hero .hero__header,
html.fr-admin-mode.fr-hero-transition-admin-preview #hero .hero__header {
  transition:
    transform var(--fr-hero-transition-exit-ms, 1000ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    opacity var(--fr-hero-transition-exit-fade-ms, 820ms) ease-out,
    filter var(--fr-hero-transition-exit-ms, 1000ms) ease-out !important;
  transform: translate3d(0, -170%, 0) scale(0.975) !important;
  opacity: 0 !important;
  filter: blur(1.45px) saturate(1.08) !important;
}

html.fr-hero-transition-preparing #hero .hero__copy,
html.fr-admin-mode.fr-hero-transition-admin-preview #hero .hero__copy {
  transition:
    transform var(--fr-hero-transition-exit-ms, 1000ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    opacity var(--fr-hero-transition-exit-fade-ms, 820ms) ease-out,
    filter var(--fr-hero-transition-exit-ms, 1000ms) ease-out !important;
  transform: translate3d(-165%, 54%, 0) scale(0.948) !important;
  opacity: 0 !important;
  filter: blur(1.45px) saturate(1.05) !important;
}

html.fr-hero-transition-preparing #hero .hero__water,
html.fr-admin-mode.fr-hero-transition-admin-preview #hero .hero__water {
  transition:
    transform var(--fr-hero-transition-exit-ms, 1000ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    opacity var(--fr-hero-transition-exit-fade-ms, 820ms) ease-out,
    filter var(--fr-hero-transition-exit-ms, 1000ms) ease-out !important;
  transform: translate3d(0, 125%, 0) scale(1.025) !important;
  opacity: 0 !important;
  filter: blur(1.25px) saturate(1.08) !important;
}


/* Reverse transition: reveal the first screen in the same zoomed/out state,
   then return it back to the normal static state. */
html.fr-hero-transition-reverse-out #hero .portal,
html.fr-hero-transition-reverse-handoff #hero .portal {
  transition: none !important;
  translate: var(--fr-hero-transition-portal-x, 135px) var(--fr-hero-transition-portal-y, 28px) !important;
  scale: var(--fr-hero-transition-portal-zoom-scale, 1.16) !important;
  transform-origin: center center !important;
  filter: saturate(1.08) contrast(1.04) !important;
}

html.fr-hero-transition-reverse-out #hero .hero__header,
html.fr-hero-transition-reverse-handoff #hero .hero__header {
  transition: none !important;
  transform: translate3d(0, -170%, 0) scale(0.975) !important;
  opacity: 0 !important;
  filter: blur(1.45px) saturate(1.08) !important;
}

html.fr-hero-transition-reverse-out #hero .hero__copy,
html.fr-hero-transition-reverse-handoff #hero .hero__copy {
  transition: none !important;
  transform: translate3d(-165%, 54%, 0) scale(0.948) !important;
  opacity: 0 !important;
  filter: blur(1.45px) saturate(1.05) !important;
}

html.fr-hero-transition-reverse-out #hero .hero__water,
html.fr-hero-transition-reverse-handoff #hero .hero__water {
  transition: none !important;
  transform: translate3d(0, 125%, 0) scale(1.025) !important;
  opacity: 0 !important;
  filter: blur(1.25px) saturate(1.08) !important;
}

html.fr-hero-transition-reverse-restoring #hero .portal {
  transition:
    translate var(--fr-hero-transition-exit-ms, 1000ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    scale var(--fr-hero-transition-exit-ms, 1000ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    filter var(--fr-hero-transition-exit-ms, 1000ms) ease-out !important;
}

html.fr-hero-transition-reverse-restoring #hero .hero__header,
html.fr-hero-transition-reverse-restoring #hero .hero__copy,
html.fr-hero-transition-reverse-restoring #hero .hero__water {
  transition:
    transform var(--fr-hero-transition-exit-ms, 1000ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    opacity var(--fr-hero-transition-exit-fade-ms, 820ms) ease-out,
    filter var(--fr-hero-transition-exit-ms, 1000ms) ease-out !important;
}



html.fr-hero-transition-preparing #hero,
html.fr-hero-transition-running #hero {
  pointer-events: none !important;
}

@keyframes fr-hero-transition-video-grow {
  0% {
    transform: translateZ(0) scale(var(--fr-hero-transition-video-start-scale, 1)) rotate(0deg);
  }
  100% {
    transform: translateZ(0) scale(1) rotate(0deg);
  }
}

@keyframes fr-hero-transition-final-flash {
  0% {
    opacity: 0;
    transform: translateZ(0) scale(0.86);
  }
  42% {
    opacity: 0.92;
    transform: translateZ(0) scale(1.02);
  }
  100% {
    opacity: 0;
    transform: translateZ(0) scale(1.32);
  }
}

/* Admin edit mode: the transition video is visible only while its frame is selected. */
html.fr-admin-mode .hero-experience-transition {
  z-index: 2147481800;
  contain: none;
}

html.fr-admin-mode .hero-experience-transition:has(.hero-experience-transition__video-frame.fr-admin-active-layer) {
  opacity: 1;
  visibility: visible;
  background: rgba(2, 0, 4, 0.78);
  transition: none;
}

html.fr-admin-mode .hero-experience-transition__video-frame.fr-admin-active-layer {
  box-shadow: 0 0 0 2px rgba(255, 93, 155, 0.72), 0 0 24px rgba(255, 50, 132, 0.32);
}



html.fr-admin-mode.fr-hero-transition-admin-preview .hero-experience-transition:not(.is-active) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.fr-admin-mode.fr-hero-transition-admin-video-preview .hero-experience-transition {
  z-index: 2147482600 !important;
  opacity: var(--fr-hero-overlay-opacity, 1) !important;
  visibility: visible !important;
  pointer-events: none !important;
  background: transparent !important;
  transition: none !important;
}

.fr-admin-transition-timing {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(255, 111, 167, 0.28);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 103, 162, 0.13), transparent 34%),
    rgba(38, 3, 18, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 235, 244, 0.08), 0 0 18px rgba(255, 62, 128, 0.10);
}

.fr-admin-transition-timing__head {
  display: grid;
  gap: 3px;
}

.fr-admin-transition-timing__head strong {
  color: #fff6fa;
  font-size: 13px;
  line-height: 1.15;
}

.fr-admin-transition-timing__head span,
.fr-admin-transition-timing__status {
  color: rgba(255, 226, 238, 0.72);
  font-size: 11px;
  line-height: 1.35;
}

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

.fr-admin-transition-timing__grid label {
  display: grid;
  gap: 5px;
  color: rgba(255, 235, 244, 0.78);
  font: 800 10px/1.15 Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.fr-admin-transition-timing__grid input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 119, 174, 0.42);
  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-transition-timing__buttons,
.fr-admin-it-transition__buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.fr-admin-transition-timing__preview,
.fr-admin-transition-timing__save {
  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-transition-timing__preview {
  box-shadow: 0 0 0 1px rgba(255, 230, 240, 0.08) inset, 0 0 16px rgba(255, 73, 145, 0.16);
}

.fr-admin-transition-timing__preview[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);
  box-shadow: 0 0 0 1px rgba(255, 230, 240, 0.12) inset, 0 0 20px rgba(255, 91, 160, 0.24);
}

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

.fr-admin-transition-timing__status.is-error {
  color: #ffb8cc;
}


/* Root fix: during 2→3 the TV screen must stay clipped under the PNG frame.
   The whole artboard zooms; the screen video and TV PNG are not scaled/faded
   independently, which removes the dark top band and the screen leaking out. */
html.fr-it-transition-exit #experience .experience__visual,
html.fr-it-transition-reverse-out #experience .experience__visual,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__visual {
  z-index: 2 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translate(0.676%, calc(-0.108% + 0px)) !important;
}

html.fr-it-transition-exit #experience .experience__screen,
html.fr-it-transition-reverse-out #experience .experience__screen,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__screen {
  z-index: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  overflow: hidden !important;
  transform: rotate(0deg) !important;
}

html.fr-it-transition-exit #experience .experience__screen-video,
html.fr-it-transition-reverse-out #experience .experience__screen-video,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__screen-video {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

html.fr-it-transition-exit #experience .experience__tv-control,
html.fr-it-transition-reverse-out #experience .experience__tv-control,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__tv-control {
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

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

  html.fr-hero-transition-preparing #hero .hero__header,
  html.fr-hero-transition-preparing #hero .hero__copy,
  html.fr-hero-transition-preparing #hero .hero__water,
  html.fr-hero-transition-reverse-out #hero .hero__header,
  html.fr-hero-transition-reverse-out #hero .hero__copy,
  html.fr-hero-transition-reverse-out #hero .hero__water,
  html.fr-hero-transition-reverse-restoring #hero .hero__header,
  html.fr-hero-transition-reverse-restoring #hero .hero__copy,
  html.fr-hero-transition-reverse-restoring #hero .hero__water {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  html.fr-hero-transition-preparing #hero .portal,
  html.fr-admin-mode.fr-hero-transition-admin-preview #hero .portal,
  html.fr-hero-transition-reverse-out #hero .portal,
  html.fr-hero-transition-reverse-restoring #hero .portal {
    translate: 0 0 !important;
    scale: 1 !important;
    filter: none !important;
  }
}

/* === FRAMBINI EXPERIENCE → OCCASIONS VIDEO TRANSITION ===
   Runtime-only phase system for 2→3 / 3→2. Static/admin geometry and written content stay untouched. */
html.fr-site-scroll-suspend,
html.fr-it-transition-lock,
html.fr-it-transition-preparing,
html.fr-it-transition-running,
html.fr-it-transition-handoff,
html.fr-it-transition-site-handoff {
  scroll-snap-type: none !important;
  overscroll-behavior: none !important;
}

html.fr-site-scroll-suspend body,
html.fr-it-transition-lock body,
html.fr-it-transition-preparing body,
html.fr-it-transition-running body,
html.fr-it-transition-handoff body,
html.fr-it-transition-site-handoff body {
  overscroll-behavior: none !important;
}

html.fr-it-transition-lock,
html.fr-it-transition-lock body {
  overflow: hidden !important;
}

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

.fr-it-transition-overlay.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0s linear 0s;
}

.fr-it-transition-overlay.is-revealing {
  opacity: 0;
  visibility: visible;
  transition: opacity 220ms ease-out, visibility 0s linear 260ms;
}

.fr-it-transition-overlay.is-covered-by-site {
  opacity: 0 !important;
  visibility: visible !important;
  transition: opacity 120ms ease-out, visibility 0s linear 160ms !important;
}

html.fr-it-transition-site-handoff .fr-it-transition-overlay {
  z-index: 2147483620 !important;
}

html.fr-it-transition-site-handoff #occasions {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483638 !important;
  display: block !important;
  width: 100vw !important;
  height: 100svh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  contain: none !important;
  background: #050104 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

html.fr-it-transition-site-handoff #occasions .occasions__stage {
  width: 100% !important;
  height: 100svh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  place-items: center !important;
}

html.fr-it-transition-site-handoff #occasions .occasions__artboard {
  width: min(100vw, 1920px) !important;
  max-width: 100vw !important;
  max-height: 100svh !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
}

html.fr-it-transition-site-handoff #occasions .occasions__backdrop {
  opacity: 1 !important;
  visibility: visible !important;
}

html.fr-it-transition-running .fr-it-transition-overlay,
html.fr-it-transition-handoff .fr-it-transition-overlay {
  z-index: 2147483635 !important;
  visibility: visible !important;
}

html.fr-it-transition-running .fr-it-transition-overlay:not(.is-revealing):not(.is-covered-by-site),
html.fr-it-transition-handoff .fr-it-transition-overlay:not(.is-revealing):not(.is-covered-by-site) {
  opacity: 1 !important;
}

html.fr-it-transition-site-handoff.fr-it-transition-running .fr-it-transition-overlay,
html.fr-it-transition-site-handoff.fr-it-transition-handoff .fr-it-transition-overlay,
html.fr-it-transition-site-handoff .fr-it-transition-overlay {
  z-index: 2147483620 !important;
}

html.fr-it-transition-site-handoff .fr-it-transition-overlay.is-covered-by-site {
  opacity: 0 !important;
  visibility: visible !important;
}

.fr-it-transition-overlay__frame {
  position: absolute;
  left: var(--fr-it-frame-left, 0%);
  top: var(--fr-it-frame-top, 0%);
  width: var(--fr-it-frame-width, 100%);
  height: var(--fr-it-frame-height, 100%);
  display: block;
  overflow: hidden;
  background: transparent;
  transform: translateZ(0);
  transform-origin: center center;
}

.fr-it-transition-overlay__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  background: transparent;
}

html.fr-it-transition-preparing #experience,
html.fr-it-transition-exit #experience,
html.fr-it-transition-reverse-out #experience,
html.fr-admin-mode.fr-it-transition-admin-preview #experience {
  overflow: visible !important;
  contain: none !important;
  pointer-events: none !important;
}

html.fr-it-transition-exit #experience .experience__artboard,
html.fr-it-transition-reverse-out #experience .experience__artboard,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__artboard {
  scale: var(--fr-it-experience-zoom-scale, 1.12) !important;
  transform-origin: center center !important;
  transition:
    scale var(--fr-it-exit-ms, 2400ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    filter var(--fr-it-exit-ms, 2400ms) ease-out !important;
  filter: saturate(1.035) contrast(1.015) brightness(1) blur(0) !important;
}

html.fr-it-transition-reverse-restoring #experience .experience__artboard {
  transition:
    scale var(--fr-it-exit-ms, 2400ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    filter var(--fr-it-exit-ms, 2400ms) ease-out !important;
}

html.fr-it-transition-exit #experience .experience__feature,
html.fr-it-transition-exit #experience .experience__feature-text-layer,
html.fr-it-transition-exit #experience .experience__hover-video-layer,
html.fr-it-transition-reverse-out #experience .experience__feature,
html.fr-it-transition-reverse-out #experience .experience__feature-text-layer,
html.fr-it-transition-reverse-out #experience .experience__hover-video-layer,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature-text-layer,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__hover-video-layer {
  transition:
    transform var(--fr-it-exit-ms, 2400ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    opacity var(--fr-it-exit-fade-ms, 1960ms) ease-out,
    filter var(--fr-it-exit-ms, 2400ms) ease-out !important;
  opacity: 0 !important;
  filter: blur(1.35px) saturate(1.08) !important;
  pointer-events: none !important;
}

html.fr-it-transition-exit #experience .experience__headline,
html.fr-it-transition-reverse-out #experience .experience__headline,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__headline {
  transition:
    transform var(--fr-it-exit-ms, 2400ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    opacity var(--fr-it-exit-fade-ms, 1960ms) ease-out,
    filter var(--fr-it-exit-ms, 2400ms) ease-out !important;
  transform: translate3d(0, -120vh, 0) scale(0.97) !important;
  opacity: 0 !important;
  filter: blur(1.35px) saturate(1.08) !important;
  pointer-events: none !important;
}

html.fr-it-transition-exit #experience .experience__visual,
html.fr-it-transition-exit #experience .experience__screen,
html.fr-it-transition-exit #experience .experience__tv-control,
html.fr-it-transition-reverse-out #experience .experience__visual,
html.fr-it-transition-reverse-out #experience .experience__screen,
html.fr-it-transition-reverse-out #experience .experience__tv-control,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__visual,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__screen,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__tv-control {
  transition:
    transform var(--fr-it-exit-ms, 2400ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    opacity var(--fr-it-exit-fade-ms, 1960ms) ease-out,
    filter var(--fr-it-exit-ms, 2400ms) ease-out !important;
  transform: translate3d(0, 0, 0) scale(1.085) !important;
  opacity: 0.42 !important;
  filter: blur(0.6px) brightness(1) saturate(1.04) !important;
  pointer-events: none !important;
}

html.fr-it-transition-exit #experience .experience__feature--left-top,
html.fr-it-transition-exit #experience .experience__feature--left-mid,
html.fr-it-transition-exit #experience .experience__feature--left-bottom,
html.fr-it-transition-exit #experience .experience__feature-title-layer--left-top,
html.fr-it-transition-exit #experience .experience__feature-body-layer--left-top,
html.fr-it-transition-exit #experience .experience__feature-title-layer--left-mid,
html.fr-it-transition-exit #experience .experience__feature-body-layer--left-mid,
html.fr-it-transition-exit #experience .experience__feature-title-layer--left-bottom,
html.fr-it-transition-exit #experience .experience__feature-body-layer--left-bottom,
html.fr-it-transition-exit #experience .experience__hover-video-layer--left-top,
html.fr-it-transition-exit #experience .experience__hover-video-layer--left-mid,
html.fr-it-transition-exit #experience .experience__hover-video-layer--left-bottom,
html.fr-it-transition-reverse-out #experience .experience__feature--left-top,
html.fr-it-transition-reverse-out #experience .experience__feature--left-mid,
html.fr-it-transition-reverse-out #experience .experience__feature--left-bottom,
html.fr-it-transition-reverse-out #experience .experience__feature-title-layer--left-top,
html.fr-it-transition-reverse-out #experience .experience__feature-body-layer--left-top,
html.fr-it-transition-reverse-out #experience .experience__feature-title-layer--left-mid,
html.fr-it-transition-reverse-out #experience .experience__feature-body-layer--left-mid,
html.fr-it-transition-reverse-out #experience .experience__feature-title-layer--left-bottom,
html.fr-it-transition-reverse-out #experience .experience__feature-body-layer--left-bottom,
html.fr-it-transition-reverse-out #experience .experience__hover-video-layer--left-top,
html.fr-it-transition-reverse-out #experience .experience__hover-video-layer--left-mid,
html.fr-it-transition-reverse-out #experience .experience__hover-video-layer--left-bottom,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature--left-top,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature--left-mid,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature--left-bottom,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature-title-layer--left-top,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature-body-layer--left-top,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature-title-layer--left-mid,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature-body-layer--left-mid,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature-title-layer--left-bottom,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature-body-layer--left-bottom,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__hover-video-layer--left-top,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__hover-video-layer--left-mid,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__hover-video-layer--left-bottom {
  transform: translate3d(-170vw, 0, 0) scale(0.955) !important;
}

html.fr-it-transition-exit #experience .experience__feature--right-top,
html.fr-it-transition-exit #experience .experience__feature--right-bottom,
html.fr-it-transition-exit #experience .experience__feature--right-lower,
html.fr-it-transition-exit #experience .experience__feature-title-layer--right-top,
html.fr-it-transition-exit #experience .experience__feature-body-layer--right-top,
html.fr-it-transition-exit #experience .experience__feature-title-layer--right-bottom,
html.fr-it-transition-exit #experience .experience__feature-body-layer--right-bottom,
html.fr-it-transition-exit #experience .experience__feature-title-layer--right-lower,
html.fr-it-transition-exit #experience .experience__feature-body-layer--right-lower,
html.fr-it-transition-exit #experience .experience__hover-video-layer--right-top,
html.fr-it-transition-exit #experience .experience__hover-video-layer--right-bottom,
html.fr-it-transition-exit #experience .experience__hover-video-layer--right-lower,
html.fr-it-transition-reverse-out #experience .experience__feature--right-top,
html.fr-it-transition-reverse-out #experience .experience__feature--right-bottom,
html.fr-it-transition-reverse-out #experience .experience__feature--right-lower,
html.fr-it-transition-reverse-out #experience .experience__feature-title-layer--right-top,
html.fr-it-transition-reverse-out #experience .experience__feature-body-layer--right-top,
html.fr-it-transition-reverse-out #experience .experience__feature-title-layer--right-bottom,
html.fr-it-transition-reverse-out #experience .experience__feature-body-layer--right-bottom,
html.fr-it-transition-reverse-out #experience .experience__feature-title-layer--right-lower,
html.fr-it-transition-reverse-out #experience .experience__feature-body-layer--right-lower,
html.fr-it-transition-reverse-out #experience .experience__hover-video-layer--right-top,
html.fr-it-transition-reverse-out #experience .experience__hover-video-layer--right-bottom,
html.fr-it-transition-reverse-out #experience .experience__hover-video-layer--right-lower,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature--right-top,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature--right-bottom,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature--right-lower,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature-title-layer--right-top,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature-body-layer--right-top,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature-title-layer--right-bottom,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature-body-layer--right-bottom,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature-title-layer--right-lower,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__feature-body-layer--right-lower,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__hover-video-layer--right-top,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__hover-video-layer--right-bottom,
html.fr-admin-mode.fr-it-transition-admin-preview #experience .experience__hover-video-layer--right-lower {
  transform: translate3d(170vw, 0, 0) scale(0.955) !important;
}

html.fr-it-transition-reverse-restoring #experience .experience__feature,
html.fr-it-transition-reverse-restoring #experience .experience__feature-text-layer,
html.fr-it-transition-reverse-restoring #experience .experience__hover-video-layer,
html.fr-it-transition-reverse-restoring #experience .experience__headline,
html.fr-it-transition-reverse-restoring #experience .experience__visual,
html.fr-it-transition-reverse-restoring #experience .experience__screen,
html.fr-it-transition-reverse-restoring #experience .experience__tv-control {
  transition:
    transform var(--fr-it-exit-ms, 2400ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    opacity var(--fr-it-exit-fade-ms, 1960ms) ease-out,
    filter var(--fr-it-exit-ms, 2400ms) ease-out !important;
}

.fr-admin-it-transition {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(255, 111, 167, 0.28);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 103, 162, 0.13), transparent 34%),
    rgba(38, 3, 18, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 235, 244, 0.08), 0 0 18px rgba(255, 62, 128, 0.10);
}

.fr-admin-it-transition__head {
  display: grid;
  gap: 3px;
}

.fr-admin-it-transition__head strong {
  color: #fff6fa;
  font-size: 13px;
  line-height: 1.15;
}

.fr-admin-it-transition__head span,
.fr-admin-it-transition__status {
  color: rgba(255, 226, 238, 0.72);
  font-size: 11px;
  line-height: 1.35;
}

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

.fr-admin-it-transition__grid label {
  display: grid;
  gap: 5px;
  color: rgba(255, 235, 244, 0.78);
  font: 800 10px/1.15 Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.fr-admin-it-transition__grid input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 119, 174, 0.42);
  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-it-transition__preview,
.fr-admin-it-transition__save {
  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-it-transition__preview[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-it-transition__save:disabled {
  opacity: 0.55;
  cursor: progress;
}

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

/* During the IT1 handoff, window 3 uses a locked still backdrop without the
   baked product. Cards and the real product enter as controlled DOM layers. */
html:not(.fr-admin-mode) #occasions.is-transition-static-backdrop .occasions__backdrop {
  background: #050104 url("../assets/frambini/03-occasions/images/03-occasions-background-with-heading-v01.png") center center / cover no-repeat !important;
}

html:not(.fr-admin-mode) #occasions.is-transition-static-backdrop .occasions__backdrop-video {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.fr-it-transition-occasions-prepared #occasions,
html.fr-it-transition-occasions-entering #occasions,
html.fr-it-transition-occasions-reverse-out #occasions {
  overflow: visible !important;
  contain: none !important;
}

html.fr-it-transition-occasions-prepared #occasions .occasions__headline,
html.fr-it-transition-occasions-prepared #occasions .occasions__card,
html.fr-it-transition-occasions-prepared #occasions .occasions__product,
html.fr-it-transition-occasions-prepared #occasions .occasions__hover-video-layer,
html.fr-it-transition-occasions-prepared #occasions .universal-hover-video-layer,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__headline,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__card,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__product,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__hover-video-layer,
html.fr-it-transition-occasions-reverse-out #occasions .universal-hover-video-layer {
  opacity: 0 !important;
  pointer-events: none !important;
  filter: blur(1.15px) saturate(1.08) !important;
}

html.fr-it-transition-occasions-reverse-out #occasions .occasions__headline,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__card,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__product,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__hover-video-layer,
html.fr-it-transition-occasions-reverse-out #occasions .universal-hover-video-layer {
  transition:
    transform var(--fr-it-exit-ms, 2400ms) cubic-bezier(0.18, 0.84, 0.2, 1),
    opacity 900ms ease-out,
    filter var(--fr-it-exit-ms, 2400ms) ease-out !important;
}

html.fr-it-transition-occasions-prepared #occasions .occasions__headline,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__headline {
  transform: translate3d(-50%, -52vh, 0) scale(0.975) !important;
}

html.fr-it-transition-occasions-prepared #occasions .occasions__card--1,
html.fr-it-transition-occasions-prepared #occasions .occasions__hover-video-layer--1,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__card--1,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__hover-video-layer--1,
html.fr-it-transition-occasions-prepared #occasions .occasions__card--3,
html.fr-it-transition-occasions-prepared #occasions .occasions__hover-video-layer--3,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__card--3,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__hover-video-layer--3 {
  transform: translate3d(0, -72vh, 0) scale(0.955) !important;
}

html.fr-it-transition-occasions-prepared #occasions .occasions__card--2,
html.fr-it-transition-occasions-prepared #occasions .occasions__hover-video-layer--2,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__card--2,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__hover-video-layer--2 {
  transform: translate3d(-68vw, 0, 0) scale(0.955) !important;
}

html.fr-it-transition-occasions-prepared #occasions .occasions__card--4,
html.fr-it-transition-occasions-prepared #occasions .occasions__hover-video-layer--4,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__card--4,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__hover-video-layer--4 {
  transform: translate3d(68vw, 0, 0) scale(0.955) !important;
}

html.fr-it-transition-occasions-prepared #occasions .occasions__card--5,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__card--5 {
  transform: translate3d(0, 74vh, 0) scale(0.955) !important;
}

html.fr-it-transition-occasions-prepared #occasions .occasions__hover-video-layer--5,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__hover-video-layer--5 {
  transform: translate3d(0, 74vh, 0) scale(0.955) !important;
}

html.fr-it-transition-occasions-prepared #occasions .occasions__product,
html.fr-it-transition-occasions-reverse-out #occasions .occasions__product {
  transform: translate3d(-50%, 54vh, 0) scale(0.89) !important;
}

html.fr-it-transition-occasions-entering #occasions .occasions__headline,
html.fr-it-transition-occasions-entering #occasions .occasions__card,
html.fr-it-transition-occasions-entering #occasions .occasions__product,
html.fr-it-transition-occasions-entering #occasions .occasions__hover-video-layer,
html.fr-it-transition-occasions-entering #occasions .universal-hover-video-layer {
  transition:
    transform var(--fr-it-occasions-enter-ms, 2800ms) cubic-bezier(0.16, 0.86, 0.2, 1),
    opacity 780ms ease-out,
    filter 1280ms ease-out !important;
  transition-delay: 0s !important;
  filter: none !important;
}

html.fr-it-transition-occasions-entering #occasions .occasions__headline,
html.fr-it-transition-occasions-entering #occasions .occasions__card,
html.fr-it-transition-occasions-entering #occasions .occasions__product,
html.fr-it-transition-occasions-entering #occasions .occasions__hover-video-layer,
html.fr-it-transition-occasions-entering #occasions .universal-hover-video-layer {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.fr-it-transition-occasions-entering #occasions.is-motion-ready .occasions__headline,
html.fr-it-transition-occasions-entering #occasions.is-motion-ready .occasions__product,
html.fr-it-transition-occasions-entering #occasions.is-motion-ready .occasions__card {
  translate: 0 0 !important;
  transition-delay: 0s !important;
}

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

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


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

html.fr-admin-mode.fr-it-transition-admin-video-preview .fr-it-transition-overlay.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}

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

  html.fr-it-transition-exit #experience .experience__feature,
  html.fr-it-transition-exit #experience .experience__feature-text-layer,
  html.fr-it-transition-exit #experience .experience__hover-video-layer,
  html.fr-it-transition-exit #experience .experience__headline,
  html.fr-it-transition-exit #experience .experience__visual,
  html.fr-it-transition-exit #experience .experience__screen,
  html.fr-it-transition-exit #experience .experience__tv-control,
  html.fr-it-transition-occasions-prepared #occasions .occasions__headline,
  html.fr-it-transition-occasions-prepared #occasions .occasions__card,
  html.fr-it-transition-occasions-prepared #occasions .occasions__product,
  html.fr-it-transition-occasions-reverse-out #occasions .occasions__headline,
  html.fr-it-transition-occasions-reverse-out #occasions .occasions__card,
  html.fr-it-transition-occasions-reverse-out #occasions .occasions__product {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}


/* Final root guard for 2→3: keep the TV frame and its screen as one stable visual unit.
   Earlier generic exit rules move/fade .experience__visual/.experience__screen separately,
   which made the screen leak outside the PNG TV. These overrides are intentionally last. */
html.fr-it-transition-exit #experience .experience__visual,
html.fr-it-transition-reverse-out #experience .experience__visual {
  opacity: 1 !important;
  filter: none !important;
  transform: translate(0.676%, calc(-0.108% + 0px)) !important;
}

html.fr-it-transition-exit #experience .experience__screen,
html.fr-it-transition-reverse-out #experience .experience__screen {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  overflow: hidden !important;
  transform: rotate(0deg) !important;
  z-index: 1 !important;
}

html.fr-it-transition-exit #experience .experience__screen-video,
html.fr-it-transition-reverse-out #experience .experience__screen-video {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
}

html.fr-it-transition-exit #experience .experience__tv-control,
html.fr-it-transition-reverse-out #experience .experience__tv-control {
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}


/* Root-stage polish: 2→3 must move the second-window TV as one masked unit.
   The live screen remains clipped inside the approved TV area while the parent
   artboard performs the camera zoom. */
html.fr-it-transition-exit #experience .experience__artboard,
html.fr-it-transition-reverse-out #experience .experience__artboard {
  filter: none !important;
  overflow: hidden !important;
}

html.fr-it-transition-exit #experience .experience__screen,
html.fr-it-transition-reverse-out #experience .experience__screen {
  contain: paint !important;
  isolation: isolate !important;
  clip-path: inset(0 round 1.05cqw) !important;
  opacity: 1 !important;
  filter: none !important;
  background: #000 !important;
}

html.fr-it-transition-exit #experience .experience__screen-video,
html.fr-it-transition-reverse-out #experience .experience__screen-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

/* Remove the dirty darkening that made the TV top look like a separate layer. */
html.fr-it-transition-exit #experience .experience__visual,
html.fr-it-transition-exit #experience .experience__screen,
html.fr-it-transition-exit #experience .experience__tv-control {
  opacity: 1 !important;
  filter: none !important;
}


/* Root fix: window-3 cards and their juice/hover video outlines must behave as one object.
   During 2→3 preparation the outline videos are kept hidden in the same offscreen state;
   during enter they use the same directional transforms as the matching card classes. */
html.fr-it-transition-occasions-prepared #occasions .universal-hover-video-layer,
html.fr-it-transition-occasions-reverse-out #occasions .universal-hover-video-layer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

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

html.fr-it-transition-occasions-entering #occasions .occasions__card,
html.fr-it-transition-occasions-entering #occasions .occasions__hover-video-layer {
  backface-visibility: hidden !important;
  will-change: transform, opacity, filter !important;
}


/* Final reverse polish: the hero nav must already have its glass blur while it
   returns from 2→1, not appear transparent for a frame. */
html.fr-hero-transition-reverse-restoring #hero .hero__header::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

/* Root fix: when hover-video is mounted inside the real card, transition CSS
   must not move the video as a second independent layer. The parent card owns
   all motion; the video only fills the saved local frame. */
html:not(.fr-admin-mode) #experience .frambini-runtime-local-video-card > .experience__hover-video-layer.frambini-local-hover-video,
html:not(.fr-admin-mode) #experience .frambini-runtime-local-video-card > .experience__hover-video-layer.frambini-local-hover-video.frambini-bound-active,
html:not(.fr-admin-mode) #experience .frambini-runtime-local-video-card > .experience__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;
}