/* ════════════════════════════════════════════════════════════════
   hero.css · hero stage, WebGL canvas, role roller, ticker
   ════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: clamp(5.5rem, 13vh, 9rem) var(--gutter) clamp(5.5rem, 12vh, 8.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* WebGL canvas ---------------------------------------------------- */
.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -3;
  opacity: 0;
  transition: opacity 1.6s var(--e-soft);
}
.hero__canvas.is-live { opacity: 1; }

/* CSS fallback (also the ambient bed behind the canvas) ------------ */
.hero__fallback {
  position: absolute; inset: 0; z-index: -4;
  background:
    radial-gradient(58% 52% at 62% 44%, rgba(43,140,255,0.20), transparent 62%),
    radial-gradient(42% 40% at 24% 68%, rgba(110,201,255,0.12), transparent 65%),
    radial-gradient(90% 70% at 50% 120%, rgba(27,92,224,0.16), transparent 60%),
    var(--ink-000);
}
.hero__fallback::after {
  content: '';
  position: absolute; top: 50%; left: 62%;
  width: min(46vw, 520px); aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  background: conic-gradient(from 0deg, rgba(226,244,255,0.16), rgba(110,201,255,0.05), rgba(43,140,255,0.14), rgba(226,244,255,0.16));
  clip-path: polygon(50% 0%, 100% 26%, 100% 74%, 50% 100%, 0% 74%, 0% 26%);
  filter: blur(18px);
  animation: fbFloat 16s var(--e-io) infinite;
  opacity: 0.9;
}
.hero.has-webgl .hero__fallback::after { display: none; }

@keyframes fbFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
  50%      { transform: translate(-50%, -56%) rotate(220deg) scale(1.08); }
}

.hero__veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(8,11,19,0.60) 0%, transparent 28%, transparent 64%, rgba(8,11,19,0.78) 100%),
    linear-gradient(90deg, rgba(8,11,19,0.55) 0%, transparent 48%);
  pointer-events: none;
}

/* Inner ----------------------------------------------------------- */
.hero__inner {
  position: relative;
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}

.js-reveal [data-hero] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--e-soft), transform 1.2s var(--e-out);
}
body.is-revealed [data-hero] { opacity: 1; transform: none; }
body.is-revealed [data-hero="1"] { transition-delay: 0.10s; }
body.is-revealed [data-hero="2"] { transition-delay: 0.18s; }
body.is-revealed [data-hero="3"] { transition-delay: 0.26s; }
body.is-revealed [data-hero="4"] { transition-delay: 0.58s; }
body.is-revealed [data-hero="5"] { transition-delay: 0.68s; }
body.is-revealed [data-hero="6"] { transition-delay: 0.82s; }

/* Eyebrow / role roller ------------------------------------------- */
.hero__eyebrow {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: clamp(0.9rem, 2vw, 1.5rem);
}
.hero__eyebrow-line {
  width: clamp(28px, 5vw, 64px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--ice-300));
}

.hero__roles {
  position: relative;
  display: block;
  height: 1.15em;
  overflow: hidden;
  font: 500 clamp(0.6875rem, 0.62rem + 0.28vw, 0.8125rem)/1.15 var(--f-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ice-200);
  min-width: 19em;
}
.hero__role {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  transform: translateY(-110%);
  opacity: 0;
  transition: transform 0.8s var(--e-out), opacity 0.5s ease;
}
.hero__role.is-active { transform: translateY(0); opacity: 1; }
.hero__role.is-leaving { transform: translateY(110%); opacity: 0; }

/* Title ------------------------------------------------------------ */
.hero__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(3rem, min(13vw, 19.5vh), 13rem);
  line-height: 0.86;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  margin-bottom: clamp(1.1rem, 2.6vw, 2rem);
}

