/* The legacy homepage keeps its existing CSS and renderer. */
.cinematic-intro { --intro-header: 84px; --intro-end-hold: .55; margin-top: calc(-1 * var(--intro-header)); height: calc(520svh + var(--intro-end-hold) * 100svh); position: relative; background: #090c13; color: #f6f4ef; }
.cinematic-stage { position: sticky; top: 0; height: 100svh; min-height: 420px; overflow: hidden; isolation: isolate; }
.cinematic-media, .cinematic-shade { position: absolute; inset: 0; pointer-events: none; }
.cinematic-media picture, .cinematic-media img, .cinematic-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cinematic-media { z-index: 0; }
/* Each aspect ratio uses one complete artwork, including the area behind the header. */
.cinematic-intro.is-enabled .cinematic-stage { min-height: 0; }
/* Visible header controls stay clickable throughout entry and restoration. */
.site-header.is-cinematic-immersed { transform: translateY(calc(-100% * var(--intro-immersion))); opacity: calc(1 - var(--intro-immersion)); }
.site-header.is-cinematic-immersed:has(:focus-visible), .site-header.is-cinematic-immersed:has([aria-expanded="true"]), .site-header.is-cinematic-immersed:has(.locale-switcher[open]) { transform: none; opacity: 1; }
.cinematic-media video { z-index: 1; opacity: 0; max-width: none; max-height: none; transform-origin: 0 0; object-fit: fill;
  mask-image: linear-gradient(90deg, transparent, #000 var(--intro-feather, 0px), #000 calc(100% - var(--intro-feather, 0px)), transparent), linear-gradient(0deg, transparent, #000 var(--intro-feather, 0px), #000 calc(100% - var(--intro-feather, 0px)), transparent);
  mask-composite: intersect; }
.cinematic-start { z-index: 2; opacity: var(--intro-start, 1); }
/* Keep the original final video frame opaque; reveal only the surrounding artwork. */
.cinematic-ending { z-index: 0; visibility: hidden; transform-origin: 0 0; }
.cinematic-intro.is-ready.is-ending-loaded .cinematic-ending { visibility: visible; }
.cinematic-intro.is-ready .cinematic-media video { opacity: 1; }
.cinematic-shade { background: linear-gradient(90deg, rgb(7 10 17 / .78), transparent 72%), linear-gradient(0deg, rgb(7 10 17 / .8), transparent 24%); opacity: var(--intro-shade, 1); }
.cinematic-copy { position: absolute; left: clamp(24px, 5.5vw, 110px); right: 24px; bottom: clamp(110px, 15vh, 180px); max-width: 860px; }
.cinematic-copy--opening { opacity: var(--intro-opening, 1); transform: translateY(calc((1 - var(--intro-opening, 1)) * -24px)); pointer-events: none; }
.cinematic-eyebrow { font-size: 10px; font-weight: 650; letter-spacing: .16em; margin: 0 0 25px; }
.cinematic-copy h2 { font-size: clamp(48px, 6.5vw, 83px); line-height: 1.08; letter-spacing: -.065em; font-weight: 650; margin: 0; text-wrap: balance; }
.cinematic-copy h2 span { display: block; }
.cinematic-scroll-cue { display: flex; align-items: center; gap: 30px; font-size: 13px; margin: 30px 0 0; }
.cinematic-scroll-cue span { font-size: 24px; }
.cinematic-load { position: absolute; right: clamp(24px, 5.5vw, 110px); bottom: 108px; font-size: 11px; color: #d8dbe2; }
.cinematic-load [hidden] { display: none; }
.cinematic-intro.is-ready .cinematic-load, .cinematic-intro.is-static:not(.is-failed) .cinematic-load { display: none; }
.cinematic-intro.is-static { height: auto; }
.cinematic-intro.is-static .cinematic-stage { position: relative; top: 0; height: 100svh; }
.cinematic-intro.is-static .cinematic-scroll-cue { display: none; }
@media (max-width: 760px) {
  .cinematic-intro { height: calc(420svh + var(--intro-end-hold) * 100svh); }
  .cinematic-stage { min-height: 0; }
  .cinematic-shade { background: linear-gradient(0deg, rgb(9 12 19 / .82), transparent 75%); }
  .cinematic-copy { bottom: 130px; left: 24px; right: 24px; }
  .cinematic-copy h2 { font-size: clamp(40px, 9vw, 65px); }
  .cinematic-eyebrow { margin-bottom: 18px; }
  .cinematic-scroll-cue { margin-top: 20px; font-size: 12px; }
  .cinematic-load { right: 20px; bottom: 100px; }
  .cinematic-intro:not(.is-enabled) .cinematic-copy { bottom: 65px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-intro { height: auto; }
  .cinematic-stage { position: relative; top: 0; }
  .cinematic-copy--opening { opacity: 1; transform: none; }
  .cinematic-scroll-cue, .cinematic-load { display: none; }
}

/* A complete static page also works before JavaScript or if it never loads. */
.cinematic-intro:not(.is-enabled) { height: auto; }
.cinematic-intro:not(.is-enabled) .cinematic-stage { position: relative; top: 0; }
.cinematic-intro:not(.is-enabled):not(.is-failed) .cinematic-load { display: none; }