/* ═══════════════════════════════════════════════════════════════
   FMST · FIRST LIGHT · stage-9
   Hero as an opening scene: coins retired, embers, Ken Burns
   settle, staggered entrance, headline shimmer, film grade,
   cursor parallax, Nine Doors chips, stat count-up, scroll cue.
   Content untouched. Plays once. Reduced-motion: static.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · The coins retire ────────────────────────────────────── */
.ball-rain{ display:none !important; }

/* ── 2 · Film grade — grain + vignette over the scene ────────── */
.fl-grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 35% 40%, transparent 55%, rgba(0,0,0,.42) 100%);
}
.fl-grade::after{
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
}

/* ── 3 · Embers — sparse construction sparks ─────────────────── */
.fl-embers{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.fl-ember{
  position:absolute; bottom:-12px; border-radius:50%;
  background:radial-gradient(circle, #FFE0B0 0%, #F97316 45%, transparent 72%);
  will-change:transform,opacity;
  opacity:0;
  animation:flRise var(--dur,14s) linear var(--delay,0s) infinite;
}
@keyframes flRise{
  0%{ transform:translate3d(0,0,0); opacity:0; }
  6%{ opacity:var(--o,.5); }
  85%{ opacity:calc(var(--o,.5) * .6); }
  100%{ transform:translate3d(var(--drift,20px), -96vh, 0); opacity:0; }
}

/* ── 4 · Entrance choreography (gated on html.fl-anim) ───────── */
html.fl-anim .hero-badge,
html.fl-anim .hero h1 .fl-line,
html.fl-anim .hero-sub,
html.fl-anim .hero-cats,
html.fl-anim .hero-btns,
html.fl-anim .hero-trust{
  opacity:0; transform:translateY(26px);
  animation:flIn 1s cubic-bezier(.16,1,.3,1) both;
}
html.fl-anim .hero h1 .fl-line{ display:inline-block; }
html.fl-anim .hero-badge          { animation-delay:.15s; }
html.fl-anim .hero h1 .fl-line-1  { animation-delay:.32s; }
html.fl-anim .hero h1 .fl-line-2  { animation-delay:.5s; }
html.fl-anim .hero-sub            { animation-delay:.68s; }
html.fl-anim .hero-cats           { animation-delay:.8s; }
html.fl-anim .hero-btns           { animation-delay:.92s; }
html.fl-anim .hero-trust          { animation-delay:1.05s; }
@keyframes flIn{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:translateY(0); }
}

/* headline shimmer — one pass across "Every Solution." */
.hero h1 em{ position:relative; display:inline-block; }
html.fl-anim .hero h1 em::after{
  content:''; position:absolute; top:-6%; bottom:-6%; width:34%; left:-50%;
  transform:skewX(-16deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28) 50%, transparent);
  mix-blend-mode:overlay; pointer-events:none;
  animation:flShimmer 1.1s cubic-bezier(.4,0,.2,1) 1.7s 1 both;
}
@keyframes flShimmer{
  from{ left:-50%; opacity:1; }
  80%{ opacity:1; }
  to{ left:120%; opacity:0; }
}

/* ── 5 · Nine Doors — chips join the department system ───────── */
.hcat{
  cursor:pointer; position:relative;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .35s cubic-bezier(.16,1,.3,1),
             border-color .3s ease, color .3s ease,
             box-shadow .35s ease, background-color .3s ease !important;
}
.hcat::before{
  content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0;
  background:var(--hc, #F97316);
  box-shadow:0 0 6px color-mix(in srgb, var(--hc, #F97316) 80%, transparent);
  transition:transform .3s ease;
}
.hcat:hover, .hcat:focus-visible{
  transform:translateY(-2px);
  color:#fff !important;
  border-color:color-mix(in srgb, var(--hc, #F97316) 55%, transparent) !important;
  background:color-mix(in srgb, var(--hc, #F97316) 10%, transparent) !important;
  box-shadow:0 6px 20px -6px color-mix(in srgb, var(--hc, #F97316) 45%, transparent);
}
.hcat:hover::before{ transform:scale(1.5); }
.hcat:active{ transform:scale(.97); }

/* ── 6 · Scroll cue ──────────────────────────────────────────── */
.fl-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; pointer-events:none;
  transition:opacity .8s ease;
}
html.fl-anim .fl-cue{ animation:flCueIn 1s ease 2.4s both; }
.fl-cue-label{
  font-size:9px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.fl-cue-line{
  width:1px; height:34px; overflow:hidden; position:relative;
  background:rgba(255,255,255,.12); border-radius:1px;
}
.fl-cue-line::after{
  content:''; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background:linear-gradient(to bottom, transparent, #F97316);
  animation:flCueDrop 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes flCueIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes flCueDrop{
  0%{ top:-50%; } 70%,100%{ top:110%; }
}
.fl-cue.fl-cue-hide{ opacity:0 !important; animation:none !important; }

/* ── perf hints for the parallax layers ──────────────────────── */
.hero-bg, .hero-grid{ will-change:transform; }

/* ── Touch: no embers density change needed; parallax off in JS ─ */
@media (max-width:768px){
  .fl-cue{ bottom:16px; }
}

/* ── Reduced motion: the scene stands still, fully lit ───────── */
@media (prefers-reduced-motion: reduce){
  .fl-embers, .fl-cue{ display:none !important; }
  html.fl-anim .hero-badge,
  html.fl-anim .hero h1 .fl-line,
  html.fl-anim .hero-sub,
  html.fl-anim .hero-cats,
  html.fl-anim .hero-btns,
  html.fl-anim .hero-trust{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
  html.fl-anim .hero h1 em::after{ display:none !important; }
}