/* ══════════════════════════════════════════════════════════════
   VHSCREAM v2 — analog decay · structured grid · blood engine
   ══════════════════════════════════════════════════════════════ */
:root{
  /* palette */
  --void:#040305; --ink:#0a0709; --pane:#0e0a0d; --pane2:#130d11;
  --blood:#d80f1e; --blood-lt:#ff5f6a; --blood-dk:#7a0510; --blood-wet:#a3040c; --ember:#ff5a1e;
  --bone:#f2ece1; --ash:#c2baac; --dust:#8b8377;
  --cyan:#2ff3e0; --mag:#ff2fb0; --amber:#ffb000;
  --edge:rgba(234,227,214,.11); --edge2:rgba(234,227,214,.19);
  /* type */
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono","Courier New",monospace;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --disp:"Anton","Impact","Haettenschweiler","Arial Narrow Bold",sans-serif;
  /* rhythm */
  --gut:24px; --pad:clamp(72px,9.5vh,112px); --rail:112px;
  --e1:cubic-bezier(.22,.8,.24,1); --e2:cubic-bezier(.5,0,.1,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--bone);font-family:var(--sans);font-size:15.5px;line-height:1.7;
  overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden;height:100vh}
a{color:inherit;text-decoration:none}
::selection{background:var(--blood);color:#fff}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#070508}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--blood-dk),var(--blood));border:2px solid #070508}

/* ── canvas stack ─────────────────────────── */
#smoke{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#dustfield{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.8}
#dried{position:fixed;inset:0;z-index:92;pointer-events:none;--driedA:.42;opacity:var(--driedA);transition:opacity 1.2s}
body.fx-full #dried{opacity:calc(var(--driedA) * 1.6)}
#blood{position:fixed;inset:0;z-index:93;pointer-events:none;opacity:.6;transition:opacity .4s}
body.fx-full #blood,body.fx-full #slash{opacity:1}
#slash{position:fixed;inset:0;z-index:94;pointer-events:none;opacity:.82;transition:opacity .4s}
#flood{position:fixed;inset:0;z-index:95;pointer-events:none}
body.flooding #flood{z-index:120}
body.flooding nav,body.flooding .osd,body.flooding #howto,body.flooding #index{opacity:0;transition:opacity .16s}

/* ── CRT / VHS post ───────────────────────── */
.post{position:fixed;inset:0;z-index:90;pointer-events:none}
.scanlines{background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 3px,rgba(0,0,0,.30) 4px,rgba(0,0,0,.30) 5px);
  opacity:.16;mix-blend-mode:multiply}
body.fx-full .scanlines{opacity:.45}
.slowlines{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.02) 0 1px,rgba(0,0,0,0) 1px 7px);
  animation:roll 14s linear infinite;opacity:.25}
body.fx-full .slowlines{opacity:1;animation-duration:9s}
@keyframes roll{from{transform:translateY(0)}to{transform:translateY(6px)}}
.grain{opacity:.05;mix-blend-mode:overlay;animation:gs 1.1s steps(2) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23n)' opacity='.9'/></svg>")}
@keyframes gs{0%{transform:translate(0,0)}50%{transform:translate(-2%,1.5%)}100%{transform:translate(0,0)}}
body.fx-full .grain{opacity:.15;animation-duration:.28s}
.bulge{background:radial-gradient(ellipse 88% 70% at 50% 50%,rgba(255,255,255,.04),rgba(0,0,0,0) 62%);mix-blend-mode:screen}
.vignette{background:radial-gradient(ellipse 128% 94% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 90%,rgba(0,0,0,.82) 100%)}
.tracking{position:fixed;left:0;width:100%;height:120px;z-index:91;pointer-events:none;filter:blur(.4px);opacity:.22;
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(255,255,255,.04) 22%,rgba(47,243,224,.09) 45%,
    rgba(255,47,176,.09) 55%,rgba(255,255,255,.055) 72%,rgba(0,0,0,0));
  animation:sweep 15s linear infinite}
body.fx-full .tracking{opacity:.6;animation-duration:8.5s}
@keyframes sweep{0%{top:-140px;opacity:0}6%{opacity:.7}92%{opacity:.55}100%{top:100vh;opacity:0}}
.dropout{position:fixed;left:0;width:100%;z-index:92;pointer-events:none;display:none;
  background:rgba(234,227,214,.9);mix-blend-mode:overlay}
body.glitching .dropout{display:block}
#splice{position:fixed;inset:0;z-index:92;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent 46%,rgba(234,227,214,.5) 50%,transparent 54%)}
#splice.fire{animation:spl .42s ease-out}
@keyframes spl{0%{opacity:0;transform:scaleY(.2)}22%{opacity:1}100%{opacity:0;transform:scaleY(2.4)}}
/* red pulse behind the flood */
#impact{position:fixed;inset:0;z-index:96;pointer-events:none;opacity:0;background:#fff;mix-blend-mode:overlay}
#impact.hit{animation:hitflash .34s cubic-bezier(.1,.8,.2,1)}
@keyframes hitflash{0%{opacity:.55}18%{opacity:.18}100%{opacity:0}}
#redwash{position:fixed;inset:0;z-index:92;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,rgba(180,10,18,.55),rgba(90,0,6,.9));
  transition:opacity .18s}

/* ══ MACHETE CURSOR ══════════════════════════ */
#blade{position:fixed;z-index:130;pointer-events:none;width:300px;height:300px;margin:-150px 0 0 -150px;
  will-change:transform;filter:drop-shadow(0 6px 14px rgba(0,0,0,.85))}
