/* Vypínač · hero pás na hube: pod nadpisom tenká EKG čiara ako oddeľovač, mini silueta dostáva zásahy (názvy drog), čiara sa trasie a zastaví.
   Modul: assets/hero-fall.js vloží .hero-stage priamo pod nadpis (.hero-grid). */
/* tenký pás hneď pod nadpisom: [mini postavička] [EKG čiara ako oddeľovač ... stav vpravo], pod ním jednoriadkový popis */
/* pás sedí v rovnakej .wrap ako karty, takže má presne ich šírku */
/* overflow-x: clip: nábeh VYPNUTÉ (scale 1.5) ani výbuchy pri okraji nesmú rozšíriť stránku do strán; zvislo ostáva voľné */
.hs-wrap { padding-top: 26px; overflow-x: clip; }
.hs-wrap:empty { display: none; }

.hero-grid > .hero-stage { overflow-x: clip; }
.hero-stage { --row: 104px; position: relative; margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: var(--row) auto; gap: 6px 12px; isolation: isolate; container-type: inline-size; animation: rise .7s var(--out) .26s backwards; }
.hero-stage.jolt { animation: hsJolt .45s steps(1); }
/* vstupná animácia (rise) beží len raz: keď sa po poslednom zásahu odoberie .jolt, prehliadač by ju spustil odznova
   a celý pás by zhasol a znova sa vysunul (to bol ten „fade“ pri VYPNUTÉ) */
.hero-stage.hooked:not(.jolt) { animation: none; }
@keyframes hsJolt { 0% { transform: translate(-3px, 1px); } 25% { transform: translate(4px, -1px); } 50% { transform: translate(-2px, 0); } 75% { transform: translate(1px, 1px); } 100% { transform: none; } }

