/* =====================================================================
   MELTDOWN STYLE: CYBERPUNK (horror)
   Blood red, black, harsh white. No retro UI.
   ===================================================================== */
[data-meltdown="cyberpunk"] #fx{
  --hz-red:#e0001b; --hz-red-hot:#ff1f33; --hz-blood:#5c0009; --hz-black:#050000;
  font-family:"Archivo",system-ui,sans-serif;
}
[data-meltdown="cyberpunk"] .postcode-msg{color:#ff3344!important;font:700 15px "JetBrains Mono",monospace;letter-spacing:.04em}
body.melting[data-meltdown="cyberpunk"] .site-header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent}

.hz-layer{position:absolute;inset:0;pointer-events:none}
.hz-code,.hz-grain{width:100%;height:100%}
.hz-grain{opacity:0;mix-blend-mode:screen;transition:opacity .3s}
.hz-grain.on{opacity:.16}

/* tunnel vision: edges blurred, centre stays sharp */
.hz-tunnel{
  -webkit-backdrop-filter:blur(var(--tb,0px)) brightness(var(--tbr,1)); backdrop-filter:blur(var(--tb,0px)) brightness(var(--tbr,1));
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,transparent var(--clear,55%),#000 calc(var(--clear,55%) + 28%));
          mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,transparent var(--clear,55%),#000 calc(var(--clear,55%) + 28%));
}
.hz-vignette{inset:-15%;opacity:0;transition:opacity .5s;
  background:radial-gradient(ellipse at center,transparent calc(var(--open,75%) - 30%),rgba(40,0,4,.9) var(--open,75%),#000 calc(var(--open,75%) + 12%))}
.hz-vignette.on{opacity:1}
.hz-bleed{opacity:0;background:radial-gradient(ellipse at 50% 120%,rgba(160,0,12,.55),transparent 60%),radial-gradient(ellipse at 50% -20%,rgba(120,0,10,.45),transparent 55%);mix-blend-mode:multiply;transition:opacity 1s}
.hz-bleed.on{opacity:1}

/* hard cut to black */
.hz-cut{background:#000;opacity:0}
.hz-cut.on{opacity:1}

/* full-screen word slam */
.hz-slam{display:grid;place-items:center;background:#000;opacity:0;overflow:hidden}
.hz-slam.on{opacity:1}
.hz-slam .w{font-family:"Anton","Impact","Archivo",sans-serif;font-weight:400;text-transform:uppercase;color:#fff;line-height:.86;text-align:center;letter-spacing:-.01em;
  font-size:clamp(64px,17vw,300px);padding:0 2vw;white-space:nowrap;animation:hzSlam .38s cubic-bezier(.1,.9,.2,1) both}
.hz-slam .w.red{color:var(--hz-red-hot)}
.hz-slam .w.long{font-size:clamp(46px,11.5vw,210px)}
.hz-slam .w::after{content:attr(data-t);position:absolute;inset:0;color:var(--hz-red);mix-blend-mode:screen;transform:translate(10px,0);opacity:.7;clip-path:inset(40% 0 42% 0)}
.hz-slam .w{position:relative}
@keyframes hzSlam{0%{transform:scale(1.45);filter:blur(10px)}55%{transform:scale(.98);filter:blur(0)}100%{transform:scale(1)}}
.hz-slam.soft{transition:opacity .5s}
.hz-slam.soft .w{animation:none}

/* stacked final statement */
.hz-final{display:grid;place-items:center;text-align:center;background:rgba(0,0,0,.72)}
.hz-final>div{display:grid;gap:1vh}
.hz-final span{display:block;font-family:"Anton","Impact",sans-serif;text-transform:uppercase;font-size:clamp(48px,11vw,190px);line-height:.9;color:#fff;opacity:0;transform:scale(1.6)}
.hz-final span.in{opacity:1;transform:scale(1);transition:transform .25s cubic-bezier(.1,.9,.2,1),opacity .05s}
.hz-final span:nth-child(2).in{color:var(--hz-red-hot)}
.hz-final small{display:block;margin-top:2vh;font:700 clamp(12px,1.5vw,18px) "JetBrains Mono",monospace;letter-spacing:.35em;color:#ff4d5a;opacity:0}
.hz-final small.in{opacity:1}

/* error windows */
.hz-pops{z-index:5}
.hz-final{z-index:15}
.hz-slam{z-index:20}
.hz-cut{z-index:30}
html:has(body.melting[data-meltdown="cyberpunk"]),body.melting[data-meltdown="cyberpunk"]{background:#000}
.hz-pop{position:absolute;animation:hzExpand .36s cubic-bezier(.15,.9,.1,1) both;filter:drop-shadow(0 18px 40px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(224,0,27,.35))}
.hz-pop.out{animation:hzCollapse .18s steps(3) forwards}
@keyframes hzExpand{
  0%{clip-path:inset(50% 50% 50% 50%);transform:scale(1.3)}
  35%{clip-path:inset(calc(50% - 2px) 0 calc(50% - 2px) 0);transform:scale(1.12)}
  100%{clip-path:inset(0);transform:scale(1)}
}
@keyframes hzCollapse{0%{clip-path:inset(0)}60%{clip-path:inset(calc(50% - 2px) 0 calc(50% - 2px) 0)}100%{clip-path:inset(50% 0 50% 100%);opacity:0}}
.hz-pop-in{background:#070000;border:3px solid var(--hz-red);color:#fff}
.hz-pop-head{display:flex;align-items:center;gap:10px;background:var(--hz-red);color:#fff;padding:7px 12px;font-weight:900;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.hz-pop-head svg{width:20px;height:20px;flex:none}
.hz-pop-head em{margin-left:auto;font:700 11px "JetBrains Mono",monospace;font-style:normal;letter-spacing:.06em;opacity:.85}
.hz-pop-body{padding:16px 16px 14px}
.hz-pop-body b{display:block;font-family:"Anton","Impact",sans-serif;font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1;text-transform:uppercase;letter-spacing:.01em}
.hz-pop-body p{margin:8px 0 14px;font:500 13px "JetBrains Mono",monospace;color:#ff8a93}
.hz-bar{height:14px;background:#1d0003;border:1px solid #6b0010}
.hz-bar i{display:block;height:100%;width:0;background:var(--hz-red)}
.hz-foot{display:flex;justify-content:space-between;margin-top:8px;font:700 12px "JetBrains Mono",monospace;letter-spacing:.1em;color:#ff5c68}
.hz-pop.failed .hz-pop-head{background:#fff;color:var(--hz-red)}
.hz-pop.failed .hz-state{color:#fff;background:var(--hz-red);padding:0 6px}
.hz-pop.shudder .hz-pop-in{animation:hzShudder .09s steps(2) infinite}
@keyframes hzShudder{0%{transform:translate(3px,-1px)}100%{transform:translate(-3px,2px)}}
@media (max-width:600px){.hz-pop-body b{font-size:22px}.hz-slam .w{white-space:normal}}

/* ---------- stat cards ---------- */
.hz-stat{z-index:18;display:grid;place-items:center;text-align:center;background:radial-gradient(ellipse at center,rgba(40,0,5,.94),#000 75%);opacity:0;padding:0 5vw}
.hz-stat.on{opacity:1}
.hz-stat-in{max-width:1100px}
.hz-stat .n{font-family:"Anton","Impact",sans-serif;color:#fff;font-size:clamp(90px,21vw,340px);line-height:1;padding-top:.06em;letter-spacing:-.01em;font-variant-numeric:tabular-nums;animation:hzSlam .4s cubic-bezier(.1,.9,.2,1) both}
.hz-stat.locked .n{color:var(--hz-red-hot);text-shadow:0 0 60px rgba(255,0,30,.45)}
.hz-stat .l{margin:3.2vh auto 0;max-width:26ch;font-family:"Anton","Impact",sans-serif;text-transform:uppercase;color:#fff;font-size:clamp(24px,3.8vw,58px);line-height:1.22;opacity:0;transform:translateY(12px);transition:opacity .15s,transform .25s}
.hz-stat.locked .l,.hz-stat .l:only-child{opacity:1;transform:none}
.hz-stat .l b{font-weight:400;color:#000;background:var(--hz-red-hot);padding:.04em .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hz-stat .src{margin-top:2.6vh;font:700 clamp(10px,1.1vw,14px) "JetBrains Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:#a0404a;opacity:0;transition:opacity .3s .2s}
.hz-stat.locked .src{opacity:1}

/* 4th line on the failure screen */
.hz-final em{display:block;margin-top:2.2vh;font-style:normal;font-family:"Anton","Impact",sans-serif;text-transform:uppercase;font-size:clamp(24px,4.4vw,70px);line-height:1;color:#000;background:var(--hz-red-hot);padding:.12em .35em;justify-self:center;width:max-content;max-width:92vw;opacity:0;transform:scale(1.5)}
.hz-final em.in{opacity:1;transform:scale(1);transition:transform .25s cubic-bezier(.1,.9,.2,1),opacity .05s}

/* ---------- premier quote ---------- */
.hz-quote{z-index:19;display:grid;place-items:center;background:#000;opacity:0;padding:0 7vw;transition:opacity .2s}
.hz-quote.on{opacity:1}
.hz-quote figure{margin:0;max-width:1150px}
.hz-quote blockquote{margin:0;font-family:"Anton","Impact",sans-serif;text-transform:uppercase;color:#fff;font-size:clamp(34px,5.6vw,92px);line-height:1.02}
.hz-quote mark{background:none;color:var(--hz-red-hot)}
.hz-quote.done mark{background:var(--hz-red-hot);color:#000;text-decoration:none;padding:0 .15em}
.hz-quote figcaption{margin-top:3vh;font:700 clamp(13px,1.5vw,20px) "JetBrains Mono",monospace;letter-spacing:.14em;color:#ff4d5a;text-transform:uppercase}
.hz-quote figcaption small{display:block;margin-top:.6em;color:#8a3a42;font-size:.75em;letter-spacing:.1em;text-transform:none}
.hz-q-ask{max-width:1000px;text-align:left;animation:hzExpand .36s cubic-bezier(.15,.9,.1,1) both;border-left:6px solid var(--hz-red);padding:1vh 0 1vh 2.4vw}
.hz-q-ask small{display:block;font:700 clamp(11px,1.2vw,15px) "JetBrains Mono",monospace;letter-spacing:.2em;color:#ff4d5a;margin-bottom:1.6vh}
.hz-q-ask p{margin:0;font-family:"Archivo",sans-serif;font-weight:800;color:#fff;font-size:clamp(24px,3.4vw,52px);line-height:1.15}
.hz-quote{text-align:left}

/* ---------- side intel ---------- */
.hz-edges{z-index:4;opacity:0;transition:opacity .6s}
.hz-edges.on{opacity:1}
.hz-edge{position:absolute;top:0;bottom:0;width:min(26vw,380px);overflow:hidden;
  -webkit-mask-image:linear-gradient(var(--dir),#000 30%,transparent);mask-image:linear-gradient(var(--dir),#000 30%,transparent)}
.hz-edge.l{left:0;--dir:to right}
.hz-edge.r{right:0;--dir:to left;text-align:right}
.hz-edge .feed{position:absolute;left:14px;right:14px;top:0;font:500 10.5px/1.55 "JetBrains Mono",monospace;color:rgba(200,0,24,.34);white-space:pre;animation:hzFeed 14s linear infinite}
.hz-edge.r .feed{animation-duration:11s;animation-direction:reverse}
@keyframes hzFeed{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.hz-edge .scanbar{position:absolute;left:0;right:0;height:90px;background:linear-gradient(transparent,rgba(255,20,40,.16),transparent);animation:hzScan 3.2s cubic-bezier(.5,0,.5,1) infinite}
.hz-edge.r .scanbar{animation-delay:-1.4s}
@keyframes hzScan{from{top:-100px}to{top:100%}}

.hz-sides{z-index:17}
.hz-intel{position:absolute;width:min(24vw,340px);padding:14px 16px 12px;background:rgba(6,0,1,.88);border:1px solid rgba(224,0,27,.75);border-left:4px solid var(--hz-red);color:#fff;
  box-shadow:0 0 30px rgba(224,0,27,.18);animation:hzGlitchIn .5s steps(1,end) both}
.hz-intel.r{border-left:1px solid rgba(224,0,27,.75);border-right:4px solid var(--hz-red);text-align:right}
.hz-intel.out{animation:hzGlitchOut .34s steps(1,end) forwards}
.hz-intel .lab{display:flex;gap:8px;align-items:center;font:700 10px "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:#ff3b4a}
.hz-intel.r .lab{justify-content:flex-end}
.hz-intel .lab i{width:7px;height:7px;background:var(--hz-red-hot);animation:cpBlink .5s steps(2) infinite}
.hz-intel .big{font-family:"Anton","Impact",sans-serif;font-size:clamp(40px,4.6vw,72px);line-height:.95;margin:6px 0 4px;color:#fff;text-shadow:-3px 0 rgba(255,0,40,.7),3px 0 rgba(0,0,0,.6)}
.hz-intel .when{font-family:"Anton","Impact",sans-serif;font-size:clamp(22px,2.2vw,32px);line-height:1;margin:8px 0 6px;text-transform:uppercase}
.hz-intel .when b{font-weight:400;color:var(--hz-red-hot)}
.hz-intel p{margin:0;font:600 clamp(13px,1.05vw,15px)/1.35 "Archivo",sans-serif;color:#f3d6d9}
.hz-intel small{display:block;margin-top:8px;font:500 9.5px "JetBrains Mono",monospace;letter-spacing:.08em;color:#9b4550}
.hz-intel.jitter{animation:hzJitter .12s steps(2) 3}
@keyframes hzGlitchIn{
  0%{opacity:0;clip-path:inset(0 0 100% 0)}
  10%{opacity:1;clip-path:inset(40% 0 45% 0);transform:translateX(-14px);filter:hue-rotate(-20deg) saturate(3)}
  20%{opacity:0}
  30%{opacity:1;clip-path:inset(0 0 60% 0);transform:translateX(10px)}
  42%{clip-path:inset(55% 0 0 0);transform:translateX(-6px)}
  54%{opacity:.2;clip-path:inset(-30% -12%)}
  66%{opacity:1;transform:translateX(4px) skewX(-6deg)}
  80%{transform:none;filter:none}
  100%{opacity:1;clip-path:inset(-30% -12%);transform:none}
}
@keyframes hzGlitchOut{
  0%{opacity:1}
  20%{clip-path:inset(30% 0 30% 0);transform:translateX(12px)}
  40%{opacity:0}
  60%{opacity:1;clip-path:inset(60% 0 10% 0);transform:translateX(-18px)}
  80%{clip-path:inset(48% 0 48% 0)}
  100%{opacity:0;clip-path:inset(50% 0 50% 0)}
}
@keyframes hzJitter{0%{transform:translate(4px,0)}100%{transform:translate(-4px,1px)}}
/* narrow screens: intel sits in top/bottom bands */
@media (max-width:900px){
  .hz-edge{display:none}
  .hz-intel{width:auto;left:12px!important;right:12px!important;padding:10px 12px}
  .hz-intel .big{font-size:36px}
}
@media (min-width:901px){
  .hz-final span{font-size:clamp(48px,8.4vw,160px)}
  .hz-final em{max-width:46vw;width:auto;font-size:clamp(24px,3.4vw,58px);text-align:center}
}

/* =====================================================================
   BACKGROUND INTEL FIELD
   z-order: pops 5 · final 15 · backdrop 16 · ghosts 16.5 · edges/bands 17
            · side cards 17 · stat 18 · quote 19 · slam 20 · cut 30
   ===================================================================== */
.hz-stat,.hz-quote{background:transparent!important}
.hz-backdrop{z-index:16;background:radial-gradient(ellipse at center,rgba(40,0,5,.95),#000 75%);opacity:0;transition:opacity .12s}
.hz-backdrop.on{opacity:1}
.hz-ghosts{z-index:16;overflow:hidden;transition:opacity .4s}
.hz-ghosts.dim{opacity:.35}
.hz-edges{z-index:17}
.hz-sides{z-index:17}

/* giant ghost numbers */
.hz-ghost{position:absolute;pointer-events:none;animation:hzGlitchIn .45s steps(1,end) both}
.hz-ghost.out{animation:hzGlitchOut .38s steps(1,end) forwards}
.hz-ghost b{display:block;font-family:"Anton","Impact",sans-serif;font-weight:400;font-size:clamp(90px,15vw,260px);line-height:.85;color:transparent;-webkit-text-stroke:2px rgba(224,0,27,.5);letter-spacing:-.01em;position:relative}
.hz-ghost b::after{content:attr(data-t);position:absolute;left:0;top:0;color:rgba(224,0,27,.16);-webkit-text-stroke:0;transform:translate(6px,4px);clip-path:inset(35% 0 40% 0)}
.hz-ghost span{display:block;font:700 12px "JetBrains Mono",monospace;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,60,75,.55);margin-top:6px}
.hz-ghost.r{text-align:right}

/* scrolling case log bands */
.hz-bands{z-index:17;opacity:0;transition:opacity .4s}
.hz-bands.on{opacity:1}
.hz-bands.dim{opacity:.4}
.hz-band{position:absolute;left:0;right:0;height:26px;display:flex;align-items:center;overflow:hidden;background:rgba(10,0,2,.75);border-top:1px solid rgba(224,0,27,.55);border-bottom:1px solid rgba(224,0,27,.55)}
.hz-band.top{top:0}
.hz-band.bot{bottom:0}
.hz-band b{flex:none;height:100%;display:grid;place-items:center;padding:0 12px;background:var(--hz-red);color:#fff;font:700 11px "JetBrains Mono",monospace;letter-spacing:.2em;z-index:1}
.hz-band .track{display:flex;white-space:nowrap;animation:hzBand 38s linear infinite}
.hz-band .track.rev{animation-duration:46s;animation-direction:reverse}
.hz-band .track span{padding-right:40px;font:700 12px "JetBrains Mono",monospace;letter-spacing:.12em;color:#ff8a93}
.hz-band .track i{font-style:normal;color:var(--hz-red);padding:0 18px}
@keyframes hzBand{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* intel card extras */
.hz-intel .lab em{margin-left:auto;font-style:normal;color:#6b2a31;letter-spacing:.1em}
.hz-intel.r .lab em{margin-left:0;margin-right:auto;order:-1}
.hz-intel blockquote{margin:8px 0 6px;font-family:"Anton","Impact",sans-serif;text-transform:uppercase;font-size:clamp(20px,1.9vw,30px);line-height:1.05;color:#fff}
.hz-intel p.who{font:700 11px "JetBrains Mono",monospace;letter-spacing:.1em;color:#ff4d5a;text-transform:uppercase}
.hz-intel .mini-chart{display:flex;gap:6px;align-items:flex-end;height:78px;margin:10px 0 6px}
.hz-intel.r .mini-chart{flex-direction:row}
.hz-intel .mc{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%}
.hz-intel .mc .bars{flex:1;width:100%;display:flex;gap:2px;align-items:flex-end}
.hz-intel .mc i{flex:1;height:var(--h);background:#6d6a6b;animation:hzGrow .6s cubic-bezier(.2,.9,.2,1) both}
.hz-intel .mc i.r{background:var(--hz-red-hot);animation-delay:.15s}
.hz-intel .mc span{font:700 9px "JetBrains Mono",monospace;color:#9b4550}
@keyframes hzGrow{from{height:0}}
.hz-intel b.r,.hz-intel p b.r{color:var(--hz-red-hot)}
.hz-intel .seg{display:flex;gap:2px;height:30px;margin:10px 0 8px}
.hz-intel .seg i{display:grid;place-items:center;font:700 10px "JetBrains Mono",monospace;color:#fff;font-style:normal;animation:hzGrowX .7s cubic-bezier(.2,.9,.2,1) both;transform-origin:left}
.hz-intel .seg .s-stopped{background:#e0001b}.hz-intel .seg .s-stopping{background:#9c1422}.hz-intel .seg .s-unsure{background:#4a3a3d}.hz-intel .seg .s-continuing{background:#262223}
@keyframes hzGrowX{from{transform:scaleX(0)}}
.hz-intel .map{display:block;width:100%;height:auto;margin:8px 0 4px;background:rgba(40,0,6,.35)}
.hz-intel .map .grid line{stroke:rgba(224,0,27,.18);stroke-width:1}
.hz-intel .map .sweep{stroke:rgba(255,40,60,.7);stroke-width:2;animation:hzSweep 2.4s linear infinite}
@keyframes hzSweep{from{transform:translateX(0)}to{transform:translateX(280px)}}
.hz-intel .map .dot{fill:var(--hz-red-hot)}
.hz-intel .map .ring{fill:none;stroke:var(--hz-red-hot);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:hzPing 1.4s ease-out infinite}
.hz-intel .map g{animation:hzGlitchIn .5s steps(1,end) both}
.hz-intel .map text{font:700 8px "JetBrains Mono",monospace;fill:#ffb3ba;letter-spacing:.06em}
@keyframes hzPing{from{transform:scale(1);opacity:1}to{transform:scale(5);opacity:0}}
.hz-intel .doc div{position:relative;font:700 11px/1.9 "JetBrains Mono",monospace;color:#c9a0a5;letter-spacing:.06em}
.hz-intel .doc div span{display:inline-block;height:10px;background:#000;border:1px solid #3b0a10;margin-right:8px;vertical-align:middle}
.hz-intel .doc b{color:var(--hz-red-hot)}
.hz-intel.k-map,.hz-intel.k-amnesty,.hz-intel.k-survey{width:min(24vw,330px)}

/* keep the centre text inside the clear zone on wide screens */
@media (min-width:901px){
  .hz-stat .n{font-size:clamp(80px,13vw,230px)}
  .hz-stat-in{max-width:48vw}
  .hz-quote figure,.hz-q-ask{max-width:48vw}
  .hz-quote blockquote{font-size:clamp(30px,4vw,72px)}
  .hz-q-ask p{font-size:clamp(22px,2.6vw,44px)}
  .hz-intel{max-height:22vh;overflow:hidden}
  .hz-intel.k-map,.hz-intel.k-amnesty{max-height:none}
}
@media (min-width:901px) and (max-height:760px){ .hz-intel{max-height:28vh} }
@media (max-width:900px){ .hz-ghosts,.hz-band.top{display:none} .hz-band.bot{height:22px} }
.hz-final{z-index:18;background:transparent!important}
.hz-backdrop.soft{background:rgba(0,0,0,.72)}
@media (min-width:901px){
  .hz-stat .n{font-size:clamp(72px,11vw,200px)}
  .hz-final span{font-size:clamp(44px,7.6vw,150px)}
}
@media (max-width:900px){ .hz-intel{max-height:150px;overflow:hidden} .hz-intel.k-map,.hz-intel.k-amnesty{max-height:190px} }

/* ---------- overload ---------- */
.hz-overload{z-index:19;overflow:hidden}
.hz-tear{z-index:29;width:100%;height:100%;image-rendering:pixelated}
.hz-redflash{z-index:28;background:#9e0014;mix-blend-mode:multiply;opacity:0}
.hz-overload .hz-intel.ov{position:absolute;width:min(340px,80vw);max-height:none}
.hz-overload .hz-ghost.ov b{font-size:clamp(140px,26vw,420px);-webkit-text-stroke:3px rgba(255,20,40,.65)}
.hz-snip{position:absolute;white-space:nowrap;font-family:"Anton","Impact",sans-serif;text-transform:uppercase;line-height:.9;color:#fff;letter-spacing:.01em;
  text-shadow:-4px 0 rgba(255,0,40,.75),4px 0 rgba(0,0,0,.7);animation:hzGlitchIn .32s steps(1,end) both}
.hz-snip.red{color:var(--hz-red-hot);text-shadow:4px 0 rgba(255,255,255,.35)}
.hz-snip.inv{background:var(--hz-red-hot);color:#000;padding:.05em .25em;text-shadow:none}
.hz-slab{position:absolute;max-width:94vw;background:var(--hz-red-hot);color:#000;padding:.35em .6em .3em;animation:hzGlitchIn .36s steps(1,end) both;box-shadow:0 0 0 3px #000,0 20px 60px rgba(0,0,0,.8)}
.hz-slab b{display:block;font-family:"Anton","Impact",sans-serif;font-weight:400;font-size:clamp(30px,5.2vw,96px);line-height:.95;text-transform:uppercase;white-space:nowrap}
.hz-slab small{display:block;margin-top:.35em;font:700 clamp(10px,.9vw,13px) "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#3a0006}
.hz-intel .headline{margin:8px 0 6px;font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(16px,1.35vw,21px);line-height:1.15;color:#fff;border-left:3px solid var(--hz-red-hot);padding-left:10px}
.hz-intel.r .headline{border-left:0;border-right:3px solid var(--hz-red-hot);padding:0 10px 0 0}
@media (max-width:900px){ .hz-slab b{white-space:normal;font-size:30px} }

/* ---------- statement frames ---------- */
.hz-statement{max-width:1100px}
.hz-statement .st{font-family:"Anton","Impact",sans-serif;text-transform:uppercase;color:#fff;font-size:clamp(40px,7vw,120px);line-height:.98;letter-spacing:.005em}
.hz-statement .w{display:inline-block;opacity:0;transform:scale(1.6);filter:blur(6px)}
.hz-statement .w.in{opacity:1;transform:none;filter:none;transition:transform .22s cubic-bezier(.1,.9,.2,1),filter .18s,opacity .05s}
.hz-statement .w.hot{color:var(--hz-red-hot);text-shadow:0 0 40px rgba(255,0,30,.5)}
.hz-statement .src{opacity:1;margin-top:3vh}
@media (min-width:901px){ .hz-statement{max-width:50vw} .hz-statement .st{font-size:clamp(40px,4.9vw,96px)} }

/* ---------- title glitch in / out ---------- */
.hz-stat.on .hz-stat-in,.hz-q-ask,.hz-quote figure{animation:hzTitleIn .5s steps(1,end) both}
.hz-stat .hz-stat-in.gout,.hz-q-ask.gout,.hz-quote figure.gout{animation:hzTitleOut .4s steps(1,end) forwards}
@keyframes hzTitleIn{
  0%  {opacity:0;clip-path:inset(0 0 100% 0)}
  8%  {opacity:1;clip-path:inset(42% 0 38% 0);transform:translateX(-40px) skewX(-12deg);filter:drop-shadow(8px 0 0 rgba(255,0,40,.9))}
  16% {opacity:0}
  24% {opacity:1;clip-path:inset(0 0 62% 0);transform:translateX(26px);filter:drop-shadow(-10px 0 0 rgba(255,0,40,.9))}
  32% {clip-path:inset(58% 0 0 0);transform:translateX(-18px) scaleX(1.08)}
  40% {opacity:.3;clip-path:inset(20% 0 30% 0);transform:translateX(12px)}
  50% {opacity:1;clip-path:inset(-30% -12%);transform:translateX(-6px) skewX(6deg);filter:drop-shadow(6px 0 0 rgba(255,0,40,.7))}
  62% {transform:translateX(4px);filter:drop-shadow(-4px 0 0 rgba(255,255,255,.5))}
  74% {clip-path:inset(46% 0 44% 0)}
  80% {clip-path:inset(-30% -12%);transform:none;filter:none}
  100%{opacity:1;clip-path:inset(-30% -12%);transform:none;filter:none}
}
@keyframes hzTitleOut{
  0%  {opacity:1;clip-path:inset(-30% -12%)}
  12% {clip-path:inset(0 0 55% 0);transform:translateX(30px) skewX(10deg);filter:drop-shadow(-10px 0 0 rgba(255,0,40,.9))}
  24% {clip-path:inset(50% 0 0 0);transform:translateX(-36px)}
  36% {opacity:0}
  48% {opacity:1;clip-path:inset(30% 0 40% 0);transform:translateX(20px) scaleX(1.15);filter:drop-shadow(10px 0 0 rgba(255,255,255,.6))}
  62% {clip-path:inset(62% 0 30% 0);transform:translateX(-50px)}
  76% {opacity:.6;clip-path:inset(49% 0 49% 0);transform:scaleX(1.4)}
  100%{opacity:0;clip-path:inset(50% 0 50% 0);transform:scaleX(1.6)}
}
@media (prefers-reduced-motion:reduce){ .hz-stat.on .hz-stat-in,.hz-q-ask,.hz-quote figure{animation:none} }

/* never clip the tops of tall glyphs */
.hz-stat-in,.hz-statement{overflow:visible}
.hz-slam .w{line-height:1;padding-top:.05em}
.hz-quote .hz-party{display:inline-block;margin-left:.6em;padding:.15em .55em;background:#fff;color:#e0001b;font-weight:700;letter-spacing:.14em;vertical-align:.05em}

/* ---------- slow drift: main title cards keep growing while they're held ---------- */
/* --hz-hold is set per card in js/meltdown/cyberpunk.js so the growth lasts exactly
   as long as the card is on screen. Scaling the layer, not the text, keeps the
   glitch-in and glitch-out animations on .hz-stat-in untouched. */
@keyframes hzDrift{from{transform:scale(1)}to{transform:scale(1.055)}}
.hz-stat.on,.hz-quote.on,.hz-final{animation:hzDrift var(--hz-hold,3600ms) linear both;will-change:transform}
@media (max-width:900px){ @keyframes hzDrift{from{transform:scale(1)}to{transform:scale(1.035)}} }
@media (prefers-reduced-motion:reduce){ .hz-stat.on,.hz-quote.on,.hz-final{animation:none} }

/* ---------- quote: laid out in full, revealed word by word ---------- */
/* Every word holds its place from the start (invisible until it arrives), so
   the lines never re-wrap when the red highlight appears. */
.hz-quote .q .qw{visibility:hidden}
.hz-quote .q .qw.on{visibility:visible}
.hz-quote .q .qh.on{color:var(--hz-red-hot)}
.hz-quote.done .q .qh.on{background:var(--hz-red-hot);color:#000}

/* ---------- what the buyback costs ---------- */
.hz-cost{margin-top:3.2vh;border-left:5px solid var(--hz-red);padding-left:2vw;animation:hzExpand .36s cubic-bezier(.15,.9,.1,1) both}
.hz-cost p{margin:0;font-family:"Anton","Impact",sans-serif;text-transform:uppercase;color:#fff;font-size:clamp(20px,2.6vw,42px);line-height:1.1}
.hz-cost mark{background:var(--hz-red-hot);color:#000;padding:0 .12em}
.hz-cost small{display:block;margin-top:1.2vh;font:700 clamp(10px,1.1vw,14px) "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#a0404a}
.hz-quote .q .qs{visibility:hidden;white-space:pre-wrap}
.hz-quote .q .qs.on{visibility:visible}
.hz-quote.done .q .qs.qh.on{background:var(--hz-red-hot)}
/* the quote must always fit the screen: the figure can't grow past the layer,
   and a stubborn line breaks rather than running off the edge */
/* a centred grid item sizes to its content, so cap it in viewport units */
.hz-quote figure{max-width:min(1150px,86vw)!important;min-width:0}
.hz-quote .hz-q-ask{max-width:min(1000px,86vw)!important;min-width:0}
.hz-quote blockquote,.hz-quote .q{overflow-wrap:anywhere}

.hz-quote .qend{visibility:hidden}
.hz-quote.done .qend{visibility:visible}
/* on wide screens keep the quote inside the middle column, clear of the side intel */
@media (min-width:901px){
  .hz-quote figure{max-width:min(860px,56vw)!important}
  .hz-quote .hz-q-ask{max-width:min(800px,54vw)!important}
}