/* the palm — SVG(104,104) — is pinned to the element centre, so the fist is the pivot */
#blade svg{overflow:visible;transform:translate(17.6px,17.6px)}
#blade,#ring{transform-origin:center center}
#ring{position:fixed;z-index:129;pointer-events:none;width:52px;height:52px;margin:-26px 0 0 -26px;
  border:1px solid rgba(216,15,30,.45);border-radius:2px;
  transition:width .28s var(--e1),height .28s var(--e1),margin .28s var(--e1),border-color .28s,opacity .28s}
#ring.hot{width:86px;height:86px;margin:-43px 0 0 -43px;border-color:var(--blood);opacity:1}
#ring:before,#ring:after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--blood)}
#ring:before{left:-1px;top:-1px;border-right:0;border-bottom:0}
#ring:after{right:-1px;bottom:-1px;border-left:0;border-top:0}
@media(max-width:900px),(pointer:coarse){body{cursor:auto}#blade,#ring{display:none}}

/* ══ VCR OSD ═════════════════════════════════ */
.osd{position:fixed;z-index:96;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;pointer-events:none;
  color:var(--dust);text-shadow:0 0 8px rgba(0,0,0,.9)}
body.fx-full .osd{color:var(--bone);text-shadow:0 0 10px rgba(234,227,214,.4),2px 0 rgba(255,47,176,.45),-2px 0 rgba(47,243,224,.45)}
.osd.bl{bottom:24px;left:26px}.osd.br{bottom:24px;right:26px;text-align:right}
.rec{display:inline-flex;align-items:center;gap:8px}
.rec i{width:8px;height:8px;border-radius:50%;background:var(--blood);box-shadow:0 0 12px var(--blood);animation:blink 1.15s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.12}}
@media(max-width:820px){.osd{font-size:9.5px;letter-spacing:.14em}.osd.bl,.osd.br{bottom:11px}.osd.bl{left:13px}.osd.br{right:13px}}
@media(max-width:640px){.osd.br{display:none}}

/* ══ BOOT ════════════════════════════════════ */
#boot{position:fixed;inset:0;z-index:200;background:#000;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:24px;transition:opacity .7s .25s,visibility .7s .25s}
#boot.gone{opacity:0;visibility:hidden;pointer-events:none}
#boot .bars{display:flex;width:min(560px,78vw);height:112px;box-shadow:0 0 60px rgba(255,255,255,.05)}
#boot .bars i{flex:1}
#boot .bignum{font-family:var(--disp);font-size:clamp(56px,11vw,128px);color:var(--bone);letter-spacing:.04em;
  text-shadow:4px 0 var(--mag),-4px 0 var(--cyan);opacity:.9;transform:scaleY(1.12)}
#boot .log{font-size:11.5px;letter-spacing:.24em;color:var(--ash);min-height:5.4em;width:min(560px,78vw)}
#boot .log b{display:block;color:var(--bone);font-weight:400}
#boot .log b.err{color:var(--blood)}

/* ══ STRUCTURE ═══════════════════════════════ */
main{position:relative;z-index:10}
.wrap{width:min(1320px,90vw);margin:0 auto}
section{position:relative;padding:var(--pad) 0;scroll-margin-top:80px}
/* blueprint column guides */
#guides{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.5}
#guides .g{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(234,227,214,.055) 12%,rgba(234,227,214,.055) 88%,transparent)}

/* left section index rail */
#index{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:95;display:grid;gap:16px}
#index a{display:flex;align-items:center;gap:11px;font-size:10px;letter-spacing:.22em;color:var(--dust);transition:color .3s}
#index a i{width:22px;height:1px;background:var(--dust);transition:width .35s var(--e1),background .3s}
#index a.on{color:var(--bone)}
#index a.on i{width:44px;background:var(--blood);box-shadow:0 0 14px var(--blood)}
#index a:hover{color:var(--bone)}
@media(max-width:1580px){#index{display:none}}

/* ══ NAV ═════════════════════════════════════ */
nav{position:fixed;top:0;left:0;width:100%;z-index:97;padding:18px 0;border-bottom:1px solid transparent;
  transition:background .4s,backdrop-filter .4s,border-color .4s,padding .4s}
nav.stuck{background:rgba(6,4,6,.8);backdrop-filter:blur(16px) saturate(.55);border-bottom-color:var(--edge);padding:12px 0}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-family:var(--disp);font-size:22px;letter-spacing:.02em;transform:scaleY(1.2);transform-origin:left center;
  color:var(--bone);text-shadow:2px 0 rgba(255,47,176,.7),-2px 0 rgba(47,243,224,.7)}
.brand span{color:var(--blood)}
.navlinks{display:flex;gap:28px;font-size:10.5px;letter-spacing:.26em;color:var(--ash)}
.navlinks a{position:relative;padding:6px 0;transition:color .25s}
.navlinks a:hover,.navlinks a.on{color:var(--bone)}
.navlinks a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--blood);transition:width .3s}
.navlinks a:hover:after,.navlinks a.on:after{width:100%}
@media(max-width:1080px){.navlinks{display:none}}
#burger{display:none;width:42px;height:42px;border:1px solid var(--edge);background:transparent;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;cursor:pointer}
#burger i{display:block;width:18px;height:1.5px;background:var(--bone);transition:transform .3s,opacity .2s}
body.menu #burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu #burger i:nth-child(2){opacity:0}
body.menu #burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:1080px){#burger{display:flex}}
#menu{position:fixed;inset:0;z-index:96;background:#050406;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:6px;padding:0 9vw;opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s}
body.menu #menu{opacity:1;visibility:visible}
#menu a{font-family:var(--disp);font-size:clamp(30px,8vw,54px);letter-spacing:.01em;color:var(--bone);
  padding:9px 0;transition:color .2s}
