/* Hero flight — the scroll-scrubbed camera journey.
   The scroll-world engine owns #hero-world (tall band, sticky stage).
   The wordmark overlay is absolutely positioned on the band's first viewport,
   so it scrolls away naturally as the flight begins. */

.hero-flight {
  position: relative;
  background: var(--bg);
}

/* Engine theme — match the site's dark world */
#hero-world {
  --sw-bg: #070605;
  --sw-ink: #ffffff;
  --sw-ink-soft: rgba(255, 255, 255, 0.78);
  --sw-accent: var(--orange);
  --sw-font-display: var(--font-display);
  --sw-font-body: var(--font-body);
}

/* base.css's unlayered media reset (height:auto) beats the engine's @layer css —
   restore full-bleed cover behaviour for the flight's media */
#hero-world video,
#hero-world .sw-scene__still {
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
}

/* No engine chrome — the page has its own language for all of it */
#hero-world .sw-route,      /* route rail */
#hero-world .sw-copylayer,  /* per-section copy incl. the 01/03 counter */
#hero-world .sw-scrollbar,  /* orange progress bar */
#hero-world .sw-sky,        /* fixed full-viewport backdrop + particles — would
                               paint black behind the light chapters forever */
#hero-world .sw-topbar { display: none; }

/* The scroll hint keeps the page's own voice */
#hero-world .sw-hint,
#hero-world .sw-hint span {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* The wordmark overlay: first viewport of the band, above the stage */
.hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100svh;
  z-index: 30; /* engine stage is position:fixed at z 10; copy/hint layers sit below 30 */
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--sp-6);
  pointer-events: none;
  /* legibility over the dawn footage without flattening it */
  background: radial-gradient(ellipse 62% 52% at 50% 46%,
              rgba(7, 6, 5, 0.52), rgba(7, 6, 5, 0.18) 65%, transparent);
}
.hero-overlay .hero-inner { max-width: 56rem; }
.hero-overlay .hero-cta a,
.hero-overlay .hero-cta button { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  /* Engine falls back to stills; the overlay simply sits on the first one. */
  .hero-overlay { background: radial-gradient(ellipse 62% 52% at 50% 46%,
                  rgba(7, 6, 5, 0.62), rgba(7, 6, 5, 0.28) 65%, transparent); }
}