/* ======================================================
   Sayonara_Alice.exe — v72.05
   Continuous memory flow + balanced responsive geometry
====================================================== */

/* The stage appears only after real video frames are already advancing.
   This removes the long poster/first-frame pause at every page opening. */
.v72-js .v72-dual-memory-stage {
  opacity: 0;
  animation: none !important;
  transition: opacity .42s ease, transform .8s var(--v72-ease) !important;
}

.v72-js .v72-opening.is-player-ready .v72-dual-memory-stage {
  opacity: 1;
}

/* Keep the expensive full-screen ambience stable while clips crossfade.
   Repainting giant blurred posters during the hand-off was one source of
   visible hitches. The moving memories remain the only changing surfaces. */
.v72-opening-ambient {
  background-image:
    radial-gradient(circle at 72% 38%, rgb(38 130 255 / .18), transparent 34%),
    linear-gradient(90deg, rgb(2 4 11 / .88), rgb(2 8 23 / .32) 58%, rgb(2 4 11 / .56)),
    url("../img/site/blue_memory_gate_master.webp") !important;
  transition: opacity .7s ease !important;
}

.v72-opening-ambient--b {
  background-position: 72% 42% !important;
}

/* Crossfade two already-running streams. No scale jump, 3D rotation or
   brightness pulse is applied during a memory change. */
.v72-opening-video {
  transform: translateZ(0) !important;
  filter: none !important;
  transition: opacity .92s cubic-bezier(.36, 0, .18, 1) !important;
  will-change: opacity;
}

.v72-opening-video.is-visible {
  transform: translateZ(0) !important;
}

.v72-video-portal,
.v72-opening.is-memory-switching .v72-dual-memory-stage {
  filter: none !important;
}

.v72-opening.is-memory-switching .v72-video-sheen {
  opacity: .72;
  transition: opacity .92s ease;
}

/* Desktop copy has a deliberate hard visual boundary before the first
   portrait. SAYONARA can no longer run underneath the video field. */
@media (min-width: 1101px) {
  .v72-opening-copy {
    width: min(31.5vw, 600px);
    max-width: min(31.5vw, 600px) !important;
  }

  .v72-opening-title {
    width: 100%;
    max-width: 100%;
  }

  .v72-title-sayonara {
    font-size: clamp(3.15rem, 4.85vw, 6.45rem) !important;
  }

  .v72-title-alice {
    font-size: clamp(3.85rem, 5.95vw, 7.7rem) !important;
  }

  .v72-opening-subtitle {
    max-width: 100%;
  }
}

/* One shared measure controls video, copy and buttons on portrait screens. */
@media (max-width: 780px) {
  .v72-opening {
    --v72-mobile-column: min(calc(100vw - 2rem), 18.5rem);
  }

  .v72-dual-memory-stage,
  .v72-opening-actions,
  .v72-opening-subtitle,
  .v72-opening-title {
    width: var(--v72-mobile-column) !important;
    max-width: var(--v72-mobile-column) !important;
  }

  .v72-dual-memory-stage {
    height: auto !important;
    aspect-ratio: 512 / 686;
  }

  .v72-opening-title,
  .v72-opening-subtitle {
    margin-right: auto;
    margin-left: auto;
  }

  .v72-opening-actions {
    margin-right: auto;
    margin-left: auto;
  }

  .v72-memory-lane,
  .v72-video-portal {
    width: 100% !important;
    height: 100% !important;
  }
}

/* The iPhone SE-height layout uses the same narrower measure everywhere,
   leaving enough vertical room without shrinking only the video. */
@media (max-width: 780px) and (max-height: 700px) {
  .v72-opening {
    --v72-mobile-column: min(calc(100vw - 2rem), 17.25rem);
  }

  .v72-dual-memory-stage {
    top: calc(2rem + min(21svh, 145px));
  }

  .v72-opening-copy {
    padding-top: calc(2rem + min(49svh, 370px) + .45rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v72-js .v72-dual-memory-stage {
    opacity: 1;
  }
}