#menu a:active,#menu a:hover{color:var(--blood)}
#menu small{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--dust);margin-bottom:18px}
.navcta{font-size:10.5px;letter-spacing:.22em;border:1px solid var(--blood);padding:11px 20px;color:var(--bone);
  background:linear-gradient(90deg,rgba(216,15,30,.2),rgba(216,15,30,0));transition:.25s;white-space:nowrap}
.navcta:hover{background:var(--blood);box-shadow:0 0 34px rgba(216,15,30,.55)}
#spool{position:fixed;top:0;left:0;height:2px;width:0;z-index:98;pointer-events:none;
  background:linear-gradient(90deg,rgba(216,15,30,0),var(--blood-dk) 30%,var(--blood) 78%,var(--ember));
  box-shadow:0 0 20px rgba(216,15,30,.9)}
#spool:after{content:"";position:absolute;right:-2px;top:-4px;width:4px;height:10px;background:var(--bone);
  box-shadow:0 0 14px var(--bone),2px 0 0 rgba(255,47,176,.9),-2px 0 0 rgba(47,243,224,.9)}

/* ══ SECTION HEADER SYSTEM ═══════════════════ */
.shead{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--gut);margin-bottom:52px;align-items:start}
@media(max-width:900px){.shead{grid-template-columns:1fr;gap:14px}}
.smeta{position:relative;padding-top:9px}
.smeta .n{font-family:var(--disp);font-size:44px;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(216,15,30,.65);transform:scaleY(1.14);transform-origin:left;display:block}
.smeta .k{font-size:9.5px;letter-spacing:.3em;color:var(--blood);margin-top:12px;display:block}
.smeta:after{content:"";position:absolute;left:0;top:0;width:34px;height:2px;background:var(--blood)}
.stitle{font-family:var(--disp);font-size:clamp(34px,5.6vw,72px);line-height:.93;letter-spacing:.004em;
  transform:scaleY(1.15);transform-origin:left;color:var(--bone)}
body.fx-full .stitle{text-shadow:2px 0 rgba(255,47,176,.34),-2px 0 rgba(47,243,224,.34)}
.sdesc{margin-top:22px;color:var(--ash);font-size:13.5px;line-height:1.8;max-width:62ch}

/* ══ PANEL PRIMITIVE (corner ticks) ══════════ */
.panel{position:relative;background:rgba(14,10,13,.72);border:1px solid var(--edge)}
.panel:before,.panel:after{content:"";position:absolute;width:11px;height:11px;border:1px solid rgba(216,15,30,.7);pointer-events:none}
.panel:before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.panel:after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.plabel{font-size:9.5px;letter-spacing:.28em;color:var(--dust);padding:13px 18px;border-bottom:1px solid var(--edge);
  display:flex;justify-content:space-between;gap:12px}
.plabel b{color:var(--blood);font-weight:400}

/* reveal */
.rv{opacity:0;transform:translateY(30px);filter:blur(5px);
  transition:opacity .8s var(--e1),transform .8s var(--e1),filter .8s}
.rv.in{opacity:1;transform:none;filter:none}

/* ══ HERO ════════════════════════════════════ */
#hero{min-height:100svh;display:flex;align-items:center;padding-top:72px}
.herogrid{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--gut);align-items:start}
@media(max-width:900px){.herogrid{grid-template-columns:1fr}}
.hmeta{padding-top:10px;font-size:9.5px;letter-spacing:.26em;color:var(--dust);display:grid;gap:9px}
.hmeta b{color:var(--blood);font-weight:400}
.wordmark{font-family:var(--disp);font-size:clamp(60px,13.6vw,206px);line-height:.82;letter-spacing:-.012em;
  transform:scaleY(1.15);transform-origin:left center;color:var(--bone);position:relative;display:block;
  text-shadow:5px 0 rgba(255,47,176,.8),-5px 0 rgba(47,243,224,.8),0 0 62px rgba(216,15,30,.3)}
.wordmark em{font-style:normal;color:var(--blood);
  text-shadow:5px 0 rgba(255,47,176,.45),-5px 0 rgba(47,243,224,.45),0 0 46px rgba(216,15,30,.85)}
.wordmark:before,.wordmark:after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;clip-path:inset(0 0 100% 0);opacity:0}
.wordmark:before{color:var(--cyan);transform:translateX(-9px)}
.wordmark:after{color:var(--mag);transform:translateX(9px)}
body.glitching .wordmark:before{opacity:.9;animation:sA .28s steps(2) infinite}
body.glitching .wordmark:after{opacity:.9;animation:sB .28s steps(2) infinite}
@keyframes sA{0%{clip-path:inset(10% 0 72% 0)}50%{clip-path:inset(58% 0 24% 0)}100%{clip-path:inset(31% 0 51% 0)}}
@keyframes sB{0%{clip-path:inset(66% 0 12% 0)}50%{clip-path:inset(22% 0 63% 0)}100%{clip-path:inset(45% 0 38% 0)}}
.tagline{margin-top:26px;font-size:clamp(12.5px,1.35vw,16px);letter-spacing:.26em;color:var(--ash);max-width:56ch}
.tagline b{color:var(--bone);font-weight:400;display:block;margin-bottom:12px;letter-spacing:.3em}
.herorow{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;align-items:center}
.btn{position:relative;display:inline-flex;align-items:center;gap:13px;padding:16px 30px;font-size:11.5px;
  letter-spacing:.24em;border:1px solid var(--bone);color:var(--bone);background:transparent;overflow:hidden;
  transition:color .3s,border-color .3s;will-change:transform}
