/* CH 01: the figure is the subject. The quote is set around him: one line left,
   one line right, and the key word painted into the sky behind him (3D).
   A still frame: no pin, no scroll choreography. */
.hero { --text-quote: clamp(2.6rem, 1rem + 4.4vw, 6.6rem); }
.hero__stage { position: relative; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; }
.hero__canvas { position: absolute; inset: 0; z-index: -1; }
.hero__canvas canvas { display: block; width: 100%; height: 100%; }
.hero__fallback { position: absolute; left: 50%; bottom: 12%; height: 56%; width: auto; translate: -50% 0; }
.hero__canvas.is-live .hero__fallback { display: none; }

/* the subtitles and buttons sit on the dark rubble, so the foot of the frame
   is shaded a touch deeper and they read in bone */
.hero__stage::after {
  content: ''; position: absolute; z-index: 0; inset: auto 0 0; height: 42%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(29 20 44 / .4) 70%, rgb(29 20 44 / .6));
}

/* corner chrome, not cinema bars: the frame runs edge to edge like a slide */
.letterbox { position: absolute; left: 0; right: 0; z-index: 3; height: 72px; color: var(--bone); }
.letterbox--top { top: 0; }
.letterbox--bottom { bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 var(--gutter); font-size: .82rem; }
.credits-row { display: flex; flex-wrap: wrap; gap: .4rem 2.2rem; color: var(--bone-dim); }
.credits-row b { font: italic 800 1.2rem var(--font-display); color: var(--film-amber); margin-right: .35rem; }

.hero__slate { position: absolute; z-index: 2; left: var(--gutter); top: calc(72px + clamp(1.2rem, 4vh, 2.4rem)); margin: 0; }

/* ---------- the quote, set around the figure ---------- */
.hero__title { font: 800 var(--text-quote)/.95 var(--font-display); font-variation-settings: 'opsz' 144; letter-spacing: -.03em; color: var(--fg); }
.hero__line { position: absolute; z-index: 2; }
.hero__line--a { left: var(--gutter); top: 30%; }
.hero__line--b { right: var(--gutter); top: 50%; text-align: right; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero__title .line > span { display: inline-block; }
/* DOM stand-in for the sky word; hidden (but still read) once the 3D word is up */
.hero__word {
  position: absolute; z-index: 1; left: 50%; top: 14%; translate: -50% 0;
  font-size: clamp(5rem, 2rem + 12vw, 15rem); line-height: 1; white-space: nowrap; pointer-events: none;
}
.hero__word em { color: var(--sun); }
@media (max-width: 759px) { .hero:not(.has-3d) .hero__word em { -webkit-text-stroke: 3px var(--ink, #1d142c); paint-order: stroke fill; } }
.hero.has-3d .hero__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- description + actions ---------- */
.hero__subs { position: absolute; z-index: 2; left: var(--gutter); bottom: calc(72px + clamp(1.4rem, 4vh, 2.4rem)); width: min(30rem, 38vw); font: 500 clamp(1.05rem, .85rem + .5vw, 1.35rem)/1.3 var(--font-display); }
.hero__sub { display: inline; margin: 0; color: var(--bone); text-shadow: 0 1px 12px rgb(29 20 44 / .5); }
.hero__sub strong { font-weight: 700; font-style: italic; }
.hero__sub em { color: var(--sky-1); }

.hero__ctas { position: absolute; z-index: 2; right: var(--gutter); bottom: calc(72px + clamp(1.4rem, 4vh, 2.4rem)); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .8rem; }
.hero .btn--solid { background: var(--bone); color: var(--ink); }
.hero .btn--solid::before { background: var(--hot); }
.hero .btn--solid:hover { color: var(--paper); }
.hero .btn--ghost { color: var(--bone); }
.hero .btn--ghost:hover { color: var(--ink); }
.hero .btn--ghost::before { background: var(--bone); }

@media (max-width: 1000px) {
  .hero__line--a { top: 24%; }
  .hero__line--b { top: 40%; }
  .hero__subs { width: 44vw; }
}

/* mobile: no pin. The figure holds the top of the frame, the copy stacks below. */
@media (max-width: 760px) {
  .hero { --fg: var(--bone); --fg-dim: rgb(255 243 226 / .82); --text-quote: clamp(2.6rem, 1.4rem + 7vw, 3.6rem); }
  .hero__stage { display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; padding: 0 var(--gutter) calc(56px + 1.4rem); }
  .hero__stage::after { inset: auto 0 0; height: 68%; filter: none; background: linear-gradient(180deg, transparent 0%, rgb(29 20 44 / .6) 35%, rgb(29 20 44 / .9) 100%); }
  .letterbox { height: 56px; }
  .letterbox--top { height: 72px; }
  .credits-row { font-size: .72rem; gap: .2rem 1rem; }
  .credits-row li:nth-child(2) { display: none; }
  .hero__slate { display: none; }
  .hero__title, .hero__subs, .hero__ctas { position: relative; z-index: 2; }
  .hero__line { position: static; display: block; text-align: left; }
  .hero__line--b { padding-left: 1.2em; }
  .hero__word { top: 16%; font-size: 26vw; }
  .hero__subs { position: relative; left: auto; bottom: auto; width: auto; height: auto; font-size: 1.15rem; }
  .hero__ctas { position: relative; right: auto; bottom: auto; justify-content: flex-start; }
  .hero .btn--solid { background: var(--bone); color: var(--ink); }
  .hero .btn--ghost { color: var(--bone); }
  .hero .btn--ghost::before { background: var(--bone); }
  .hero .btn--ghost:hover { color: var(--ink); }
  .hero__sub em { color: var(--sky-1); text-shadow: none; }
}