/* ============================================================
   HERO MINI-GAME — "Beat the peak"
   Arm → terminal countdown → win (stable, cost down) or
   lose (degraded video, CDN cost spikes). Framework free.
   ============================================================ */

.hg-root{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--r-xl);
  background:#050b1f;
  border:1px solid rgba(17,107,248,.22);
  box-shadow:0 32px 80px -28px rgba(5,11,31,.85),0 0 0 1px rgba(33,188,238,.06) inset;
  overflow:hidden;
  isolation:isolate;
  color:#eaf0fb;
  font-family:var(--font-body);
}

/* ---- Base footage ---- */
.hg-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;
  transition:filter .6s var(--ease),transform .6s var(--ease),opacity .6s var(--ease);
}
.hg-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,11,31,.42) 0%,rgba(5,11,31,.6) 55%,rgba(5,11,31,.82) 100%);
  transition:background .6s var(--ease);
}

/* Everything interactive sits above the scrim */
.hg-alarm,.hg-term,.hg-win,.hg-lose,.hg-buffer,.hg-lobby{z-index:3;}

/* ============================================================
   LOBBY — invitation to play (shown over the live footage)
   ============================================================ */
.hg-lobby{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:clamp(18px,4%,40px);
  background:radial-gradient(75% 65% at 50% 45%,rgba(5,11,31,.34),rgba(5,11,31,.80) 92%);
  opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease);
}
[data-state="lobby"] .hg-lobby{opacity:1;pointer-events:auto;}
/* announcement card sitting over the footage */
.hg-lobby__card{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  width:min(92%,440px);
  padding:clamp(26px,5%,40px) clamp(22px,5%,38px);
  border-radius:var(--r-lg,20px);
  border:1px solid rgba(127,220,255,.28);
  /* Perf: this card sits over the looping video. A live backdrop-filter would
     re-blur the footage every frame (heavy on weak GPUs) for almost no visual
     gain, since the panel is already ~80% opaque. We drop the blur and lift the
     panel opacity a touch to compensate, so it looks the same but costs nothing. */
  background:linear-gradient(160deg,rgba(13,22,48,.93),rgba(7,13,33,.95));
  box-shadow:0 24px 60px -22px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset,
             0 0 44px -12px rgba(33,188,238,.45);
  animation:hg-cardin .55s var(--ease) both;
}
@keyframes hg-cardin{
  from{opacity:0;transform:translateY(14px) scale(.97);}
  to  {opacity:1;transform:none;}
}
.hg-lobby__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:#8fe3ff;
  padding:5px 12px;border-radius:var(--r-pill,999px);
  background:rgba(33,188,238,.12);border:1px solid rgba(127,220,255,.3);
}
.hg-lobby__dot{
  position:relative;
  width:7px;height:7px;border-radius:50%;background:#39d0ff;flex:none;
}
/* GPU-composited pulse (transform/opacity) instead of an animated box-shadow,
   so it does not repaint every frame. */
