/* ==========================================================================
   Prologue: opening scene, visor crossing, hyperspace, arrival.
   The stage is a stack of depth layers:
     bg → title (behind astronaut) → arrival page → WebGL canvas → front copy → UI
   ========================================================================== */

.prologue {
  position: relative;
  background: var(--stage-bg, var(--paper));
}

.stage {
  position: relative;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
}

.is-cinematic .prologue { height: var(--prologue-h, 650vh); }
.is-cinematic .stage { position: sticky; top: 0; }

/* The studio light falls off around the subject before the whole world goes dark. */
.stage__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 75% 85% at var(--bg-x, 72%) var(--bg-y, 38%),
      var(--bg-inner, var(--paper)) 0%,
      var(--stage-bg, var(--paper)) 100%
    );
}

.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform, opacity;
}

/* --- Masthead ---------------------------------------------------------- */

.hero-title {
  position: absolute;
  left: var(--margin);
  top: calc(var(--header-h) + 3.5vh);
  margin: 0;
  font-size: min(21vw, 36vh);
  font-weight: 600;
  font-stretch: 62%;
  line-height: 0.79;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero-title__line { display: block; }
.hero-title__line--2 { padding-left: 0.36em; }

.hero-role {
  position: absolute;
  left: calc(var(--margin) + 0.1em);
  top: calc(var(--header-h) + 3.5vh + min(21vw, 36vh) * 1.64);
  font-size: clamp(22px, 2.5vw, 44px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hero-premise {
  position: absolute;
  left: var(--margin);
  bottom: clamp(28px, 5vh, 56px);
  max-width: 22ch;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-2);
}

/* --- Stage UI (not in depth) ------------------------------------------ */

.stage__ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--ink);
}
.stage__ui > * { pointer-events: auto; }

.hero-meta {
  position: absolute;
  right: var(--margin);
  top: calc(var(--header-h) + 3.5vh);
  text-align: right;
  color: var(--grey);
}

.hero-cues {
  position: absolute;
  right: var(--margin);
  bottom: clamp(28px, 5vh, 56px);
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, 3vw, 48px);
}

.scroll-cue {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 44px;
  background: var(--line);
  overflow: hidden;
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 45%;
  background: var(--ink);
  animation: cue 2.4s var(--ease-in-out) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(230%); }
}

.skip-intro {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* --- Canvas ------------------------------------------------------------ */

.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}
.stage__canvas.is-ready { opacity: 1; }

/* --- Arrival page (the destination approaching through hyperspace) ----- */

.arrival {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
}
.arrival.is-active { visibility: visible; }

.arrival__page {
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform-origin: 50% 50%;
  will-change: transform;
}

.chapter-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  padding: calc(var(--header-h) + 3.5vh) var(--margin) clamp(28px, 5vh, 56px);
  color: var(--ink);
}
.chapter-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.chapter-card__title {
  justify-self: center;
  text-align: center;
  font-size: var(--fit, min(15.5vw, 30vh));
  font-weight: 600;
  font-stretch: var(--wdth, 100%);
  letter-spacing: var(--track, -0.01em);
  line-height: 0.8;
  text-transform: uppercase;
  white-space: nowrap;
}
.chapter-card__title span { display: block; }
.chapter-card__bottom {
  align-self: end;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gutter);
  color: var(--ink-2);
}
.chapter-card__bottom p { max-width: 34ch; font-size: var(--fs-small); line-height: 1.45; }

.stage__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.55) 100%);
  opacity: var(--vignette, 0);
}

/* --- Small screens ----------------------------------------------------- */

@media (max-width: 700px) {
  .hero-title {
    top: calc(var(--header-h) + 2vh);
    font-size: min(29vw, 24vh);
  }
  .hero-title__line--2 { padding-left: 0.34em; }
  .hero-role {
    top: calc(var(--header-h) + 2vh + min(29vw, 24vh) * 1.62);
    font-size: 22px;
  }
  .hero-meta { display: none; }
  .hero-premise { max-width: 17ch; font-size: 12px; }
  .hero-cues { flex-direction: column; align-items: flex-end; gap: 16px; }
  .scroll-cue__text { display: none; }
  .chapter-card__title { font-size: var(--fit, 19vw); }
  .chapter-card__bottom { flex-direction: column; align-items: flex-start; }
}

/* --- Reduced motion & no-JS: a composed, static opening --------------- */

.no-js .stage__canvas,
.is-static .arrival,
.no-js .arrival,
.is-static .stage__vignette,
.no-js .stage__vignette { display: none; }

.is-static .scroll-cue__line::after { animation: none; }