.fr-rf-transition-stage {
  position: fixed;
  inset: 0;
  z-index: 2147482100;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  background: transparent;
  transition: opacity 160ms ease, visibility 0s linear 200ms;
}

.fr-rf-transition-stage.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 160ms ease, visibility 0s linear 0s;
}

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

/* Runtime layer order for 4↔5: Card video/frame is above the fifth-window clone, while the clone is clipped by its own slot. */
.fr-rf-transition-video-frame {
  position: absolute;
  left: var(--fr-rf-frame-left, 0%);
  top: var(--fr-rf-frame-top, 0%);
  width: var(--fr-rf-frame-width, 100%);
  height: var(--fr-rf-frame-height, 100%);
  z-index: 4;
  opacity: var(--fr-rf-overlay-opacity, 1);
  overflow: visible;
  pointer-events: none;
  transform: translateZ(0);
}


.fr-rf-transition-stage.is-card-video-hidden .fr-rf-transition-video-frame {
  opacity: 0;
  transition: opacity 140ms ease-out;
}

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


.fr-rf-transition-flavors-clone {
  /* Forward 4→5 needs clone above Card video; transparent backgrounds prevent the clone from covering the golden border. */
  position: absolute;
  left: var(--fr-rf-flavors-track-left, 34.6%);
  top: var(--fr-rf-flavors-track-top, 28.4%);
  width: var(--fr-rf-flavors-track-width, 30.8%);
  height: var(--fr-rf-flavors-track-height, 35.8%);
  z-index: 12;
  opacity: 0;
  overflow: hidden;
  contain: paint;
  contain: paint;
  pointer-events: none;
  transform: translateZ(0);
  transform-origin: 50% 50%;
  transition: opacity 360ms ease;
}

.fr-rf-transition-stage.is-flavors-visible .fr-rf-transition-flavors-clone {
  opacity: 1;
}

.fr-rf-transition-stage.is-flavors-tracking .fr-rf-transition-flavors-clone {
  left: var(--fr-rf-flavors-start-left, 31.8%);
  top: var(--fr-rf-flavors-start-top, 24.2%);
  width: var(--fr-rf-flavors-start-width, 36.4%);
  height: var(--fr-rf-flavors-start-height, 42.6%);
}

.fr-rf-transition-stage.is-flavors-zooming .fr-rf-transition-flavors-clone {
  transition: opacity 360ms ease;
}

.fr-rf-transition-stage .fr-rf-transition-video {
  filter: none;
}

.fr-rf-transition-flavors-viewport .flavors-collection {
  background: transparent !important;
}

.fr-rf-transition-flavors-viewport .flavors-collection[data-state="slide-0"] .flavors-gallery__card--one,
.fr-rf-transition-flavors-viewport .flavors-gallery__card--one {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  filter: brightness(1) saturate(1) !important;
}

.fr-rf-transition-flavors-viewport .flavors-gallery__card:not(.flavors-gallery__card--one) {
  opacity: 0 !important;
  visibility: hidden !important;
}

.fr-rf-transition-flavors-viewport {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100dvh;
  transform-origin: 0 0;
  overflow: hidden;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform;
}

.fr-rf-transition-flavors-viewport > .flavors-collection {
  position: relative !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  transform: none !important;
}

.fr-rf-transition-flavors-viewport .flavors-gallery {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
}

html.fr-rf-transition-lock,
html.fr-rf-transition-lock body {
  overscroll-behavior: none;
}

html.fr-rf-transition-running #reviews,
html.fr-rf-transition-running #window-5 {
  pointer-events: none !important;
}

html.fr-rf-transition-running #window-5 {
  visibility: hidden !important;
}


html.fr-rf-transition-running.fr-rf-transition-handoff-ready #window-5 {
  visibility: visible !important;
}

html.fr-rf-transition-running.fr-rf-transition-handoff-ready #window-5 .flavors-collection {
  visibility: visible !important;
}

.fr-admin-rf-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-rf-transition__head {
  display: grid;
  gap: 4px;
  color: #fff6fa;
}

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

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

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

.fr-admin-rf-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-rf-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-rf-transition__buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.fr-admin-rf-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-rf-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-rf-transition button:disabled {
  opacity: 0.55;
  cursor: progress;
}

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

html.fr-admin-mode .fr-rf-transition-stage {
  z-index: 2147482100 !important;
}

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

.fr-rf-transition-flavors-viewport .flavors-collection.is-visible .flavors-gallery__copy {
  opacity: 1 !important;
  transform: translate3d(0, -50%, 0) !important;
  animation: none !important;
}


.fr-rf-transition-flavors-viewport .flavors-gallery__title,
.fr-rf-transition-flavors-viewport .flavors-gallery__hint {
  opacity: 1 !important;
  visibility: visible !important;
}

.fr-rf-transition-flavors-viewport .flavors-gallery__card--one {
  visibility: visible !important;
}


/* 4→5: Card1 remains visible behind the fifth-window clone. The clone is above
   the movie, but clipped while it is inside the frame, so it cannot cover the
   decorative right border before the fullscreen zoom begins. */
.fr-rf-transition-stage.is-card-video-hidden .fr-rf-transition-video-frame {
  opacity: 0;
  transition: opacity 140ms ease-out;
}