.btn i{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.btn:before{content:"";position:absolute;inset:0;background:var(--blood);transform:translateY(101%);
  transition:transform .38s var(--e2);z-index:-1}
.btn:hover{border-color:var(--blood)}
.btn:hover:before{transform:translateY(0)}
.btn.solid{background:var(--blood);border-color:var(--blood);box-shadow:0 0 44px rgba(216,15,30,.3)}
.btn.solid:before{background:var(--bone)}
.btn.solid:hover{color:var(--void)}
.hstat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:52px;background:var(--edge);
  border:1px solid var(--edge);max-width:760px}
@media(max-width:720px){.hstat{grid-template-columns:repeat(2,1fr)}}
.hstat div{background:rgba(10,7,9,.6);padding:18px 20px}
.hstat b{display:block;font-family:var(--disp);font-size:29px;color:var(--bone);letter-spacing:.02em;transform:scaleY(1.14);transform-origin:left}
.hstat span{font-size:9px;letter-spacing:.22em;color:var(--dust)}
.hint{position:absolute;right:4px;bottom:110px;writing-mode:vertical-rl;font-size:9.5px;letter-spacing:.3em;color:var(--dust)}
.hint:after{content:"";display:block;width:1px;height:42px;margin:14px auto 0;background:linear-gradient(var(--blood),transparent);animation:drop 1.9s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(.2);transform-origin:top;opacity:0}45%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}
@media(max-width:640px){.hint{display:none}}

/* ══ MARQUEE / TICKER ════════════════════════ */
.marquee,.strip{overflow:hidden;white-space:nowrap;position:relative;z-index:11;border-block:1px solid var(--edge)}
.marquee{padding:15px 0;background:rgba(8,5,8,.55)}
.marquee .track{display:inline-flex;gap:42px;animation:sl 34s linear infinite;font-family:var(--disp);font-size:23px;
  letter-spacing:.06em;color:transparent;-webkit-text-stroke:1px rgba(234,227,214,.38);transform:scaleY(1.15)}
.marquee .track b{color:var(--blood);-webkit-text-stroke:0}
@keyframes sl{from{transform:translateX(0) scaleY(1.15)}to{transform:translateX(-50%) scaleY(1.15)}}
.strip{padding:13px 0;background:rgba(216,15,30,.06)}
.strip .t{display:inline-flex;gap:38px;font-size:10.5px;letter-spacing:.28em;color:var(--bone);animation:sl2 26s linear infinite}
.strip .t b{color:var(--blood);font-weight:400}
@keyframes sl2{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══ STEPS ═══════════════════════════════════ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge)}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:rgba(11,8,10,.74);padding:36px 30px;position:relative;overflow:hidden;transition:background .35s}
.step:hover{background:rgba(22,9,13,.88)}
.step:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blood);transition:width .5s}
.step:hover:after{width:100%}
.step .k{font-family:var(--disp);font-size:66px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(216,15,30,.5);
  transform:scaleY(1.14);transform-origin:left;display:block;margin-bottom:20px}
.step h3{font-family:var(--disp);font-size:24px;letter-spacing:.03em;transform:scaleY(1.13);transform-origin:left;margin-bottom:13px;font-weight:400}
.step p{color:var(--ash);font-size:13px;line-height:1.8}

