/* ======================================================
   Sayonara_Alice.exe — v72.14
   Full-Bleed Adaptive Stage
   ------------------------------------------------------
   Replaces the v72.13 stage layer. The video engine and
   mobile composition are untouched. From 700px upward,
   technical header/footer become overlays and no longer
   reserve rows. The dual stage is sized from BOTH the
   available width and height, so it grows instead of being
   vertically centred as a smaller card.
====================================================== */

@media (min-width: 700px) {
  .v72-opening[data-memory-mode="dual"] {
    container: v72-stage / size;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-shell {
    --v72-bleed-x: clamp(10px, 1.35vw, 24px);
    --v72-bleed-y: clamp(7px, .9svh, 14px);
    --v72-safe-top: clamp(34px, 4.8cqh, 52px);
    --v72-safe-bottom: clamp(30px, 4.4cqh, 48px);
    --v72-stage-radius: clamp(11px, 1cqw, 18px);

    box-sizing: border-box !important;
    position: relative !important;
    isolation: isolate !important;
    width: min(calc(100% - 2 * var(--v72-bleed-x)), 1840px) !important;
    height: calc(100svh - 2 * var(--v72-bleed-y)) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: var(--v72-bleed-y) auto !important;
    padding: 0 !important;
    display: grid !important;
    transform: none !important;
  }

  /* Technical metadata is part of the cinematic frame, not layout rows. */
  .v72-opening[data-memory-mode="dual"] .v72-opening-header,
  .v72-opening[data-memory-mode="dual"] .v72-opening-footer {
    position: absolute !important;
    left: clamp(4px, .55cqw, 10px) !important;
    right: clamp(4px, .55cqw, 10px) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 40 !important;
    pointer-events: none;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-header {
    top: clamp(5px, .65cqh, 10px) !important;
    align-items: center !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-footer {
    bottom: clamp(4px, .55cqh, 9px) !important;
    align-items: end !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-footer .v72-scroll-cue {
    pointer-events: auto;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-copy,
  .v72-opening[data-memory-mode="dual"] .v72-dual-memory-stage {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-dual-memory-stage {
    z-index: 7 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(6px, .62cqw, 12px) !important;
    aspect-ratio: 1024 / 686 !important;
    overflow: visible !important;
    filter: none !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-memory-lane,
  .v72-opening[data-memory-mode="dual"] .v72-memory-lane--a,
  .v72-opening[data-memory-mode="dual"] .v72-memory-lane--b {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 512 / 686 !important;
    margin: 0 !important;
    transform: none !important;
    border-radius: var(--v72-stage-radius) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-video-portal {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
  }

  /* Keep preload buffers rigorously invisible. */
  .v72-opening[data-memory-mode="dual"] .v72-opening-video {
    visibility: hidden !important;
    opacity: 0 !important;
  }
  .v72-opening[data-memory-mode="dual"] .v72-opening-video.is-visible,
  .v72-opening[data-memory-mode="dual"] .v72-opening-video.is-incoming {
    visibility: visible !important;
  }
  .v72-opening[data-memory-mode="dual"] .v72-opening-video.is-visible {
    opacity: 1 !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-copy {
    z-index: 24 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-copy::before {
    filter: blur(7px) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-title-base,
  .v72-opening[data-memory-mode="dual"] .v72-title-signature {
    width: 100% !important;
  }
}

/* ======================================================
   WIDE / LANDSCAPE STAGE
   The video pair uses almost the full viewport height.
   Copy occupies the same grid cell and overlaps only the
   protected left edge through a dark cinematic gradient.
====================================================== */
@container v72-stage (min-aspect-ratio: 6 / 5) {
  .v72-opening[data-memory-mode="dual"] .v72-opening-shell {
    grid-template: "scene" minmax(0, 1fr) / minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-dual-memory-stage,
  .v72-opening[data-memory-mode="dual"] .v72-opening-copy {
    grid-area: scene !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-dual-memory-stage {
    align-self: center !important;
    justify-self: end !important;
    width: min(
      calc(100cqw - clamp(88px, 7.4cqw, 146px)),
      calc((100cqh - var(--v72-safe-top) - var(--v72-safe-bottom)) * 1.49272)
    ) !important;
    max-width: none !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-copy {
    align-self: center !important;
    justify-self: start !important;
    width: clamp(258px, 26.5cqw, 448px) !important;
    max-width: 448px !important;
    padding-left: clamp(8px, 1.15cqw, 20px) !important;
    text-align: left !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-copy::before {
    inset: -4.8rem -7rem -4.6rem -4.2rem !important;
    opacity: 1 !important;
    background:
      linear-gradient(90deg, rgb(0 3 10 / .99) 0%, rgb(0 4 13 / .97) 42%, rgb(0 5 16 / .78) 64%, transparent 100%),
      radial-gradient(ellipse at 20% 52%, rgb(0 8 22 / .78), transparent 70%) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-kicker,
  .v72-opening[data-memory-mode="dual"] .v72-opening-actions {
    justify-content: flex-start !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-title-sayonara {
    font-size: clamp(2.35rem, 5.05cqw, 6.25rem) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-title-alice {
    font-size: clamp(2.88rem, 6.08cqw, 7.45rem) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-subtitle {
    width: min(100%, 31rem) !important;
    max-width: 31rem !important;
    margin: clamp(.5rem, 1.05cqh, .82rem) 0 0 !important;
    text-align: left !important;
    font-size: clamp(.76rem, 1.08cqw, 1.1rem) !important;
    line-height: 1.48 !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-actions {
    width: min(100%, 31rem) !important;
    margin-top: clamp(.55rem, 1.15cqh, .88rem) !important;
    gap: clamp(.45rem, .65cqw, .75rem) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-enter,
  .v72-opening[data-memory-mode="dual"] .v72-archive-link {
    min-height: clamp(39px, 5.2cqh, 51px) !important;
    padding: .68rem clamp(.78rem, 1.18cqw, 1.18rem) !important;
    font-size: clamp(.53rem, .66cqw, .73rem) !important;
  }
}

/* ======================================================
   TALL / PORTRAIT STAGE
   The pair is anchored near the top technical overlay and
   copy follows immediately. Remaining space is deliberately
   below the composition, not a dead band above the videos.
====================================================== */
@container v72-stage (max-aspect-ratio: 6 / 5) {
  .v72-opening[data-memory-mode="dual"] .v72-opening-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "stage" "copy" !important;
    align-content: start !important;
    row-gap: 0 !important;
    padding-top: var(--v72-safe-top) !important;
    padding-bottom: var(--v72-safe-bottom) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-dual-memory-stage {
    grid-area: stage !important;
    justify-self: center !important;
    align-self: start !important;
    width: min(
      calc(100cqw - clamp(4px, 1cqw, 12px)),
      calc((100cqh - var(--v72-safe-top) - var(--v72-safe-bottom) - clamp(150px, 20cqh, 215px)) * 1.49272)
    ) !important;
    max-width: 1060px !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-copy {
    grid-area: copy !important;
    justify-self: center !important;
    align-self: start !important;
    width: min(88cqw, 46rem) !important;
    max-width: 46rem !important;
    margin-top: clamp(-20px, -1.75cqh, -8px) !important;
    text-align: center !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-copy::before {
    inset: -2.2rem -3.5rem -2.6rem !important;
    opacity: .98 !important;
    background: radial-gradient(ellipse at 50% 42%, rgb(0 3 11 / .99) 0%, rgb(0 4 15 / .94) 47%, rgb(0 7 20 / .57) 71%, transparent 90%) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-kicker,
  .v72-opening[data-memory-mode="dual"] .v72-opening-actions {
    justify-content: center !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-title-sayonara {
    font-size: clamp(2.25rem, 8.05cqw, 5.15rem) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-title-alice {
    font-size: clamp(2.72rem, 9.65cqw, 6.15rem) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-subtitle {
    width: min(78cqw, 34rem) !important;
    max-width: 34rem !important;
    margin: clamp(.36rem, .62cqh, .58rem) auto 0 !important;
    text-align: center !important;
    font-size: clamp(.72rem, 1.65cqw, .98rem) !important;
    line-height: 1.4 !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-actions {
    width: min(78cqw, 34rem) !important;
    margin: clamp(.48rem, .82cqh, .72rem) auto 0 !important;
    gap: clamp(.42rem, 1cqw, .64rem) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-enter,
  .v72-opening[data-memory-mode="dual"] .v72-archive-link {
    min-height: clamp(38px, 4.5cqh, 47px) !important;
    padding: .6rem clamp(.72rem, 1.55cqw, 1.05rem) !important;
    font-size: clamp(.51rem, 1.18cqw, .66rem) !important;
  }
}

/* Short but dual viewports keep the same wide composition and
   simply reduce technical chrome. There is no alternate layout. */
@media (min-width: 700px) and (max-height: 620px) {
  .v72-opening[data-memory-mode="dual"] .v72-opening-shell {
    --v72-bleed-y: 5px;
    --v72-safe-top: 27px;
    --v72-safe-bottom: 24px;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-header,
  .v72-opening[data-memory-mode="dual"] .v72-opening-footer {
    font-size: .49rem !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-kicker {
    margin-bottom: .2rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v72-opening[data-memory-mode="dual"] .v72-opening-shell {
    transition: none !important;
  }
}