/* ---------- telo ---------- */
.hs-body { grid-area: 1 / 1; position: relative; z-index: 3; min-height: 0; height: 100%; padding: 6px 0 4px; display: grid; align-items: center; }
.hs-body svg { height: 100%; width: auto; overflow: visible; display: block; }
.hsb-fig { transform-box: view-box; transform-origin: 150px 590px; animation: hsBreathe 4.2s ease-in-out infinite; }
@keyframes hsBreathe { 50% { transform: scale(1.012, 1.006); } }
.hsb-edge { fill: none; stroke: var(--line); stroke-width: 6; stroke-linejoin: round; }
.hsb-part { fill: url(#hsBodyFill); }
.hsb-dots { opacity: .13; }
.hsb-flow { fill: none; stroke: var(--own); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 7 93; opacity: .7; animation: silFlow 7s linear infinite; filter: drop-shadow(0 0 3px var(--own)); }
.hsb-flow.b { animation-delay: -3.5s; }
.hsb-heart { fill: var(--exo); opacity: .95; transform: scale(1.6); transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 6px var(--exo)); }
.hsb-heart.beat { animation: hsBeat .42s var(--out); }
@keyframes hsBeat { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 100% { transform: scale(1); } }
.hsb-pad { display: none; }
/* každý zásah: zlý TV signál. Silueta sa trhne a na okamih zdvojí/strojí (červený + modrý „duch“ odskočia do strán).
   --g (0–1, nastavuje JS) rastie s každým zásahom: trvalé zdvojenie je čoraz širšie a flikruje. */
.hs-body.hit .hsb-fig { animation: hsHit .5s steps(1); }
@keyframes hsHit { 0% { transform: translate(-4px, 0); } 15% { transform: translate(5px, 1px) skewX(-4deg); } 30% { transform: translate(-3px, 0); } 45% { transform: translate(2px, 0) skewX(3deg); } 60% { transform: translate(-1px, 0); } 100% { transform: none; } }
.hs-body.hit .hsb-ghost.a { animation: hsTvA .55s steps(1); }
.hs-body.hit .hsb-ghost.b { animation: hsTvB .55s steps(1); }
@keyframes hsTvA { 0% { opacity: .7; transform: translate(calc(14px + var(--g, 0) * 14px), 0); clip-path: inset(0 0 40% 0); } 20% { transform: translate(calc(-10px - var(--g, 0) * 10px), 2px); clip-path: inset(30% 0 0 0); } 40% { opacity: .55; transform: translate(calc(16px + var(--g, 0) * 12px), 0); clip-path: none; } 60% { opacity: .5; transform: translate(-8px, 0); clip-path: inset(55% 0 0 0); } 80% { opacity: .4; transform: translate(6px, 0); clip-path: none; } 100% { opacity: 0; } }
@keyframes hsTvB { 0% { opacity: .6; transform: translate(calc(-14px - var(--g, 0) * 14px), 0); clip-path: inset(35% 0 0 0); } 20% { transform: translate(calc(12px + var(--g, 0) * 10px), -2px); clip-path: inset(0 0 45% 0); } 40% { opacity: .5; transform: translate(calc(-18px - var(--g, 0) * 12px), 0); clip-path: none; } 60% { opacity: .45; transform: translate(9px, 0); clip-path: inset(0 0 50% 0); } 80% { opacity: .35; transform: translate(-6px, 0); clip-path: none; } 100% { opacity: 0; } }
/* medzi zásahmi: trvalé zdvojenie, čím viac zásahov, tým širšie a nervóznejšie */
.hs-body.tv .hsb-ghost.a { opacity: calc(var(--g, 0) * .45); transform: translate(calc(var(--g, 0) * 12px), 0); animation: hsTvIdleA 1.1s steps(1) infinite; }
.hs-body.tv .hsb-ghost.b { opacity: calc(var(--g, 0) * .4); transform: translate(calc(var(--g, 0) * -12px), 0); animation: hsTvIdleB 1.3s steps(1) infinite; }
@keyframes hsTvIdleA { 0% { transform: translate(calc(var(--g, 0) * 12px), 0); } 37% { transform: translate(calc(var(--g, 0) * 7px), 1px); } 52% { transform: translate(calc(var(--g, 0) * 15px), 0); } 78% { transform: translate(calc(var(--g, 0) * 9px), -1px); } }
@keyframes hsTvIdleB { 0% { transform: translate(calc(var(--g, 0) * -12px), 0); } 29% { transform: translate(calc(var(--g, 0) * -16px), 0); } 61% { transform: translate(calc(var(--g, 0) * -6px), 1px); } 84% { transform: translate(calc(var(--g, 0) * -11px), 0); } }
.hs-body.tv .hsb-fig { animation: hsTvJitter 1.7s steps(1) infinite; }
@keyframes hsTvJitter { 0%, 100% { transform: none; } 23% { transform: translate(calc(var(--g, 0) * 2px), 0); } 24% { transform: none; } 67% { transform: translate(calc(var(--g, 0) * -3px), 1px); } 69% { transform: none; } }
/* vypnutie: telo nepadá, ale „zhasne“: glitch (rezy + farební duchovia), potom tmavá silueta s červeným obrysom */
.hs-body.down .hsb-fig { animation: hsGlitch 1.4s steps(1) forwards; }
@keyframes hsGlitch {
  0% { transform: translate(0, 0); clip-path: none; }
  8% { transform: translate(-6px, 0) skewX(-6deg); clip-path: inset(18% 0 55% 0); }
  14% { transform: translate(5px, 2px); clip-path: none; }
  22% { transform: translate(-3px, 0) skewX(4deg); clip-path: inset(60% 0 10% 0); }
  28% { transform: translate(0, 0); clip-path: none; }
  40% { transform: translate(7px, -2px) skewX(-8deg); clip-path: inset(5% 0 70% 0); }
  46% { transform: translate(-4px, 0); clip-path: none; }
  58% { transform: translate(2px, 0) scaleY(.97); clip-path: inset(40% 0 30% 0); }
  64% { transform: translate(0, 0); clip-path: none; }
  78% { transform: translate(-8px, 1px) skewX(6deg); clip-path: inset(0 0 0 0); }
  84% { transform: translate(3px, 0) scale(1, .99); }
  100% { transform: translate(0, 0); clip-path: none; }
}
.hsb-ghost { fill: var(--exo); opacity: 0; pointer-events: none; }
.hsb-ghost.b { fill: var(--gnrh); }
.hs-body.down .hsb-ghost.a { animation: hsGhostA 1.4s steps(1) forwards; }
.hs-body.down .hsb-ghost.b { animation: hsGhostB 1.4s steps(1) forwards; }
@keyframes hsGhostA { 0% { opacity: 0; } 8% { opacity: .55; transform: translate(10px, 0); clip-path: inset(18% 0 55% 0); } 14% { opacity: 0; } 40% { opacity: .5; transform: translate(-12px, 0); clip-path: inset(5% 0 70% 0); } 46% { opacity: 0; } 78% { opacity: .5; transform: translate(14px, 0); clip-path: inset(30% 0 20% 0); } 84%, 100% { opacity: 0; } }
@keyframes hsGhostB { 0% { opacity: 0; } 22% { opacity: .5; transform: translate(-10px, 0); clip-path: inset(60% 0 10% 0); } 28% { opacity: 0; } 58% { opacity: .5; transform: translate(9px, 0); clip-path: inset(40% 0 30% 0); } 64% { opacity: 0; } 78% { opacity: .45; transform: translate(-14px, 0); clip-path: inset(0 0 60% 0); } 84%, 100% { opacity: 0; } }
.hs-body.down .hsb-flow, .hs-body.down .hsb-dots { animation: none; opacity: 0; transition: opacity .6s; }
.hs-body.down .hsb-heart { animation: hsHeartDie 1.4s steps(1) forwards; }
@keyframes hsHeartDie { 0%, 30% { opacity: .85; } 35% { opacity: .2; } 45% { opacity: .85; } 50% { opacity: .15; } 70% { opacity: .6; } 100% { opacity: .15; filter: none; } }
.hs-body.down .hsb-pad { opacity: 0; transition: opacity .6s; }
/* po zástave: hlavná silueta zhasne, ostanú len zdvojené farebné kópie, ktoré šumia (zrno vo svojej farbe) a flikrujú */
.hsb-ghost.c { fill: var(--lh); }
.hs-body.down .hsb-ghost { filter: url(#hsGrain); }
.hs-body.dead .hsb-fig { animation: none; transform: none; }
.hs-body.dead .hsb-part { fill: var(--bg); transition: fill .5s; }
.hs-body.dead .hsb-edge { opacity: .25; transition: opacity .5s; }
.hs-body.dead .hsb-heart { opacity: 0; filter: none; }
.hs-body.dead .hsb-ghost { filter: url(#hsGrain); --g: 1; }
.hs-body.dead .hsb-ghost.a { opacity: .85; animation: hsDeadA 1.3s steps(1) infinite; }
.hs-body.dead .hsb-ghost.b { opacity: .8; animation: hsDeadB 1.7s steps(1) infinite; }
.hs-body.dead .hsb-ghost.c { opacity: .55; animation: hsDeadC 2.1s steps(1) infinite; }
@keyframes hsDeadA { 0% { transform: translate(14px, 0); } 19% { transform: translate(9px, 2px); clip-path: inset(0 0 30% 0); } 31% { transform: translate(18px, 0); clip-path: none; } 58% { transform: translate(11px, -1px); } 77% { transform: translate(22px, 0); clip-path: inset(40% 0 0 0); } 85% { transform: translate(13px, 0); clip-path: none; } }
@keyframes hsDeadB { 0% { transform: translate(-14px, 0); } 23% { transform: translate(-20px, 0); clip-path: inset(50% 0 0 0); } 37% { transform: translate(-9px, 1px); clip-path: none; } 61% { transform: translate(-16px, 0); } 72% { transform: translate(-24px, -2px); clip-path: inset(0 0 55% 0); } 81% { transform: translate(-12px, 0); clip-path: none; } }
@keyframes hsDeadC { 0% { transform: translate(0, 3px); opacity: .55; } 29% { transform: translate(4px, 0); opacity: .2; } 47% { transform: translate(-5px, 4px); opacity: .6; } 68% { transform: translate(2px, -2px); opacity: .3; } 90% { transform: translate(-3px, 2px); opacity: .55; } }
.hero-stage.reset .hsb-ghost { opacity: 0 !important; animation: none !important; transition: opacity .9s; }
.hero-stage.reset .hs-body .hsb-fig { animation: hsBreathe 4.2s ease-in-out infinite; transform: none; }
.hero-stage.reset .hsb-part, .hero-stage.reset .hsb-edge { transition: fill .9s, stroke .9s, opacity .9s; }

/* ---------- čiara (EKG) + stav ---------- */
.hs-mon { grid-area: 1 / 2; position: relative; z-index: 2; min-width: 0; min-height: 0; }
.hs-ecg { position: absolute; inset: 0; }
.hs-ecg::before { content: ""; position: absolute; left: 0; right: 0; top: 60%; height: 1px; background: linear-gradient(90deg, var(--line) 70%, transparent); opacity: .7; }
.hs-ecg canvas { display: block; width: 100%; height: 100%; }
/* čiara sa zdvojuje ako postava: drop-shadow kopíruje kresbu canvasu, červená doprava, modrá doľava; --g rastie so zásahmi */
/* trvalé zdvojenie kreslí canvas (červená a modrá kópia krivky); tu už len občasné myknutie celej čiary */
.hero-stage.ghost .hs-ecg canvas { animation: hsLineTv 1.2s steps(1) infinite; }
@keyframes hsLineTv { 0%, 100% { transform: none; } 31% { transform: translateX(calc(var(--g, 0) * 3px)); } 33% { transform: none; } 62% { transform: translate(calc(var(--g, 0) * -4px), 1px); } 65% { transform: none; } 86% { transform: translateX(calc(var(--g, 0) * 2px)); } 88% { transform: none; } }
/* pri zásahu: trojité rozštiepenie na zlomok sekundy */
.hero-stage.jolt .hs-ecg canvas { animation: hsLineHit .45s steps(1); }
@keyframes hsLineHit {
  0% { filter: drop-shadow(16px 0 0 color-mix(in srgb, var(--exo) 80%, transparent)) drop-shadow(-14px 0 0 color-mix(in srgb, var(--gnrh) 80%, transparent)) drop-shadow(0 4px 0 color-mix(in srgb, var(--lh) 60%, transparent)); transform: translateX(-3px); clip-path: inset(0 0 40% 0); }
  25% { filter: drop-shadow(-12px 0 0 color-mix(in srgb, var(--exo) 80%, transparent)) drop-shadow(18px 0 0 color-mix(in srgb, var(--gnrh) 80%, transparent)); transform: translateX(4px); clip-path: inset(35% 0 0 0); }
  50% { filter: drop-shadow(10px 0 0 color-mix(in srgb, var(--exo) 70%, transparent)) drop-shadow(-10px 0 0 color-mix(in srgb, var(--gnrh) 70%, transparent)) drop-shadow(0 -3px 0 color-mix(in srgb, var(--lh) 50%, transparent)); transform: none; clip-path: none; }
  75% { filter: drop-shadow(6px 0 0 color-mix(in srgb, var(--exo) 60%, transparent)) drop-shadow(-6px 0 0 color-mix(in srgb, var(--gnrh) 60%, transparent)); transform: translateX(-1px); }
  100% { transform: none; }
}

/* spodný riadok: popis vľavo, stav vpravo; pri nedostatku miesta sa zalomí, nič sa neprekrýva */
.hs-foot { grid-area: 2 / 1 / 3 / 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; min-width: 0; }
.hs-top { flex: none; margin-left: auto; display: flex; align-items: center; gap: 10px; font: 600 .66rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hs-st { color: var(--own); transition: color .3s; }
.hs-st::before { content: "●"; margin-right: 5px; animation: hsBlink 1.4s steps(2) infinite; }
.hs-top.warn .hs-st { color: var(--lh-ink); }
.hs-top.off .hs-st { color: var(--exo-ink); }
.hs-top.off .hs-st::before { animation: none; }
.hs-bpm { font-variant-numeric: tabular-nums; }
.hs-bpm b { font: 800 1rem/1 var(--font-display); color: var(--fg); margin-right: 3px; transition: color .3s; }
.hs-top.warn .hs-bpm b { color: var(--lh); }
.hs-top.off .hs-bpm b { color: var(--exo); }
.hs-warn { padding: 3px 6px; border-radius: 5px; border: 1px solid var(--lh); color: var(--lh); background: var(--lh-soft); opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; }
.hs-top.warn .hs-warn { opacity: 1; transform: none; animation: hsBlink 1s steps(2) infinite; }
.hs-top.off .hs-warn { color: var(--exo-ink); border-color: var(--exo); background: var(--exo-soft); animation: none; }
@keyframes hsBlink { 50% { opacity: .35; } }
.hs-cap { flex: 1 1 220px; min-width: 0; margin: 0; font: 500 .74rem/1.35 var(--font-mono); letter-spacing: .04em; color: var(--muted); transition: color .4s, opacity .35s; }
/* pri zástave popis potichu zmizne, finálny text potom nabehne (hsFinal), nič nebliká naraz */
.hs-cap.out { opacity: 0; }
.hero-stage.off .hs-cap { color: var(--exo-ink); animation: hsFinal .8s var(--out) 1s backwards; }
@keyframes hsFinal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- „VYPNUTÉ“ ---------- */
.hs-off { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: var(--row); display: grid; place-items: center; pointer-events: none; opacity: 0; }
/* podklad nápisu má mäkké okraje: rovná EKG čiara pod nápisom plynulo stmavne, nikdy nie je odseknutá */
.hs-off b { position: relative; padding: 0 34px; background: linear-gradient(90deg, transparent, var(--bg) 26px, var(--bg) calc(100% - 26px), transparent); font: 900 clamp(2.2rem, 6.4vw, 4.2rem)/.9 var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--exo); text-shadow: 0 0 24px var(--exo-soft), 0 0 2px var(--exo); animation: hsOffFlicker 2.3s steps(1) infinite; }
/* nápis šumí ako postava: červená a modrá kópia so zrnom, posunuté a strihané na pásy */
.hs-off b::before, .hs-off b::after { content: attr(data-t); position: absolute; inset: 0; padding: inherit; text-shadow: none; filter: url(#hsGrainStill); pointer-events: none; }
.hs-off b::before { color: var(--exo); animation: hsOffA 1.3s steps(1) infinite; }
.hs-off b::after { color: var(--gnrh); animation: hsOffB 1.7s steps(1) infinite; }
@keyframes hsOffA { 0% { transform: translate(6px, 0); clip-path: inset(0 0 45% 0); opacity: .9; } 19% { transform: translate(3px, 1px); clip-path: none; } 31% { transform: translate(9px, 0); clip-path: inset(30% 0 20% 0); } 58% { transform: translate(4px, -1px); clip-path: none; opacity: .6; } 77% { transform: translate(12px, 0); clip-path: inset(55% 0 0 0); opacity: .9; } 85% { transform: translate(5px, 0); clip-path: none; } }
@keyframes hsOffB { 0% { transform: translate(-6px, 0); clip-path: inset(50% 0 0 0); opacity: .85; } 23% { transform: translate(-10px, 0); clip-path: none; } 37% { transform: translate(-3px, 1px); clip-path: inset(0 0 60% 0); } 61% { transform: translate(-8px, 0); clip-path: none; opacity: .55; } 72% { transform: translate(-13px, -1px); clip-path: inset(25% 0 35% 0); opacity: .85; } 81% { transform: translate(-5px, 0); clip-path: none; } }
/* blikanie jasom, nie priehľadnosťou: podklad ostáva, čiara pod nápisom neprebleskuje */
@keyframes hsOffFlicker { 0%, 100% { filter: none; } 41% { filter: brightness(.8); } 43% { filter: none; } 67% { filter: brightness(.62); } 69% { filter: none; } 88% { filter: brightness(.88); } 90% { filter: none; } }
.hero-stage.off .hs-off { opacity: 1; }

/* ---------- kolaps → VYPNUTÉ: JEDNA súvislá choreografia ----------
   Trieda .dying sa pridá vo fall() a už sa neodoberá, takže nič sa pri off() nereštartuje.
   2,4 s = kolaps 1,5 s (0–62,5 %) + zástava 0,45 s (→ 81,25 % = off()) + doznenie.
   Nápis sa plynule zhmotní zo šumu (rozmazaný, roztiahnutý → ostrý) a dosadne presne v okamihu vypnutia;
   poplach a štítok LIVE blikajú v tom istom rytme (0,4 s), slabnú a poslednou vlnou prejdú do OFFLINE. */
.hero-stage.dying .hs-off { animation: hsDie 2.4s forwards; }
@keyframes hsDie {
  0% { opacity: 0; transform: scale(1.22, .55); filter: blur(12px); animation-timing-function: cubic-bezier(.55, 0, .35, 1); }
  81.25%, 100% { opacity: 1; transform: none; filter: blur(0); }
}
.hero-stage.hero-stage.dying .hs-strobe { --sc: var(--exo); animation: hsDieStrobe 2.4s steps(1) forwards; }
@keyframes hsDieStrobe {
  0% { opacity: .3; } 8.33% { opacity: 0; } 16.67% { opacity: .27; } 25% { opacity: 0; } 33.33% { opacity: .23; } 41.67% { opacity: 0; }
  50% { opacity: .18; } 58.33% { opacity: 0; } 66.67% { opacity: .12; } 75% { opacity: 0; }
  81.25% { opacity: .22; animation-timing-function: ease-out; } 100% { opacity: 0; }
}
.hero-stage.hero-stage.dying .hs-live { animation: hsLiveDie 2.4s steps(1) forwards; }
@keyframes hsLiveDie {
  0%, 16.67%, 33.33%, 50%, 66.67% { opacity: 1; }
  8.33%, 25%, 41.67%, 58.33% { opacity: .35; }
  75% { opacity: .35; animation-timing-function: ease-in; }
  81.25% { opacity: 0; background-color: transparent; color: var(--muted); border-color: var(--line); animation-timing-function: ease-out; }
  100% { opacity: 1; background-color: transparent; color: var(--muted); border-color: var(--line); }
}
.hs-flash { position: absolute; left: 0; right: 0; top: -6px; height: calc(var(--row) + 12px); z-index: 1; pointer-events: none; background: var(--exo); opacity: 0; border-radius: 6px; }

/* ---------- výbuchy s názvami drog ---------- */
.hs-fx { position: absolute; left: 0; right: 0; top: -14px; height: calc(var(--row) + 28px); z-index: 5; pointer-events: none; }
.boom { position: absolute; left: var(--x); top: calc(var(--y) + 14px); width: 0; height: 0; color: var(--c, var(--exo)); }
.boom i { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.boom .fl { width: 54px; height: 54px; background: radial-gradient(circle, currentColor 0%, color-mix(in srgb, currentColor 60%, transparent) 25%, transparent 65%); animation: boomFlash .55s ease-out forwards; }
.boom .rg { width: 14px; height: 14px; border: 2px solid currentColor; animation: boomRing .7s cubic-bezier(.2, .8, .3, 1) forwards; }
.boom .rg.b { animation-delay: .08s; animation-duration: .9s; border-width: 1px; }
.boom s { position: absolute; left: 0; top: 0; width: 2px; height: 10px; margin: -5px 0 0 -1px; background: currentColor; border-radius: 2px; transform-origin: 50% 50%; animation: boomShard .6s ease-out forwards; }
.boom b { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; font: 900 clamp(1.05rem, 2.4vw, 1.7rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: currentColor;
  text-shadow: 0 0 12px color-mix(in srgb, currentColor 55%, transparent), 0 1px 0 var(--bg); animation: boomLabel 1.5s var(--out) forwards; }
@keyframes boomFlash { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
@keyframes boomRing { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(5); opacity: 0; } }
@keyframes boomShard { 0% { transform: rotate(var(--a)) translateY(-4px) scaleY(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-34px) scaleY(.3); opacity: 0; } }
@keyframes boomLabel { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -110%) scale(.9); opacity: 0; } }

/* ---------- úvod: TV sa zapne, LIVE bliká, háčik „1 telo. 8 dávok. Sleduj.“ ---------- */
/* blikanie: najviac ~2 zmeny za sekundu a len v páse, nikdy celá obrazovka (fotosenzitívni); reduced motion = bez blikania */
.hero-stage.paused, .hero-stage.paused * { animation-play-state: paused !important; }
.hero-stage.intro .hs-mon { animation: hsCrt .75s cubic-bezier(.2, .8, .3, 1) both; transform-origin: 0 60%; }
@keyframes hsCrt { 0% { transform: scale(.04, .02); opacity: 0; filter: brightness(4); } 35% { transform: scale(1, .03); opacity: 1; filter: brightness(3); } 70% { transform: scale(1, 1.08); filter: brightness(1.4); } 100% { transform: none; filter: none; } }
.hs-live { position: absolute; left: 0; top: 2px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px 2px 5px; border: 1px solid transparent; border-radius: 4px; background: var(--exo); color: #fff; font: 800 .66rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.hs-live em { font-style: normal; }
/* úvod je zámerne PLYNULÝ (zdravý stav), trhanie začne až prvou dávkou: kontrast ukáže, že glitch nie je chyba */
.hs-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: hsDot 1.2s ease-in-out infinite; }
@keyframes hsDot { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); opacity: 1; } 60% { box-shadow: 0 0 0 6px rgba(255,255,255,0); opacity: .55; } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); opacity: 1; } }
.hero-stage.off .hs-live { background: transparent; color: var(--muted); border-color: var(--line); }
.hero-stage.off .hs-live i { animation: none; background: var(--muted); }

.hs-hook { position: absolute; inset: 0 0 0 auto; z-index: 3; display: flex; align-items: center; justify-content: flex-end; gap: .38em; padding-left: 14px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--bg) 14px); font: 900 clamp(1.25rem, 3.6vw, 2.7rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--fg); white-space: nowrap; }
.hs-hook span { display: inline-block; opacity: 0; }
.hs-hook .go { color: var(--exo); text-shadow: 0 0 18px var(--exo-soft); }
.hero-stage.intro .hs-hook span { animation: hsRise .7s cubic-bezier(.2, .8, .2, 1) forwards; }
.hero-stage.intro .hs-hook span:nth-child(1) { animation-delay: .75s; }
.hero-stage.intro .hs-hook span:nth-child(2) { animation-delay: 1.3s; }
.hero-stage.intro .hs-hook .go { animation: hsRise .7s cubic-bezier(.2, .8, .2, 1) 1.85s forwards, hsPulse 1.3s ease-in-out 2.55s infinite; }
@keyframes hsRise { 0% { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes hsPulse { 0%, 100% { opacity: 1; text-shadow: 0 0 18px var(--exo-soft); } 50% { opacity: .55; text-shadow: 0 0 34px var(--exo); } }
/* prvý zásah háčik „roztrhne“ ako zlý signál */
.hero-stage.hooked .hs-hook { animation: hsHookOut .4s steps(1) forwards; }
@keyframes hsHookOut { 0% { transform: translateX(8px) skewX(-8deg); clip-path: inset(0 0 50% 0); } 30% { transform: translateX(-10px); clip-path: inset(40% 0 0 0); opacity: .7; } 60% { transform: translateX(5px); clip-path: inset(20% 0 30% 0); opacity: .4; } 100% { opacity: 0; visibility: hidden; } }

/* záblesk pásu vo farbe drogy pri každom zásahu (1 záblesk / zásah) */
.hs-strobe { position: absolute; left: -8px; right: -8px; top: -8px; height: calc(var(--row) + 16px); z-index: 1; pointer-events: none; border-radius: 8px; background: radial-gradient(ellipse at 60% 50%, var(--sc, var(--exo)), transparent 75%); opacity: 0; }
.hero-stage.strobe .hs-strobe { animation: hsStrobe .38s ease-out; }
@keyframes hsStrobe { 0% { opacity: .42; } 100% { opacity: 0; } }
/* kolaps: červený poplach, 2,5 bliknutia za sekundu */
.hero-stage.alarm .hs-strobe { --sc: var(--exo); animation: hsAlarm .4s steps(1) infinite; }
@keyframes hsAlarm { 0% { opacity: .3; } 50% { opacity: 0; } }
.hero-stage.alarm .hs-live { animation: hsBlink .4s steps(2) infinite; }

/* ---------- úzky pás (container query): dlhý stavový text preč ---------- */
@container (max-width: 560px) { .hs-top .hs-st { display: none; } }

/* ---------- menšie obrazovky ---------- */
@media (max-width: 640px) {
  .hs-wrap { padding-top: 18px; }
  .hero-stage { --row: 78px; }
  .hs-top { font-size: .6rem; gap: 7px; }
  .hs-cap { font-size: .68rem; flex-basis: 160px; }
  /* spodný riadok drží výšku dvoch riadkov popisu: kratší text ani skrytý stav na konci neposunú obsah pod pásom */
  .hs-foot { min-height: calc(.68rem * 1.35 * 2); }
  .hero-stage.off .hs-top { opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }
  .boom .fl { width: 40px; height: 40px; }
}

/* ---------- reduced motion: statická snímka (telo, varovanie, jedna krivka) ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-stage, .hsb-fig, .hsb-flow, .hs-st::before, .hs-top.warn .hs-warn, .hs-off, .hs-off b, .hs-off b::before, .hs-off b::after, .boom *, .hs-flash, .hs-strobe, .hs-live i, .hs-hook span, .hs-mon { animation: none !important; }
  .hs-hook, .hs-live { display: none; }
  .hero-stage.off .hs-off { opacity: 1; }
}