.hg-lobby__dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(57,208,255,.5);
  animation:hg-livedot 1.6s ease-out infinite;will-change:transform,opacity;
}
@keyframes hg-livedot{
  0%{opacity:.5;transform:scale(1);}
  70%,100%{opacity:0;transform:scale(3.3);}
}
.hg-lobby__title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.8rem,1.1rem+3.1vw,3rem);line-height:1.06;color:#fff;margin:0;
  text-shadow:0 4px 30px rgba(5,11,31,.6);
}
.hg-lobby__sub{
  max-width:30ch;margin:0;font-size:clamp(.92rem,.82rem+.4vw,1.08rem);line-height:1.5;color:#cfdcef;
}
.hg-lobby__play{
  --py:15px;--px:34px;margin-top:6px;font-size:1.02rem;
  animation:hg-playpulse 2.2s var(--ease) infinite;
}
.hg-lobby__play.btn.gradient{background:linear-gradient(120deg,#1f7bff,#21BCEE);background-size:auto;background-origin:border-box;background-clip:border-box;}
.hg-lobby__play.btn.gradient:hover{background:linear-gradient(120deg,#3a8cff,#3fc8f5);background-origin:border-box;background-clip:border-box;}
.hg-lobby__play svg{width:20px;height:20px;}
.hg-lobby__note{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.04em;color:#8b94ab;}
@keyframes hg-playpulse{
  0%,100%{box-shadow:0 10px 30px -10px rgba(33,188,238,.5),0 0 0 0 rgba(33,188,238,.45);}
  60%    {box-shadow:0 10px 30px -10px rgba(33,188,238,.5),0 0 0 16px rgba(33,188,238,0);}
}

/* Perf: when JS marks the hero off-screen / tab hidden (.is-idle), pause every
   hero animation. The hero isn't visible then, so there is no visual impact. */
#heroGame.is-idle, #heroGame.is-idle *{animation-play-state:paused !important;}

/* ============================================================
   ALARM (arming / playing)
   ============================================================ */
.hg-alarm{
  position:absolute;top:7%;left:50%;
  transform:translateX(-50%) scale(.96);transform-origin:center;
  display:flex;align-items:center;gap:11px;
  padding:10px 18px;border-radius:var(--r-pill);
  background:rgba(20,8,8,.66);border:1px solid rgba(251,146,60,.5);
  opacity:0;pointer-events:none;
  transition:top .6s var(--ease),transform .6s var(--ease),opacity .45s var(--ease);
}
/* phase 1: sits at the top while the count starts climbing */
[data-state="arming"] .hg-alarm{opacity:1;transform:translateX(-50%) scale(1);}
/* phase 2: the SAME card glides to the centre, grows and beats */
[data-state="climb"] .hg-alarm{
  opacity:1;top:50%;
  transform:translateX(-50%) translateY(-50%) scale(1.42);
  animation:hg-pillbeat 1s var(--ease) .62s infinite;
}
@keyframes hg-pillbeat{
  0%,100%{transform:translateX(-50%) translateY(-50%) scale(1.42);}
  42%    {transform:translateX(-50%) translateY(-50%) scale(1.52);}
}
.hg-alarm__dot{width:9px;height:9px;border-radius:50%;background:#fb7a3c;flex:none;
  box-shadow:0 0 0 0 rgba(251,122,60,.6);animation:hg-pulse 1.1s var(--ease) infinite;}
@keyframes hg-pulse{0%{box-shadow:0 0 0 0 rgba(251,122,60,.6)}70%{box-shadow:0 0 0 10px rgba(251,122,60,0)}100%{box-shadow:0 0 0 0 rgba(251,122,60,0)}}
.hg-alarm__txt{display:flex;flex-direction:column;line-height:1.15;}
.hg-alarm__txt strong{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:#ffb37a;font-weight:700;}
.hg-alarm__txt span{font-size:.78rem;color:#e9d8c8;}
.hg-alarm__txt b{color:#fff;font-variant-numeric:tabular-nums;}

/* ============================================================
   TERMINAL (playing) — opens like a window (pops from small)
   ============================================================ */
.hg-term{
  position:absolute;left:50%;top:50%;
  width:min(86%,420px);
  transform:translate(-50%,-50%) scale(.42);
  transform-origin:center;
  border-radius:var(--r-md);
  background:linear-gradient(160deg,rgba(8,16,34,.96),rgba(5,11,31,.98));
  border:1px solid rgba(33,188,238,.28);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.8),0 0 0 1px rgba(33,188,238,.08) inset;
  overflow:hidden;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .5s var(--ease);
}
[data-state="playing"] .hg-term{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}

.hg-term__bar{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.08);}
.hg-term__dot{width:10px;height:10px;border-radius:50%;flex:none;}
.hg-term__dot.r{background:#ff5f57}.hg-term__dot.y{background:#febc2e}.hg-term__dot.g{background:#28c840}
.hg-term__title{font-family:var(--font-mono);font-size:.72rem;color:#8b94ab;margin-left:6px;}
.hg-term__warn{margin-left:auto;font-family:var(--font-mono);font-size:.74rem;font-weight:700;color:#ffb37a;
  font-variant-numeric:tabular-nums;letter-spacing:.05em;transition:color .2s var(--ease);}

/* Warning beat in the final seconds before the peak hits */
.hg-term.is-warn{animation:hg-termbeat .85s var(--ease) infinite;}
.hg-term.is-warn .hg-term__warn{color:#ff5f57;}
@keyframes hg-termbeat{
  0%,100%{ transform:translate(-50%,-50%) scale(1);
           box-shadow:0 24px 60px -24px rgba(0,0,0,.8),0 0 0 1px rgba(33,188,238,.1) inset; border-color:rgba(33,188,238,.28); }
  50%    { transform:translate(-50%,-50%) scale(1.018);
           box-shadow:0 24px 60px -24px rgba(0,0,0,.8),0 0 0 3px rgba(255,95,87,.55); border-color:rgba(255,95,87,.7); }
}

.hg-term__body{padding:16px 16px 14px;font-family:var(--font-mono);font-size:.82rem;line-height:1.7;}
.hg-term__muted{color:#6f7b95;}
.hg-term__cmd{margin:4px 0 0;color:#eaf0fb;white-space:nowrap;}
.hg-term__prompt{color:#21BCEE;margin-right:8px;}
.hg-term__flag{color:#ffb37a;}
.hg-term__cursor{display:inline-block;width:8px;height:1.05em;vertical-align:-2px;margin-left:3px;
  background:#21BCEE;animation:hg-blink 1s steps(2,start) infinite;}
@keyframes hg-blink{50%{opacity:0}}

.hg-term__run{display:flex;align-items:center;gap:12px;margin-top:14px;
  opacity:0;transform:translateY(5px);transition:opacity .4s var(--ease),transform .4s var(--ease);}
.hg-term__run.in{opacity:1;transform:none;}
.hg-run{--py:9px;--px:18px;}
/* Brighter blue→cyan fill so the button has no dark navy edge on the left */
.hg-run.btn.gradient{background:linear-gradient(120deg,#1f7bff,#21BCEE);background-size:auto;background-origin:border-box;background-clip:border-box;}
.hg-run.btn.gradient:hover{background:linear-gradient(120deg,#3a8cff,#3fc8f5);background-origin:border-box;background-clip:border-box;}
.hg-term__hint{font-family:var(--font-mono);font-size:.72rem;color:#8b94ab;}
.hg-term__hint kbd{font-family:var(--font-mono);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:5px;padding:1px 6px;color:#cfd8ea;font-size:.7rem;}
@media (hover:none){.hg-term__hint{display:none;}}  /* touch: rely on the button */

/* Quick check lines (shown briefly on win) */
.hg-term__checks{margin-top:10px;font-family:var(--font-mono);font-size:.76rem;color:#9fb0cc;display:none;}
.hg-term__checks .ln{opacity:0;transition:opacity .2s var(--ease);}
.hg-term__checks .ln.in{opacity:1;}
.hg-term__checks .ok{color:#28c840;margin-right:7px;}
.hg-term__checks .dim{color:#6f7b95;margin-right:7px;}

/* Countdown bar — inset + rounded so it never bleeds onto the terminal's
   rounded corners (no stray coloured line at the edges) */
.hg-timer{position:absolute;left:12px;right:12px;bottom:9px;height:4px;border-radius:99px;
  overflow:hidden;background:rgba(255,255,255,.09);}
.hg-timer__fill{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,#28c840,#febc2e 60%,#ff5f57);transform-origin:left;}

/* ============================================================
   WIN
   ============================================================ */
.hg-win{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:20px;
  padding:clamp(20px,5%,40px);
  background:radial-gradient(80% 60% at 50% 30%,rgba(33,188,238,.10),transparent 70%);
  /* Reveal with transform + visibility only (no opacity fade), so the frosted
     cards appear at full opacity from the first frame — no transparent flash. */
  visibility:hidden;pointer-events:none;transform:scale(.985) translateY(8px);
  transition:transform .5s var(--ease),visibility 0s linear .5s;
}
[data-state="win"] .hg-win{
  visibility:visible;pointer-events:auto;transform:scale(1) translateY(0);
  transition:transform .55s var(--ease);
}
.hg-win__head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.hg-win__head strong{font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,1rem+1vw,1.6rem);color:#fff;}

/* Capacity bar: CDN base + Quanteec peer layer stacked = peak absorbed */
.hg-cap{display:flex;flex-direction:column;gap:9px;}
.hg-cap__row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.hg-cap__lbl{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#9fb0cc;}
.hg-cap__tag{font-family:var(--font-mono);font-size:.68rem;font-weight:700;color:#21BCEE;white-space:nowrap;}
.hg-cap__bar{display:flex;height:34px;border-radius:10px;overflow:hidden;
  background:rgba(10,18,38,.4);border:1px solid rgba(255,255,255,.1);}
.hg-cap__seg{display:flex;align-items:center;justify-content:center;height:100%;width:var(--w);overflow:hidden;
  white-space:nowrap;transform:scaleX(0);transform-origin:left;transition:transform .95s var(--ease) .2s;}
.hg-cap__seg b{font-family:var(--font-mono);font-size:.64rem;font-weight:700;letter-spacing:.05em;}
.hg-cap__cdn{background:rgba(255,255,255,.14);color:#cfd8ea;}
.hg-cap__qtc{background:linear-gradient(90deg,#116BF8,#21BCEE);color:#04122a;}
[data-state="win"] .hg-cap__seg{transform:scaleX(1);}
.hg-cap__note{margin:0;font-size:.76rem;color:#aab6cc;line-height:1.45;}
/* keep loose win text legible where the persistent blue curve crosses it */
.hg-win__head strong,.hg-cap__note,.hg-cap__lbl{text-shadow:0 1px 8px rgba(5,11,31,.5);}

/* Dashboard-style metric tiles */
.hg-stats{display:grid;grid-template-columns:1fr 1.25fr;gap:10px;align-items:stretch;}
.hg-stat{display:flex;flex-direction:column;gap:5px;justify-content:center;padding:13px 15px;border-radius:var(--r-md);
  background:rgba(10,18,38,.42);border:1px solid rgba(255,255,255,.12);}
.hg-stat.hi{background:rgba(33,188,238,.16);border-color:rgba(33,188,238,.46);}
.hg-stat__v{font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,1rem+1.4vw,2rem);line-height:1;color:#fff;}
.hg-stat.hi .hg-stat__v{color:#21BCEE;}
.hg-stat__v span{font-size:.5em;font-weight:700;margin-left:1px;}
.hg-stat__l{font-size:.66rem;color:#aab6cc;line-height:1.3;}

/* Rebuffering comparison (P2P vs CDN), dashboard-style */
.hg-rb{display:flex;align-items:flex-end;gap:12px;margin-top:3px;}
.hg-rb__q,.hg-rb__c{display:flex;flex-direction:column;line-height:1;}
.hg-rb__q b,.hg-rb__c b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.15rem,.9rem+1vw,1.6rem);}
.hg-rb__q b{color:#21BCEE;}
.hg-rb__c b{color:#ff9a52;}
.hg-rb__q i,.hg-rb__c i{font-style:normal;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;color:#8b94ab;margin-top:4px;}
.hg-rb__sep{align-self:center;font-family:var(--font-mono);font-size:.66rem;color:#6f7b95;}

/* ============================================================
   LOSE
   ============================================================ */
.hg-buffer{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);
  font-size:.74rem;color:#cfd8ea;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);}
[data-state="lose"] .hg-buffer{opacity:1;}
.hg-spinner{width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;animation:hg-spin .8s linear infinite;}
@keyframes hg-spin{to{transform:rotate(360deg)}}

/* degrade the footage when the peak wins */
[data-state="lose"] .hg-video{filter:blur(3px) contrast(.8) saturate(.6) brightness(.7);transform:scale(1.04);}
[data-state="lose"] .hg-scrim{background:linear-gradient(to bottom,rgba(30,6,6,.5),rgba(5,11,31,.9));}

.hg-lose{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);}
[data-state="lose"] .hg-lose{opacity:1;pointer-events:auto;}
.hg-cost-curve{position:absolute;inset:0;width:100%;height:100%;}
.hg-cost-area{fill:rgba(255,95,87,.16);}
.hg-cost-line{fill:none;stroke:#ff5f57;stroke-width:3;stroke-linecap:round;
  stroke-dasharray:340;stroke-dashoffset:340;}
[data-state="lose"] .hg-cost-line{animation:hg-draw 1s var(--ease) forwards;}
@keyframes hg-draw{to{stroke-dashoffset:0}}
.hg-lose__card{position:relative;margin:clamp(18px,5%,34px);padding:18px 20px;border-radius:var(--r-md);
  background:rgba(20,8,8,.7);border:1px solid rgba(255,95,87,.4);
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.hg-lose__card strong{font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,.9rem+1vw,1.5rem);color:#fff;}
.hg-lose__sub{font-size:.78rem;color:#e9c8c8;}

/* ============================================================
   SHARED: badges + replay
   ============================================================ */
.hg-badge{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;padding:5px 12px;border-radius:var(--r-pill);}
.hg-badge.ok{color:#0a1330;background:#21BCEE;}
.hg-badge.bad{color:#fff;background:#ff5f57;}

.hg-replay{align-self:center;margin-top:4px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--font-body);font-size:.82rem;font-weight:600;color:#cfd8ea;
  background:rgba(10,18,38,.45);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);
  min-height:44px;padding:8px 18px;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);}
.hg-lose__card .hg-replay{align-self:flex-start;margin-top:4px;}
.hg-replay:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3);}
.hg-replay:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);}

/* ============================================================
   PERF: frosted layers only blur while their state is on screen
   ------------------------------------------------------------
   The win / lose / alarm panels stay in the DOM at rest (hidden via
   opacity / visibility, not display:none). A live backdrop-filter on a
   hidden element still forces the compositor (macOS WindowServer) to
   re-sample the looping hero video every frame. Scoping each blur to its
   active [data-state] means the resting hero carries ZERO backdrop-filters,
   with no visible change — the blur is back the instant the state shows.
   ============================================================ */
[data-state="arming"] .hg-alarm,
[data-state="climb"]  .hg-alarm{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
[data-state="win"] .hg-cap__bar,
[data-state="win"] .hg-stat{backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);}
[data-state="lose"] .hg-lose__card{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
[data-state="win"]  .hg-replay,
[data-state="lose"] .hg-replay{backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hg-root{aspect-ratio:4/3;}
}
@media (max-width:560px){
  .hg-root{aspect-ratio:3/4;}
  .hg-term{width:min(92%,360px);}
  .hg-cap__bar{height:30px;}
  .hg-stats{gap:8px;}
}

/* ============================================================
   REDUCED MOTION — no auto-lose drama, no glitch.
   Terminal stays open, Deploy → win. Calm.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hg-root *,
  .hg-root *::before,
  .hg-root *::after{animation:none !important;transition:none !important;}
  .hg-alarm__dot{animation:none;}
  .hg-term__cursor{animation:none;}
  .hg-spinner{animation:none;}
  .hg-video{transition:none;}
  [data-state="lose"] .hg-cost-line{animation:none;stroke-dashoffset:0;}
  .hg-bar i{transition:none;}
  .hg-timer{display:none;}
  [data-state="climb"] .hg-alarm{animation:none;}
  .hg-term.is-warn{animation:none;}
  .hg-term__cursor{animation:none;}
  .hg-lobby__play{animation:none;}
  .hg-lobby__card{animation:none;}
  .hg-lobby__dot{animation:none;}
  /* curve add-on: show fully drawn while climbing; persists (all-blue) on win */
  [data-state="arming"] .hg-curve,
  [data-state="climb"] .hg-curve,
  [data-state="playing"] .hg-curve{opacity:1;}
  .hg-root.hg-deployed .hg-curve{opacity:1;}
  .hg-root.hg-deployed .hg-curve__grid{opacity:0;}
  .hg-curve__line,.hg-curve__glow{stroke-dashoffset:0 !important;}
}

/* ============================================================
   BEGIN: metrics-board rising curve (add-on, z2)
   Surgical. To roll back: delete this whole block AND the matching
   "metrics-board rising curve" markup in index.html.
   - Sits over the video (z1 scrim) and behind the counter/terminal (z3).
   - The thin bright line draws upward while the audience climbs,
     blue at the bottom shifting to orange by mid-height (gradient).
   ============================================================ */
.hg-curve{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease);
}
.hg-curve svg{width:100%;height:100%;display:block;}
.hg-curve__grid line{stroke:rgba(234,240,251,.07);stroke-width:1;}
.hg-curve__glow{
  fill:none;stroke:url(#hgCurveGrad);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;
  opacity:.5;filter:blur(5px);
  stroke-dasharray:100;stroke-dashoffset:100;
}
.hg-curve__line{
  fill:none;stroke:url(#hgCurveGrad);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;
}

/* visible + drawing while the audience climbs and through the deploy window */
[data-state="arming"] .hg-curve,
[data-state="climb"]  .hg-curve,
[data-state="playing"] .hg-curve{opacity:1;}

[data-state="arming"] .hg-curve__line,
[data-state="climb"]  .hg-curve__line,
[data-state="playing"] .hg-curve__line,
[data-state="arming"] .hg-curve__glow,
[data-state="climb"]  .hg-curve__glow,
[data-state="playing"] .hg-curve__glow{
  animation:hg-curve-draw 4200ms cubic-bezier(.65,0,.35,1) forwards;
}

/* WIN path — from the moment Deploy is pressed (js adds .hg-deployed):
   the curve slowly morphs from blue+orange to ALL-blue and PERSISTS (it
   does not fade out). The horizontal reference grid is dropped, and the
   footage is blurred so the win data reads clearly over the blue peak. */

/* slow gradient morph: orange stops glide to blue over ~1.7s */
.hg-grad-mid{stop-color:#fb7a3c;transition:stop-color 1.7s var(--ease);}
.hg-grad-top{stop-color:#ffae5c;transition:stop-color 1.7s var(--ease);}
.hg-root.hg-deployed .hg-grad-mid{stop-color:#21BCEE;}
.hg-root.hg-deployed .hg-grad-top{stop-color:#116BF8;}

/* keep the curve drawn and visible; drop the reference grid */
.hg-root.hg-deployed .hg-curve{opacity:1;}
.hg-root.hg-deployed .hg-curve__grid{opacity:0;transition:opacity .9s var(--ease);}
.hg-root.hg-deployed .hg-curve__line,
.hg-root.hg-deployed .hg-curve__glow{
  animation:none !important;stroke-dashoffset:0 !important;
}
/* lift the line a touch so the persistent peak stays crisp over the blur */
.hg-root.hg-deployed .hg-curve__line{stroke-width:2.8;}
.hg-root.hg-deployed .hg-curve__glow{opacity:.6;}

/* blur the footage between video (z0) and curve (z2) so the data reads */
.hg-root.hg-deployed .hg-video{
  filter:blur(5px) brightness(.6) saturate(.95);transform:scale(1.05);
  transition:filter .9s var(--ease),transform .9s var(--ease);
}
.hg-root.hg-deployed .hg-scrim{
  background:linear-gradient(to bottom,rgba(5,11,31,.5),rgba(5,11,31,.72));
}

/* LOSE path — the curve snaps to the lose red (#ff5f57), holds briefly so it
   reads as one line, then fades while the red cost line draws as its
   continuation. */
[data-state="lose"] .hg-curve{animation:hg-curve-redfade 1.15s var(--ease) forwards;}
[data-state="lose"] .hg-curve__line,
[data-state="lose"] .hg-curve__glow{
  animation:none !important;stroke:#ff5f57 !important;stroke-dashoffset:0 !important;
}
@keyframes hg-curve-redfade{0%{opacity:1;}45%{opacity:1;}100%{opacity:0;}}

@keyframes hg-curve-draw{to{stroke-dashoffset:0;}}
/* ===== END: metrics-board rising curve ===== */