.hero__line {
  display: block;
  background: linear-gradient(178deg, #ffffff 0%, #e3eefb 42%, #94b3d6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__line--out {
  margin-left: clamp(0px, 6vw, 5.5rem);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(205, 228, 255, 0.55);
  background: none;
  color: transparent;
}

.hero__title .char-wrap > span { transition-delay: calc(var(--ci, 0) * 34ms + 0.30s); }
.hero__line--out .char-wrap > span { transition-delay: calc(var(--ci, 0) * 34ms + 0.42s); }

/* Lede ------------------------------------------------------------- */
.hero__lede {
  max-width: 52ch;
  font-size: clamp(0.95rem, 0.88rem + 0.34vw, 1.1875rem);
  line-height: 1.62;
  color: var(--fog-200);
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Base row --------------------------------------------------------- */
.hero__base {
  position: relative;
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem;
  padding-top: clamp(1.75rem, 4.5vh, 3rem);
}

.hero__meta {
  display: flex; align-items: center; gap: 0.5rem;
  font: 400 0.625rem/1 var(--f-mono);
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fog-400);
  flex: 1 1 0;
}
.hero__meta--end { justify-content: flex-end; }
.hero__meta-sep { color: var(--ice-400); }

.hero__scroll {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font: 400 0.5938rem/1 var(--f-mono);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fog-300);
  transition: color 0.35s ease;
}
.hero__scroll:hover { color: var(--ice-200); }
.hero__scroll i {
  position: relative;
  display: block; width: 1px; height: 46px;
  background: var(--line-2);
  overflow: hidden;
}
.hero__scroll i::after {
  content: ''; position: absolute; left: 0; top: 0;
  width: 100%; height: 40%;
  background: var(--ice-200);
  box-shadow: 0 0 10px var(--glow-ice);
  animation: scrollRun 2.1s var(--e-io) infinite;
}
@keyframes scrollRun {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(250%); }
  100% { transform: translateY(250%); }
}

@media (max-width: 820px) {
  .hero__base { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .hero__meta--end { justify-content: flex-start; }
  .hero__scroll { flex-direction: row; align-items: center; }
  .hero__scroll i { width: 46px; height: 1px; }
  .hero__scroll i::after { width: 40%; height: 100%; animation-name: scrollRunX; }
  @keyframes scrollRunX {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(250%); }
    100% { transform: translateX(250%); }
  }
}

@media (max-width: 660px) {
  .hero__line--out { -webkit-text-stroke-width: 0.8px; }
  /* two-column corner meta collapses into overlapping wrapped text here */
  .hero__meta { display: none; }
  .hero__base { justify-content: flex-start; padding-top: clamp(1.25rem, 3vh, 2rem); }
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(8,11,19,0.72) 0%, rgba(8,11,19,0.26) 30%, rgba(8,11,19,0.40) 62%, rgba(8,11,19,0.86) 100%);
  }
}

/* ── TICKER ─────────────────────────────────────────────────── */
.ticker {
  position: relative;
  padding-block: clamp(1.5rem, 3vw, 2.4rem);
  border-block: 1px solid var(--line-1);
  background: linear-gradient(180deg, rgba(22,29,42,0.72), rgba(8,11,19,0.92));
  overflow: hidden;
  user-select: none;
}
.ticker::before,
.ticker::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(60px, 12vw, 200px);
  z-index: 2; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--ink-000), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--ink-000), transparent); }

.ticker__row { overflow: hidden; }
.ticker__row + .ticker__row { margin-top: clamp(0.25rem, 1vw, 0.6rem); }

.ticker__track {
  display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.75rem);
  white-space: nowrap;
  width: max-content;
  will-change: transform;
}

.ticker__track span {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 0.8rem + 2.6vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--fog-100);
  opacity: 0.92;
}
.ticker__track i {
  font-style: normal;
  font-size: clamp(0.7rem, 0.5rem + 0.7vw, 1.1rem);
  color: var(--ice-300);
  opacity: 0.75;
}

.ticker__row--outline .ticker__track span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(180, 196, 220, 0.42);
  opacity: 1;
}
.ticker__row--outline .ticker__track i { color: var(--fog-400); }

/* hero headline characters ride in with the rest of the stage */
body.is-revealed .hero__title .char-wrap > span { transform: none; opacity: 1; }