/* ============================================================================
   FLIGHT — hero (beat #1 "Launch")
   Full-viewport cinematic hero. Red paper airplane launches along a curved
   dashed contrail, settles beside the headline, then departs on scroll-out.
   All classes prefixed .hero-. Tokens only. Static, legible reduced-motion state.
   ============================================================================ */

/* ---- mount: override .section padding, go full viewport ---- */
#hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  /* safe center: falls back to top-align when content is taller than the
     viewport, so the headline never clips up under the fixed nav. */
  align-items: safe center;
  /* clear the fixed nav (~69px) + breathing room */
  padding-block: clamp(84px, 10vh, 120px) clamp(40px, 6vh, 80px);
}

/* ---- ambient emitted-light glows (depth behind content) ---- */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-bg::before,
.hero-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
}
/* cool wash up top-right, behind the flight scene */
.hero-bg::before {
  width: 60vw; height: 60vw;
  inset-block-start: -22vw; inset-inline-end: -12vw;
  background: radial-gradient(circle, rgba(var(--blue-rgb), 0.20) 0%, rgba(var(--blue-rgb), 0) 62%);
}
/* warm light pooling under the "Everyone wins." line */
.hero-bg::after {
  width: 46vw; height: 46vw;
  inset-block-end: -16vw; inset-inline-start: -8vw;
  background: radial-gradient(circle, rgba(var(--yellow-rgb), 0.16) 0%, rgba(var(--yellow-rgb), 0) 60%);
}

/* ---- the sky: SVG contrail + paper airplane ---- */
.hero-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.hero-landglow { opacity: 0; }

.hero-trail-glow {
  fill: none;
  stroke: rgba(var(--red-rgb), 0.30);
  stroke-width: 7;
  stroke-linecap: round;
}
.hero-trail {
  fill: none;
  stroke: url(#hero-trailGrad);
  stroke-width: 2.4;
  stroke-linecap: round;
  /* rounded near-zero dashes read as luminous dots, echoing the nav logo trail */
  stroke-dasharray: 0.1 12;
}
.hero-trail-mask {
  fill: none;
  stroke: #fff;
  stroke-width: 30;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-plane { will-change: transform; }
.hero-plane-inner { transform-box: view-box; }

/* ---- content ---- */
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
/* font-independent column: `ch` collapses against the small base font, so use
   a fixed measure. Wide enough that each headline sentence stays on one line. */
.hero-copy { max-width: min(92vw, 50rem); }

.hero-eyebrow {
  margin-block-end: clamp(18px, 2.6vh, 30px);
}
.hero-eyebrow-mark {
  width: 20px;
  height: auto;
  transform: translateY(-1px) rotate(-8deg);
  filter: drop-shadow(0 0 10px rgba(var(--red-rgb), 0.55));
}

.hero-headline {
  font-weight: 900;
  /* height-aware baseline so it never dwarfs the viewport before the JS
     fit-to-viewport pass (hero.js) fine-tunes it to fit above the fold. */
  font-size: clamp(2.1rem, min(8vw, 12.5vh), 6.5rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.045em;
  color: var(--fg-1);
  margin: 0;
}
.hero-line { display: block; }
.hero-line-in {
  display: inline-block;
  white-space: nowrap;          /* each sentence stays one line; fit-to-viewport handles size */
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.hero-accent {
  color: var(--yellow);
  /* emitted light: the word glows */
  text-shadow:
    0 0 64px rgba(var(--yellow-rgb), 0.45),
    0 0 26px rgba(var(--yellow-rgb), 0.35),
    0 0 6px rgba(var(--yellow-rgb), 0.30);
}

.hero-lead {
  margin-block-start: clamp(22px, 3.4vh, 38px);
  color: var(--fg-2);
  max-width: 40ch;
}

/* ---- scroll cue ---- */
.hero-cue {
  position: absolute;
  inset-block-end: clamp(20px, 4.5vh, 44px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--fg-3);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out-expo);
}
.hero-cue:hover { color: var(--fg-1); }
.hero-cue-label {
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.hero-cue-rail {
  position: relative;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  overflow: hidden;
}
.hero-cue-dot {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: 4px;
  height: 4px;
  margin-inline-start: -2px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 8px rgba(var(--yellow-rgb), 0.8);
  animation: hero-cue-fall 1.9s var(--ease-in-out) infinite;
}
@keyframes hero-cue-fall {
  0%   { transform: translateY(-6px); opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

/* ---- responsive ---- */
@media (max-width: 860px) {
  .hero-copy { max-width: min(92vw, 34rem); }
  .hero-headline { letter-spacing: -0.035em; }
}
@media (max-width: 560px) {
  .hero-copy { max-width: none; }
  .hero-lead { max-width: 34ch; }
}

/* ---- reduced motion: calm, fully legible, nothing hidden ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-cue-dot { animation: none; opacity: 1; transform: translateY(20px); }
  .hero-bg::before, .hero-bg::after { filter: none; }
}