/* ============================================================
   hero.css — HERO section (opening moment, full viewport)
   Scope: all classes prefixed .hero-*
   Cosmic retheme: the blueprint grid is RETIRED — the shell is
   fully transparent so the WebGL universe canvas (or the CSS
   static starfield fallback) shows through behind the type.
   SPECIMEN pass: the giant display headline is gone — ONE medium
   kinetic line carries the statement, mono HUD labels pin the
   mount's corners (igloo whisper), marquee stays at the fold.
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: clamp(1.5rem, 5vw, 5rem);
  padding-bottom: 8rem; /* clear the cue + marquee at the fold */
  background: transparent;
}

/* ---------- Headline block ---------- */
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 90rem;
}

/* ---------- Headline: the one medium line ---------- */
.hero__headline {
  /* medium kinetic line, NOT display-xl — clamp(1.8rem, 4vw, 3.5rem) */
  font-weight: 600; /* Clash 500 isn't shipped by Fontshare; 600 is the medium voice */
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  /* same halo-legibility treatment as connect.css — the galaxy band
     passes behind the headline */
  text-shadow: 0 0 26px rgba(10, 22, 51, 0.65);
}

/* Each line clips its chars during the reveal; padding/margin compensation
   keeps descenders ("p" in "ship.") from being clipped while net layout
   stays unchanged. */
.hero__line {
  display: block;
  overflow: hidden;
  padding: 0.06em 0 0.14em;
  margin: -0.06em 0 -0.14em;
}

.hero__word {
  display: inline-block;
}

.hero__char {
  display: inline-block;
  will-change: transform;
}

/* Rotating word slot: own line, lime, clips the roll in/out */
.hero__word--swap {
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.hero__swap {
  display: inline-block;
  color: var(--pop);
  will-change: transform;
}

/* ---------- HUD corners (mono specimen labels, absolute in the mount) ---------- */
.hero__hud {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  pointer-events: none;
  user-select: none;
}

.hero__hud--tl {
  top: clamp(5rem, 12vh, 7rem); /* clears the fixed pill nav */
  left: clamp(1.5rem, 5vw, 5rem);
}

.hero__hud--tr {
  top: clamp(5rem, 12vh, 7rem);
  right: clamp(1.5rem, 5vw, 5rem);
  align-items: flex-end;
  text-align: right;
}

.hero__hud--bl {
  bottom: 5rem; /* clears the marquee strip at the fold */
  left: clamp(1.5rem, 5vw, 5rem);
}

.hero__hud--br {
  right: clamp(1.5rem, 5vw, 5rem);
  bottom: 5rem;
}

/* Top-right manifesto: the deck's subline, re-broken into 4 right-aligned
   mono lines (sentences verbatim, original casing kept). */
.hero__manifesto {
  max-width: 36ch;
}

.hero__manifesto-line {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: var(--muted);
  text-shadow: 0 1px 14px rgba(10, 22, 51, 0.8); /* stays legible over the galaxy */
}

/* ---------- Scroll cue ---------- */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 4.5rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 1;
  pointer-events: none;
}

.hero__cue-text {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  padding-left: 0.3em; /* optically re-center letter-spaced text */
  text-transform: uppercase;
  color: var(--muted);
}

.hero__cue-line {
  position: relative;
  width: 1px;
  height: 44px;
  background: rgba(143, 163, 200, 0.25);
  overflow: hidden;
}

.hero__cue-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 45%;
  background: var(--pop);
  animation: hero-cue-drop 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes hero-cue-drop {
  from { transform: translateY(-110%); } /* starts clipped above */
  to   { transform: translateY(230%); }  /* ends clipped below: loop jump is invisible */
}

/* ---------- Marquee strip at the fold ---------- */
.hero__marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(143, 163, 200, 0.16);
  background: linear-gradient(to top, rgba(10, 22, 51, 0.9), rgba(10, 22, 51, 0));
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__marquee .marquee__track {
  gap: 2.5rem;
  padding-right: 2.5rem;
  animation-duration: 36s; /* calm drift, ~100px/s */
}

.hero__marquee:hover .marquee__track {
  animation-play-state: paused;
}

.hero__marquee-group {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
}

.hero__marquee-phrase {
  white-space: nowrap;
}

.hero__marquee-sep {
  color: var(--pop);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .hero {
    padding: 1.25rem;
    padding-bottom: 7rem;
  }

  /* Corners collide on narrow screens: keep the three small mono labels
     pinned, drop the manifesto into the flow under the headline. */
  .hero__hud--tl {
    top: 4.75rem;
    left: 1.25rem;
  }

  .hero__hud--tr {
    position: static;
    order: 2; /* .hero is a flex column — lands after .hero__inner */
    align-items: flex-start;
    text-align: left;
    margin-top: 2rem;
    max-width: none;
  }

  .hero__hud--bl {
    bottom: 4.75rem;
    left: 1.25rem;
  }

  .hero__hud--br {
    right: 1.25rem;
    bottom: 4.75rem;
  }

  .hero__cue {
    bottom: 4rem;
  }

  .hero__cue-line {
    height: 34px;
  }

  .hero__marquee {
    padding: 0.9rem 0;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }
}

/* Short landscape screens: drop the cue so content never collides */
@media (max-height: 560px) {
  .hero__cue {
    display: none;
  }

  .hero {
    padding-bottom: 6rem;
  }

  .hero__hud--tl,
  .hero__hud--tr {
    top: 4.25rem;
  }

  .hero__hud--bl,
  .hero__hud--br {
    bottom: 4.25rem;
  }
}