/* ══ LAB ═════════════════════════════════════ */
.lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:var(--gut);align-items:start}
@media(max-width:1040px){.lab{grid-template-columns:1fr;gap:34px}}
.cassette{padding:22px}
.cassette:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 7px);pointer-events:none}
.caslabel{background:linear-gradient(180deg,#ece5d8,#cec4b3);color:#120c0e;padding:13px 15px;position:relative;overflow:hidden}
.caslabel:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.045) 0 1px,transparent 1px 3px)}
.caslabel .ln{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.2em;color:#6a5f57}
.caslabel h4{font-family:var(--disp);font-size:27px;letter-spacing:.02em;transform:scaleY(1.13);transform-origin:left;margin:6px 0 2px;font-weight:400}
.caslabel .hand{font-family:"Bradley Hand","Segoe Script","Comic Sans MS",cursive;font-size:14px;color:#8a2a17;transform:rotate(-1.4deg);display:inline-block}
.reels{display:flex;gap:18px;justify-content:center;margin:20px 0 4px}
.reel{width:96px;height:96px;border-radius:50%;position:relative;animation:spin 5.5s linear infinite;
  box-shadow:inset 0 0 18px rgba(0,0,0,.7),0 0 0 1px rgba(234,227,214,.10);
  background:radial-gradient(circle at 50% 50%,#100c0e 0 24%,#4a393e 24% 26%,#2b1f24 26% 60%,#3a2b30 60% 100%);
  border:1px solid rgba(234,227,214,.30)}
.reel.b{animation-duration:8.5s}
.reel:before{content:"";position:absolute;inset:24%;border-radius:50%;border:1px dashed rgba(234,227,214,.4)}
.reel:after{content:"";position:absolute;left:50%;top:50%;width:2px;height:44%;background:rgba(234,227,214,.35);transform-origin:top center;transform:translate(-50%,0)}
@keyframes spin{to{transform:rotate(360deg)}}
.readout{margin-top:18px;border:1px solid var(--edge);background:rgba(0,0,0,.5);display:grid;grid-template-columns:repeat(3,1fr)}
.readout div{padding:13px 14px;border-right:1px solid var(--edge)}
.readout div:last-child{border-right:0}
.readout span{display:block;font-size:9px;letter-spacing:.22em;color:var(--dust)}
.readout b{font-size:12.5px;letter-spacing:.14em;color:var(--cyan);font-weight:400}
.radarbox{margin-top:22px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center}
#radar{filter:drop-shadow(0 0 22px rgba(216,15,30,.32))}
.rkey{font-size:9.5px;letter-spacing:.18em;color:var(--dust);display:grid;gap:7px}
.rkey b{color:var(--bone);font-weight:400}
.dials{padding:28px}
.dial{margin-bottom:22px}
.dial:last-child{margin-bottom:0}
.dial .top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.2em;color:var(--dust);margin-bottom:9px}
.dial .top b{color:var(--bone);font-weight:400}
.dial .top .val{color:var(--blood)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:none}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--blood-dk),var(--blood));box-shadow:0 0 16px rgba(216,15,30,.45)}
input[type=range]::-moz-range-track{height:3px;background:linear-gradient(90deg,var(--blood-dk),var(--blood))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:24px;background:var(--bone);margin-top:-10.5px;border-radius:1px;
  box-shadow:0 0 16px rgba(234,227,214,.75),2px 0 0 rgba(255,47,176,.8),-2px 0 0 rgba(47,243,224,.8)}
input[type=range]::-moz-range-thumb{width:11px;height:24px;background:var(--bone);border:0;border-radius:1px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:10px;letter-spacing:.16em;padding:9px 13px;border:1px solid var(--edge);color:var(--ash);transition:.22s;user-select:none;background:transparent;font-family:inherit;cursor:none}
.chip:hover{color:var(--bone);border-color:var(--edge2)}
.chip.on{background:var(--blood);border-color:var(--blood);color:#fff;box-shadow:0 0 24px rgba(216,15,30,.45)}

/* ══ CARDS ═══════════════════════════════════ */
.mediatabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:26px}
.mtab{font-size:10px;letter-spacing:.22em;padding:11px 18px;border:1px solid var(--edge);color:var(--ash);transition:.22s;background:transparent;font-family:inherit;cursor:none}
.mtab:hover{color:var(--bone)}
.mtab.on{color:var(--void);background:var(--bone);border-color:var(--bone)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:18px}
.card{position:relative;display:flex;flex-direction:column;background:rgba(12,8,10,.76);
  border:1px solid var(--edge);overflow:hidden;transform-style:preserve-3d;will-change:transform;
  transition:border-color .35s,box-shadow .45s}
.card:hover{border-color:rgba(216,15,30,.55);box-shadow:0 26px 60px rgba(0,0,0,.72),0 0 46px rgba(216,15,30,.14)}
.card .lume{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;z-index:3;
  background:radial-gradient(220px 220px at var(--mxp,50%) var(--myp,50%),rgba(216,15,30,.20),transparent 70%)}
.card:hover .lume{opacity:1}
.art{height:178px;position:relative;overflow:hidden;background:#090607}
.fx{position:absolute;inset:0;transition:transform .6s var(--e1)}
.card:hover .fx{transform:scale(1.07)}
.sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(6,4,6,.95))}
.lines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.48) 0 1px,transparent 1px 3px);opacity:.5}
.code,.yr{position:absolute;top:10px;font-size:9px;letter-spacing:.2em;color:rgba(234,227,214,.72);z-index:2}
.code{left:11px}.yr{right:11px}
.sleeve{position:absolute;left:12px;right:12px;top:16px;z-index:1;pointer-events:none}
.sv-band{display:block;width:34px;height:3px;margin-bottom:9px}
.sv-t1,.sv-t2{display:block;font-family:var(--disp);letter-spacing:.01em;line-height:.92;
  color:rgba(240,234,222,.90);text-shadow:0 2px 10px rgba(0,0,0,.9),2px 0 rgba(255,47,176,.16),-2px 0 rgba(47,243,224,.16)}
.sv-t1{font-size:26px}
.sv-t2{font-size:15px;color:rgba(240,234,222,.62)}
.sv-rule{display:block;width:100%;height:1px;background:rgba(234,227,214,.20);margin:10px 0 7px}
.sv-cert{font-family:var(--mono);font-size:8px;letter-spacing:.2em;color:rgba(234,227,214,.5)}
.tile .sv-t1{font-size:21px}.tile .sv-t2{font-size:12px}
.wear{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.wear i{position:absolute;left:-6%;width:112%;background:rgba(234,227,214,.75);
  filter:blur(.4px);mix-blend-mode:overlay}
.glyph{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scaleY(1.2);font-family:var(--disp);
  font-size:82px;letter-spacing:-.02em;color:rgba(234,227,214,.13);white-space:nowrap;pointer-events:none;
  text-shadow:3px 0 rgba(255,47,176,.22),-3px 0 rgba(47,243,224,.22)}
.badge{position:absolute;left:11px;bottom:11px;font-size:8.5px;letter-spacing:.2em;padding:5px 9px;
  background:rgba(216,15,30,.92);color:#fff;z-index:2}
.card.top .badge{background:var(--bone);color:var(--void)}
.cbody{padding:17px 17px 19px;display:flex;flex-direction:column;flex:1}
.cbody h4{font-family:var(--disp);font-size:20px;letter-spacing:.02em;transform:scaleY(1.12);transform-origin:left;font-weight:400;line-height:1.05}
.cmeta{font-size:9.5px;letter-spacing:.18em;color:var(--dust);margin-top:8px}
.why{font-size:11.5px;color:var(--ash);line-height:1.65;margin-top:12px;border-left:2px solid rgba(216,15,30,.5);padding-left:11px}
.match{margin-top:auto;padding-top:15px}
.match .row{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.18em;color:var(--dust);margin-bottom:6px}
.match .row b{color:var(--blood);font-weight:400;font-size:13px}
.bar{height:4px;background:rgba(234,227,214,.09);position:relative;overflow:hidden}
.bar i{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--blood-dk),var(--blood),var(--ember));
  box-shadow:0 0 15px rgba(216,15,30,.7);transition:width .9s var(--e1)}
.tagrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:13px}
.tg{font-size:8.5px;letter-spacing:.15em;padding:5px 8px;border:1px solid var(--edge);color:var(--dust)}
.empty{grid-column:1/-1;text-align:center;color:var(--dust);font-size:11.5px;letter-spacing:.24em;padding:60px 0}

/* ══ RAILS ═══════════════════════════════════ */
.shelf{margin-bottom:30px}
.shelf .hd{display:flex;justify-content:space-between;align-items:baseline;font-size:9.5px;letter-spacing:.26em;
  color:var(--dust);border-bottom:1px solid var(--edge);padding-bottom:11px;margin-bottom:16px}
.shelf .hd b{color:var(--bone);font-weight:400}
.rail{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-thumb{background:var(--blood-dk)}
.tile{flex:0 0 196px;scroll-snap-align:start;border:1px solid var(--edge);background:rgba(12,8,10,.72);
  transition:transform .35s var(--e1),border-color .35s;position:relative}
.tile:hover{border-color:rgba(216,15,30,.55);transform:translateY(-5px)}
.tile .th{height:238px;position:relative;overflow:hidden}
.tile .th:after{content:"";position:absolute;left:5px;right:0;top:0;height:24px;opacity:.45;
  background:repeating-linear-gradient(90deg,rgba(234,227,214,.16) 0 3px,transparent 3px 9px)}
.tile .glyph{font-size:60px}
.glyph{display:none}
.tile .tb{padding:13px;border-top:1px solid var(--edge)}
.tile h5{font-family:var(--disp);font-size:16px;font-weight:400;transform:scaleY(1.11);transform-origin:left;letter-spacing:.02em}
.tile p{font-size:9px;letter-spacing:.16em;color:var(--dust);margin-top:5px}
.spine{position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--blood),var(--blood-dk));opacity:.9;z-index:2}

/* ══ SPLIT ═══════════════════════════════════ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge);border:1px solid var(--edge)}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.cell{background:rgba(11,8,10,.76);padding:38px 32px;position:relative;overflow:hidden}
.cell h3{font-family:var(--disp);font-size:27px;font-weight:400;transform:scaleY(1.13);transform-origin:left;margin-bottom:14px}
.cell p{color:var(--ash);font-size:13px;line-height:1.8}
.cell ul{list-style:none;margin-top:18px;display:grid;gap:10px}
.cell li{font-size:11.5px;letter-spacing:.08em;color:var(--ash);padding-left:20px;position:relative}
.cell li:before{content:"▸";position:absolute;left:0;color:var(--blood)}

/* ══ JOIN / FOOTER ═══════════════════════════ */
#join .shead{grid-template-columns:1fr;text-align:center;justify-items:center}
#join .smeta:after{left:50%;transform:translateX(-50%)}
#join .stitle{transform-origin:center}
.joinform{display:flex;max-width:540px;margin:32px auto 0;border:1px solid var(--bone)}
.joinform input{flex:1;background:transparent;border:0;color:var(--bone);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.18em;padding:17px 19px;outline:none;cursor:none}
.joinform input::placeholder{color:var(--dust)}
.joinform button{background:var(--blood);border:0;color:#fff;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.24em;padding:0 26px;cursor:none;transition:.25s}
.joinform button:hover{background:var(--bone);color:var(--void)}
.finelet{margin-top:16px;font-size:9.5px;letter-spacing:.2em;color:var(--dust);text-align:center}
footer{border-top:1px solid var(--edge);padding:54px 0 42px;position:relative;z-index:10;background:rgba(4,3,5,.72)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid h6{font-size:9.5px;letter-spacing:.28em;color:var(--blood);margin-bottom:14px;font-weight:400}
.fgrid a{display:block;font-size:11.5px;color:var(--ash);padding:5px 0;transition:.2s}
.fgrid a:hover{color:var(--bone);padding-left:6px}
.bigfoot{font-family:var(--disp);font-size:clamp(52px,13vw,190px);line-height:.8;color:transparent;
  -webkit-text-stroke:1px rgba(234,227,214,.1);transform:scaleY(1.15);transform-origin:left;margin-top:36px;
  user-select:none;white-space:nowrap;overflow:hidden}
.fbot{margin-top:40px;padding-top:24px;border-top:1px solid var(--edge);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;font-size:9.5px;letter-spacing:.2em;color:var(--dust)}
body.shake main,body.shake nav,body.shake footer,body.shake #index,body.shake .marquee,body.shake .strip{animation:shk .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shk{
 0%{transform:translate(0,0)}12%{transform:translate(-9px,4px)}24%{transform:translate(8px,-6px)}
 38%{transform:translate(-6px,-3px)}52%{transform:translate(5px,5px)}68%{transform:translate(-3px,2px)}
 84%{transform:translate(2px,-2px)}100%{transform:translate(0,0)}}
#howto{position:fixed;left:50%;bottom:60px;transform:translateX(-50%);z-index:96;pointer-events:none;
  font-size:10px;letter-spacing:.26em;color:var(--ash);white-space:nowrap;text-align:center;
  border:1px solid var(--edge);background:rgba(8,5,8,.72);backdrop-filter:blur(8px);padding:11px 20px;
  opacity:0;transition:opacity .8s}
#howto.show{opacity:1}
#howto b{color:var(--blood);font-weight:400}
@media(max-width:820px),(pointer:coarse){#howto{display:none}}

/* ══════════════════════════════════════════════════════════════
   READABILITY LAYER
   mono is UI chrome only · prose is sans · panels are solid ground
   ══════════════════════════════════════════════════════════════ */
.navlinks,.navcta,.hmeta,.smeta .k,.plabel,.cmeta,.dial .top,.hstat span,.tg,.mtab,.chip,
.rkey,.shelf .hd,.finelet,.fbot,.tile p,.code,.yr,.badge,.marquee .track,.strip .t,
.readout span,.readout b,.fgrid h6,.hint,.empty,#index a,#howto,#boot .log,.joinform input,
.joinform button,.match .row,.brand{font-family:var(--mono)}

/* tracking: readable, not vibrating */
.navlinks{letter-spacing:.14em;font-size:11px}
.navcta{letter-spacing:.13em;font-size:11px}
.hmeta{letter-spacing:.14em;font-size:10.5px;line-height:1.5}
.smeta .k{letter-spacing:.16em;font-size:10.5px}
.plabel{letter-spacing:.15em;font-size:10.5px}
.cmeta{letter-spacing:.09em;font-size:10.5px}
.dial .top{letter-spacing:.11em;font-size:11px}
.hstat span{letter-spacing:.12em;font-size:10px}
.tg{letter-spacing:.07em;font-size:9.5px}
.mtab{letter-spacing:.13em;font-size:11px}
.chip{letter-spacing:.09em;font-size:11px}
.rkey{letter-spacing:.09em;font-size:10.5px;line-height:1.5}
.shelf .hd{letter-spacing:.15em;font-size:10.5px}
.finelet,.fbot{letter-spacing:.11em;font-size:10.5px}
.tile p{letter-spacing:.06em;font-size:10px}
.badge{letter-spacing:.13em;font-size:9.5px}
.marquee .track{letter-spacing:.04em}
.strip .t{letter-spacing:.16em;font-size:11px}
.readout span{letter-spacing:.13em;font-size:9.5px}
.readout b{letter-spacing:.06em;font-size:13px}
.fgrid h6{letter-spacing:.18em;font-size:10.5px}
#index a{letter-spacing:.13em;font-size:10.5px}
.match .row{letter-spacing:.11em;font-size:10.5px}
.hint{letter-spacing:.2em}
#howto{letter-spacing:.14em;font-size:11px}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--blood-lt);outline-offset:3px;cursor:auto}
body.kbd{cursor:auto}
body.kbd #blade,body.kbd #ring{opacity:.25}
/* small red type needs a lighter red or it disappears on black */
.smeta .k,.plabel b,.dial .top .val,.strip .t b,.fgrid h6,#fxbtn u,.hmeta b,.match .row b,#howto b{color:var(--blood-lt)}
.tagline b{color:var(--bone)}
.step p,.cell p,.cell li,.why{color:#cfc7ba}
#howto{bottom:74px}
.code,.yr{letter-spacing:.1em;font-size:9.5px}

/* prose: sans, normal tracking, generous leading */
.tagline{font-family:var(--sans);letter-spacing:.005em;line-height:1.7;font-size:clamp(15px,1.15vw,17px);color:var(--ash)}
.tagline b{font-family:var(--mono);letter-spacing:.2em;font-size:12.5px;color:var(--blood);margin-bottom:14px}
.sdesc{font-family:var(--sans);letter-spacing:0;font-size:15.5px;line-height:1.75;color:var(--ash)}
.step p,.cell p,.cell li{font-family:var(--sans);letter-spacing:0;font-size:14.5px;line-height:1.7;color:var(--ash)}
.why{font-family:var(--sans);letter-spacing:0;font-size:13.5px;line-height:1.6;color:var(--ash)}
.fgrid a{font-family:var(--sans);letter-spacing:0;font-size:14px}
footer p{font-family:var(--sans);letter-spacing:0;font-size:14px;line-height:1.7}

/* panels: opaque enough that text never fights the smoke */
.panel,.step,.cell,.card,.tile,.hstat div{background-color:rgba(9,7,9,.93)}
.marquee{background:rgba(7,5,7,.9)}
.strip{background:rgba(24,4,8,.9)}
nav.stuck{background:rgba(5,4,6,.92)}
footer{background:rgba(4,3,5,.94)}
.hstat{background:var(--edge)}
/* a soft plate behind the long-form column so smoke never crawls under the words */
.sdesc,.tagline{text-shadow:0 1px 14px rgba(0,0,0,.95),0 0 30px rgba(0,0,0,.75)}
.stitle,.wordmark,.step h3,.cell h3,.cbody h4,.tile h5{text-rendering:optimizeLegibility}

/* dropout bars only in FULL — they were tearing across body copy */
.dropout{display:none!important}
body.fx-full.glitching .dropout{display:block!important}
body:not(.fx-full) .wordmark:before,body:not(.fx-full) .wordmark:after{opacity:0!important;animation:none!important}

/* FX control */
#fxbtn,#sndbtn{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dust);border:1px solid var(--edge);
  padding:10px 13px;background:transparent;transition:.25s;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
#fxbtn:hover,#sndbtn:hover{color:var(--bone);border-color:var(--edge2)}
#fxbtn u,#sndbtn u{text-decoration:none;color:var(--blood);letter-spacing:.05em}
.navright{display:flex;align-items:center;gap:10px}
@media(max-width:1080px){#sndbtn{display:none}}
@media(max-width:520px){#fxbtn{display:none}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}

/* ══════════════════════════════════════════════════════════════
   THE CAMERA
   shake, letterbox, depth-dread and weather — the parts that make
   it read as footage rather than a web page
   ══════════════════════════════════════════════════════════════ */
main,nav,footer{transform:translate(var(--shx,0px),var(--shy,0px))}
body.shake main,body.shake nav,body.shake footer{transform:none}

/* letterbox — snaps in on the chop, eases back out */
#bars{position:fixed;inset:0;z-index:118;pointer-events:none}
#bars i{position:absolute;left:0;width:100%;height:0;background:#000;
  box-shadow:0 0 30px rgba(0,0,0,.9);transition:height .58s cubic-bezier(.22,.8,.24,1)}
#bars i:first-child{top:0}
#bars i:last-child{bottom:0}
body.cine #bars i{height:8.5vh;transition:height .085s cubic-bezier(.5,0,.1,1)}
body.cine .osd,body.cine #howto{opacity:0;transition:opacity .1s}

/* the deeper you scroll, the less light there is */
#dread{position:fixed;inset:0;z-index:89;pointer-events:none;opacity:0;
  transition:opacity .5s linear;
  background:radial-gradient(ellipse 98% 74% at 50% 44%,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 76%,rgba(0,0,0,.93) 100%)}

/* something outside is having weather */
#bolt{position:fixed;inset:0;z-index:91;pointer-events:none;opacity:0;mix-blend-mode:screen}
#bolt.l{background:linear-gradient(100deg,rgba(184,201,224,.6),rgba(184,201,224,.06) 46%,rgba(0,0,0,0) 66%)}
#bolt.r{background:linear-gradient(260deg,rgba(184,201,224,.6),rgba(184,201,224,.06) 46%,rgba(0,0,0,0) 66%)}
#bolt.fire{animation:bolt 1.15s steps(1) 1}
@keyframes bolt{
  0%{opacity:0}2%{opacity:1}6%{opacity:.04}9%{opacity:.85}13%{opacity:.02}
  19%{opacity:.6}26%{opacity:.08}31%{opacity:.28}38%{opacity:0}100%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  main,nav,footer{transform:none}
  #bolt,#bars{display:none}
  #dread{opacity:0!important}
}

/* ── the algorithm bleeds ────────────────────────────────────────
   A card's match score drives how wet it is. The thing the machine
   is surest about is the thing dripping down the wall. ── */
.card{--wet:0}
.card .seep{position:absolute;left:0;right:0;top:178px;height:0;z-index:4;pointer-events:none;
  opacity:calc(var(--wet) * .62)}
.card .seep:before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;
  background:linear-gradient(90deg,transparent,var(--blood) 18%,var(--blood-lt) 50%,var(--blood) 82%,transparent);
  box-shadow:0 0 calc(6px + var(--wet)*18px) rgba(216,15,30,.8)}
.card .seep:after{content:"";position:absolute;left:0;right:0;top:0;height:64px;
  background:linear-gradient(180deg,rgba(216,15,30,.17),rgba(216,15,30,0))}
.card .seep i{position:absolute;top:0;width:2px;height:0;border-radius:0 0 2px 2px;
  background:linear-gradient(180deg,rgba(216,15,30,.92),rgba(88,3,10,.45));
  animation-name:seep;animation-timing-function:cubic-bezier(.3,0,.72,1);animation-iteration-count:infinite}
@keyframes seep{0%{height:0;opacity:0}10%{opacity:.92}
  68%{height:var(--sh,20px);opacity:.92}100%{height:var(--sh,20px);opacity:0}}
.tile .seep{display:none}

/* ── one frame you are not sure you saw ── */
#sub{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:0;background:#0a0002;
  display:flex;align-items:center;justify-content:center}
#sub b{font-family:var(--disp);font-size:min(21vw,232px);line-height:1;color:#c8bfae;
  letter-spacing:.02em;font-weight:400;transform:scaleY(1.15);
  text-shadow:7px 0 #7a0510,-7px 0 #16292c}
#sub.fire{animation:sub .05s steps(1) 1}          /* ~3 frames. long enough to land, short enough to doubt */
@keyframes sub{0%{opacity:1}99%{opacity:1}100%{opacity:0}}

/* ── the tape has been left running ── */
body.standby .tracking{opacity:.5;animation-duration:5.5s}
body.standby .slowlines{opacity:.6}

@media(prefers-reduced-motion:reduce){#sub{display:none}.card .seep i{animation:none;height:0}}