/* =====================================================================
   EL TRONO DEL FLOW · Batalla de Barberos
   Brutalismo + graffiti. Telepacífico.
   Las imágenes de textura se inyectan por JS como variables --u-*
   ===================================================================== */
@font-face{font-family:'Londrina Solid';src:url(../assets/fonts/londrina-solid-latin-900-normal.woff2) format('woff2');font-weight:900;font-display:block}
@font-face{font-family:'Londrina Solid';src:url(../assets/fonts/londrina-solid-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Sedgwick Ave Display';src:url(../assets/fonts/sedgwick-ave-display-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Archivo';src:url(../assets/fonts/archivo-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'Archivo';src:url(../assets/fonts/archivo-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'Archivo';src:url(../assets/fonts/archivo-latin-900-normal.woff2) format('woff2');font-weight:900;font-display:block}
@font-face{font-family:'Rubik Spray Paint';src:url(../assets/fonts/rubik-spray-paint-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:block}

:root{
  --ink:#0d0b0a;--bone:#e6dcc6;--y:#ffd500;--pk:#ff2e93;--tl:#12c2aa;--rd:#ff3b1f;--bl:#2a62ff;--pu:#7a2bd1;--gr:#39ff14;
  --ft:'Londrina Solid',Impact,'Arial Black',sans-serif;
  --fg:'Sedgwick Ave Display','Comic Sans MS',cursive;
  --fb:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs:'Rubik Spray Paint',Impact,sans-serif;
  --mx:0;--my:0;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b0908;overflow:hidden;color:#fff;font-family:var(--fb);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:none;-webkit-user-drag:none;user-select:none}
h1,h2,h3,h4,p,figure{margin:0}

/* ---------- viewport + escenario 1920×1080 ---------- */
#vp{position:fixed;inset:0;overflow:hidden;touch-action:none;background:var(--u-brick-dark,#120d0b) center/cover;cursor:none}
#vp::before{content:'';position:absolute;inset:0;background:rgba(5,4,4,.72)}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:#111;perspective:2400px;will-change:transform}
#stage::after{content:'';position:absolute;inset:0;background:var(--u-grain);opacity:.5;mix-blend-mode:overlay;pointer-events:none;z-index:950}
.slide{position:absolute;inset:0;overflow:hidden;visibility:hidden;contain:layout paint}
.slide.vis{visibility:visible}
.slide:not(.vis) *{animation-play-state:paused!important}
.abs{position:absolute}
.slide>.dc,.slide>h1,.slide>h2,.slide>h3,.slide>p,.slide>figure,.slide>article,.slide>div,.slide>span,.slide>svg,.slide>i{position:absolute}
.slide>.abs{position:absolute}
.dc{position:absolute}
.lp{width:100%;height:100%;transform-origin:50% 50%}
.px{position:absolute;inset:0;pointer-events:none;translate:calc(var(--mx)*var(--d,0)*70px) calc(var(--my)*var(--d,0)*46px)}
.px>*{pointer-events:auto}

/* tipografías */
.T{font-family:var(--ft);font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:.01em}
.G{font-family:var(--fg);font-weight:400;line-height:1}
.S{font-family:var(--fs);font-weight:400;line-height:1}
.B{font-family:var(--fb);font-weight:500;font-size:26px;line-height:1.32}
.B b,.B strong{font-weight:900}
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block;will-change:transform;transform-origin:50% 62%;transition:color .18s,text-shadow .18s}
.ch.hit{color:var(--hit,#ff2e93)}
.G .ch,.S .ch{text-transform:none}
h2.G,h1.G{text-transform:uppercase}

/* materiales */
.ic{width:100%;height:100%;display:block;overflow:visible}
.tw{filter:drop-shadow(9px 11px 0 rgba(0,0,0,.88))}
.torn{position:relative;overflow:hidden}
.tw>img.torn{width:100%;height:100%;object-fit:cover}
.paper{position:relative;color:#0d0b0a}
.paper::after{content:'';position:absolute;inset:0;background:var(--u-crumple) center/cover;mix-blend-mode:multiply;opacity:.28;pointer-events:none}
.pk{background:var(--pk)}.yl{background:var(--y)}.tl{background:var(--tl)}.paperw{background:#f3ecdc}
.tape{position:absolute;background:repeating-linear-gradient(-45deg,rgba(255,213,0,.92) 0 18px,rgba(20,16,10,.92) 18px 36px);box-shadow:0 3px 0 rgba(0,0,0,.35);z-index:8;opacity:.96}
.stk-tag{position:absolute;font:400 40px/1 var(--fg);padding:6px 20px 10px;border:5px solid #0d0b0a;box-shadow:6px 6px 0 #0d0b0a;color:#0d0b0a;text-transform:uppercase;white-space:nowrap;z-index:9}
.stk{display:block;padding:16px 22px;border:6px solid #000;box-shadow:10px 10px 0 #000;font:900 29px/1.1 var(--fb);color:#000;text-transform:uppercase;letter-spacing:-.01em;background:var(--y)}
.vig{pointer-events:none}
.rv{position:relative;overflow:hidden;background:#111}
.rv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rv .hi{-webkit-mask-image:radial-gradient(circle var(--rr,0px) at var(--rx,50%) var(--ry,50%),#000 62%,transparent 100%);mask-image:radial-gradient(circle var(--rr,0px) at var(--rx,50%) var(--ry,50%),#000 62%,transparent 100%)}

/* loops */
@keyframes k-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(1.6deg)}}
@keyframes k-wobble{0%,100%{transform:rotate(-2.2deg) translateY(0)}50%{transform:rotate(2.2deg) translateY(-12px)}}
@keyframes k-spin{to{transform:rotate(360deg)}}
@keyframes k-spinr{to{transform:rotate(-360deg)}}
@keyframes k-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
@keyframes k-snip{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(14deg) scale(1.06)}}
@keyframes k-flick{0%,18%,22%,60%,64%,100%{opacity:1}19%,21%,62%{opacity:.18}}
@keyframes k-drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(34px,-26px) rotate(7deg)}}
@keyframes k-run{to{transform:translateX(-50%)}}
@keyframes k-runv{to{transform:translateY(-50%)}}
.lp{animation-duration:var(--dur,5s);animation-delay:var(--dl,0s);animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.lp.float{animation-name:k-float}.lp.wobble{animation-name:k-wobble}.lp.spin{animation-name:k-spin;animation-timing-function:linear}
.lp.pulse{animation-name:k-pulse}.lp.snip{animation-name:k-snip}.lp.flick{animation-name:k-flick;animation-timing-function:linear}.lp.drift{animation-name:k-drift}
.run{display:flex;width:max-content;animation:k-run var(--dur,26s) linear infinite}
.run span{font:900 46px/70px var(--ft);text-transform:uppercase;color:#000;padding:0 30px;white-space:nowrap}
.run b{width:22px;height:22px;background:var(--pk);align-self:center;transform:rotate(45deg);flex:0 0 auto}
.drip{position:absolute;width:12px;border-radius:0 0 12px 12px;transform-origin:50% 0;animation:k-drip 6s ease-in infinite;z-index:3}
@keyframes k-drip{0%{transform:scaleY(0);opacity:0}8%{opacity:1}55%,80%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ---------- barras y controles ---------- */
#loader{position:fixed;inset:0;z-index:2000;background:#0d0b0a;display:grid;place-items:center;transition:clip-path .9s cubic-bezier(.7,0,.2,1);clip-path:inset(0 0 0 0)}
#loader.out{clip-path:inset(0 0 100% 0)}
.ld-in{text-align:center;width:min(520px,80vw)}
.ld-t{font:900 clamp(54px,9vw,120px)/.86 var(--ft);color:#ffd500;text-transform:uppercase;text-shadow:6px 6px 0 #ff2e93}
.ld-bar{height:26px;border:5px solid #fff;margin:34px 0 14px;position:relative;overflow:hidden}
.ld-bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:repeating-linear-gradient(-45deg,#ffd500 0 16px,#0d0b0a 16px 32px)}
.ld-s{font:400 30px var(--fg);color:#fff}
#cursor{position:fixed;left:0;top:0;z-index:1500;pointer-events:none;mix-blend-mode:difference;opacity:0}
#cursor .ring{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border:4px solid #fff;border-radius:50%;transition:width .25s,height .25s,left .25s,top .25s,background .25s}
#cursor .dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;background:#fff;border-radius:50%}
#cursor.hot .ring{left:-40px;top:-40px;width:80px;height:80px;background:#fff}
@media (hover:none){#cursor{display:none}#vp{cursor:auto}}
#trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
#topbar,#botbar{position:fixed;z-index:1200;background:#0d0b0a;color:#fff;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
#topbar{left:0;right:0;top:0;height:68px;display:flex;align-items:center;gap:18px;padding:0 22px;border-bottom:5px solid #ffd500;transform:translateY(-110%)}
#topbar .tbl{height:46px;width:auto}
.tbt{flex:1;display:flex;flex-direction:column;line-height:1.05}
.tbt b{font:900 26px var(--ft);text-transform:uppercase;letter-spacing:.02em;color:#ffd500}
.tbt span{font:500 14px var(--fb);color:#cfc8b8}
#botbar{left:50%;bottom:16px;translate:-50% 0;transform:translateY(160%);display:flex;align-items:center;gap:10px;padding:10px 14px;border:5px solid #ffd500;box-shadow:8px 8px 0 #ff2e93;max-width:calc(100vw - 20px)}
body.top-on #topbar{transform:none}
body.bot-on #botbar{transform:none}
#topbar:focus-within{transform:none}#botbar:focus-within{transform:none}
@media (hover:none){#botbar{transform:none;opacity:.92}}
.ib{width:46px;height:46px;display:grid;place-items:center;background:#ffd500;color:#0d0b0a;border:4px solid #000;box-shadow:4px 4px 0 #000;transition:transform .12s,box-shadow .12s,background .12s;padding:0}
.ib svg{width:24px;height:24px}
.ib:hover{background:#ff2e93;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.ib:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}
.ib:focus-visible,.zv:focus-visible,.dots button:focus-visible{outline:4px solid #fff;outline-offset:3px}
.zv{min-width:74px;height:46px;background:#000;color:#ffd500;border:4px solid #ffd500;font:900 22px var(--ft);letter-spacing:.04em}
.zv:hover{background:#ffd500;color:#000}
.cnt{font:900 26px var(--ft);color:#fff;min-width:96px;text-align:center;letter-spacing:.04em}
.sep{width:4px;height:34px;background:#555;margin:0 6px}
.dots{display:flex;gap:7px;align-items:center;padding:0 10px}
.dots button{width:14px;height:14px;padding:0;border:3px solid #fff;background:transparent;transition:transform .15s,background .15s;position:relative}
.dots button:hover{transform:scale(1.5);background:#ff2e93}
.dots button.on{background:#ffd500;border-color:#ffd500;transform:scale(1.35) rotate(45deg)}
.dots button[data-t]:hover::after{content:attr(data-t);position:absolute;left:50%;bottom:30px;translate:-50% 0;white-space:nowrap;background:#ffd500;color:#000;font:900 18px var(--ft);padding:4px 10px;border:3px solid #000;text-transform:uppercase;z-index:3}
@media (max-width:900px){.dots{display:none}.sep{display:none}}

/* =====================================================================
   1 · PORTADA
   ===================================================================== */
.s1{background:#0d0b0a}
.s1 #wall{left:0;top:0;width:1920px;height:1080px}
.s1 .vig{inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 42%,rgba(0,0,0,.72) 100%)}
.c1-tp{left:810px;top:26px;width:300px;text-align:center;z-index:6}
.c1-tp .tpw{width:96px;margin:0 auto}
.c1-tp .G{display:block;font-size:34px;color:#fff;margin-top:2px}
.c1-tal{left:46px;top:50px;transform:rotate(-8deg);z-index:6}
.c1-tal h2{font-size:166px;color:#ffd500;text-shadow:9px 9px 0 #000}
.c1-emo{left:1330px;top:66px;transform:rotate(6deg);z-index:6}
.c1-emo h2{font-size:150px;color:#ff2e93;text-shadow:9px 9px 0 #000}
.c1-cul{left:50px;top:800px;transform:rotate(-4deg);z-index:6}
.c1-cul h2{font-size:76px;color:#12c2aa;text-shadow:7px 7px 0 #000;letter-spacing:.02em}
.c1-fre{left:1380px;top:790px;transform:rotate(-5deg);z-index:6}
.c1-fre h2{font-size:100px;color:#fff;text-shadow:8px 8px 0 #000}
.c1-und{left:0;bottom:-34px;width:100%;height:34px;color:#ff2e93}
.c1-crown{left:1180px;top:270px;width:190px;height:124px;color:#ffd500;transform:rotate(14deg);z-index:7}
.c1-logo{left:500px;top:280px;width:920px;z-index:5;filter:drop-shadow(0 18px 0 rgba(0,0,0,.5))}
.c1-logo img{width:100%}
.s1 .dec{z-index:6}
.hint{left:560px;top:930px;width:800px;text-align:center;font-size:46px;color:#fff;z-index:7;text-shadow:4px 4px 0 #000}
.runner{left:-30px;right:-30px;bottom:22px;height:76px;background:#ffd500;border-block:6px solid #000;transform:rotate(-1.2deg);overflow:hidden;z-index:8}

/* =====================================================================
   2 · LA BARBERÍA ES TENDENCIA
   ===================================================================== */
.s2{background:var(--bone)}
.paper-bg{inset:0;background:var(--bone)}
.paper-bg::after{content:'';position:absolute;inset:0;background:var(--u-crumple) center/cover;mix-blend-mode:multiply;opacity:.3}
.t2{left:70px;top:46px;font-size:212px;color:#0d0b0a;z-index:6;transform:rotate(-2deg);transform-origin:0 100%;white-space:nowrap}
.t2 .ch{text-shadow:0 0 0 transparent}
.hl2{left:60px;top:268px;width:1330px;height:150px;background:var(--y);transform-origin:0 50%;transform:rotate(-2deg);z-index:4}
.ph2{left:1370px;top:90px;width:450px;height:600px;z-index:5}
.ph2 .tw{width:100%;height:100%}
.ph2 .stk-tag{z-index:9}
.pl{position:absolute;transform:rotate(var(--r,0deg));z-index:5;transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.pl .torn{padding:32px 38px 40px}
.pl:hover{translate:0 -16px}
.pl1{left:70px;top:470px;width:570px;--r:-2deg}
.pl2{left:690px;top:520px;width:560px;--r:1.5deg}
.pl3{left:1290px;top:715px;width:520px;--r:-1.5deg}
.pl h3{font-size:54px;line-height:.9;margin-bottom:14px}
.pl p{font-size:24.5px}
.vstrip{right:0;top:0;width:78px;height:1080px;background:#0d0b0a;overflow:hidden;z-index:12}
.vrun{display:flex;flex-direction:column;align-items:center;animation:k-runv var(--dur,18s) linear infinite;width:100%}
.vrun span{writing-mode:vertical-rl;transform:rotate(180deg);font:900 50px var(--ft);color:#ffd500;padding:26px 0;text-transform:uppercase}
.vrun i{width:20px;height:20px;background:var(--pk);transform:rotate(45deg);flex:0 0 auto;margin:6px 0}
.s2 .dec{z-index:7}

/* =====================================================================
   3 · ¿POR QUÉ ES NOVEDOSO?
   ===================================================================== */
.s3{background:#07060a}
.city{inset:0;overflow:hidden}
.citytrack{position:absolute;left:0;top:-110px;width:2944px;height:1308px;background:var(--u-city) repeat-x 0 0/1472px 1308px;animation:k-pan 110s linear infinite;opacity:.95}
@keyframes k-pan{to{transform:translateX(-1472px)}}
.shade3{inset:0;background:linear-gradient(90deg,rgba(7,6,10,.9) 0,rgba(7,6,10,.7) 42%,rgba(7,6,10,.1) 100%)}
.t3{left:70px;top:44px;font-size:184px;color:#fff;z-index:5;text-shadow:9px 9px 0 #ff2e93}
.f360{position:absolute;left:70px;top:430px;width:800px;z-index:5}
.f360 h3{font-size:96px;color:#ffd500;margin:0 0 16px;transform:rotate(-3deg);transform-origin:0 50%}
.f360 .s{font-size:27px;background:#000;border-left:12px solid var(--pk);padding:14px 22px;margin:0 0 15px;color:#fff;box-shadow:8px 8px 0 rgba(255,255,255,.12)}
.f360 .s:nth-of-type(2){border-color:var(--y)}.f360 .s:nth-of-type(3){border-color:var(--tl)}
.f360 .s b{color:var(--y)}
.vinyl{left:1040px;top:200px;width:820px;height:820px;z-index:2}
.vdisc{position:absolute;inset:62px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#08080a 0 3px,#17171d 3px 6px);box-shadow:0 0 0 10px #000,0 34px 0 rgba(0,0,0,.55);animation:k-spin 10s linear infinite}
.vdisc::after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 18%,rgba(255,255,255,.16) 24%,transparent 30% 68%,rgba(255,255,255,.12) 74%,transparent 80%)}
.vlabel{position:absolute;inset:30%;border-radius:50%;background:var(--y);display:grid;place-items:center;border:9px solid #000;z-index:2}
.vlabel span{font-size:132px;color:#000;transform:rotate(-8deg)}
.vring{position:absolute;inset:0;width:100%;height:100%;animation:k-spinr 36s linear infinite;overflow:visible}
.vring text{font:900 50px var(--ft);fill:#ffd500;letter-spacing:7px;text-transform:uppercase}
.swarm{position:absolute;left:960px;top:150px;width:900px;height:880px;z-index:6;pointer-events:none}
.swarm>*{pointer-events:auto}
.sw{position:absolute}
.sw .stk{width:100%}
.sw.a{left:20px;top:70px;width:350px}.sw.b{left:580px;top:10px;width:290px}.sw.c{left:580px;top:200px;width:320px}
.sw.d{left:0px;top:310px;width:290px}.sw.e{left:620px;top:650px;width:280px}.sw.f{left:10px;top:690px;width:330px}.sw.g{left:330px;top:790px;width:500px}
.sw.a .stk{background:var(--y)}.sw.b .stk{background:var(--pk)}.sw.c .stk{background:#fff}.sw.d .stk{background:var(--tl)}.sw.e .stk{background:var(--y)}.sw.f .stk{background:var(--pk)}.sw.g .stk{background:#fff}
.act{position:absolute;left:30px;top:-60px;font-size:84px;color:#fff;transform:rotate(-3deg);text-shadow:6px 6px 0 #ff2e93;white-space:nowrap}

/* =====================================================================
   4 · DE OFICIO DE BARRIO A POTENCIA
   ===================================================================== */
.s4{background:var(--y)}
.halft{inset:0;background:radial-gradient(circle,#0d0b0a 1.7px,transparent 2.2px) 0 0/16px 16px;opacity:.14;-webkit-mask-image:linear-gradient(180deg,#000,transparent 65%);mask-image:linear-gradient(180deg,#000,transparent 65%)}
.t4{left:76px;top:44px;font-size:134px;color:#0d0b0a;z-index:6;white-space:nowrap}
.stat{position:absolute;left:90px;z-index:6}
.st1{top:330px}.st2{top:575px}
.num{font-family:var(--fs);font-weight:400;font-size:150px;line-height:1;color:var(--pk);-webkit-text-stroke:9px #0d0b0a;paint-order:stroke fill;text-shadow:10px 10px 0 #0d0b0a;display:inline-block}
.stat p{max-width:780px;font:700 29px/1.25 var(--fb);color:#0d0b0a;margin-top:6px}
.stat:hover .num{animation:k-shake .35s linear infinite}
@keyframes k-shake{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-6px,3px) rotate(-1.2deg)}40%{transform:translate(5px,-4px) rotate(1deg)}60%{transform:translate(-4px,-3px)}80%{transform:translate(6px,2px) rotate(-.8deg)}}
.notes{position:absolute;left:1000px;top:300px;width:850px;z-index:6}
.note{background:#fff;border:6px solid #0d0b0a;box-shadow:12px 12px 0 #0d0b0a;padding:20px 28px 22px;margin-bottom:36px;transform:rotate(-1.4deg);transition:translate .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.note:nth-child(2){transform:rotate(1.1deg);margin-left:34px}.note:nth-child(3){transform:rotate(-.7deg)}
.note:hover{translate:-12px -10px;box-shadow:20px 20px 0 var(--pk)}
.note h3{font:900 50px/.92 var(--ft);text-transform:uppercase;color:#0d0b0a}
.note p{font:500 26px/1.28 var(--fb);margin-top:8px;color:#0d0b0a}
.skyline{left:0;bottom:0;width:1920px;height:430px;z-index:2}
.skyline .bd{transform-box:fill-box;transform-origin:50% 100%}
.skyline .win{animation:k-flick var(--fd,5s) linear infinite;animation-delay:var(--fl,0s)}

/* =====================================================================
   5 · REFERENCIAS
   ===================================================================== */
.s5{background:#2a0f0a}
.wall5{inset:0;background:var(--u-brick-red) center/cover;filter:saturate(.75) brightness(.5)}
.shade5{inset:0;background:linear-gradient(90deg,rgba(0,0,0,.7),transparent 75%)}
.es{left:80px;top:60px;font-size:104px;color:#fff;transform:rotate(-3deg);z-index:7;text-shadow:7px 7px 0 #000;white-space:nowrap}
.w1,.w2,.w3{z-index:8;-webkit-text-stroke:0;text-shadow:8px 8px 0 #000;white-space:nowrap}
.w1{left:70px;top:190px;font-size:158px;color:var(--y)}
.w2{left:70px;top:340px;font-size:158px;color:var(--pk)}
.w3{left:70px;top:490px;font-size:158px;color:var(--tl);line-height:.84}
.circ5{left:30px;top:140px;width:900px;height:260px;z-index:9;filter:drop-shadow(5px 5px 0 #000)}
.stamp5{left:90px;top:900px;z-index:9}
.stamp5 span{display:inline-block;font:400 74px/1 var(--fg);background:var(--y);color:#000;border:7px solid #000;box-shadow:10px 10px 0 #000;padding:6px 30px 12px;text-transform:uppercase}
.post{position:absolute;width:410px;background:#f4eee0;padding:14px 14px 70px;box-shadow:0 0 0 2px rgba(0,0,0,.4),14px 16px 0 rgba(0,0,0,.65);transform:rotate(var(--r,0deg));transition:scale .45s cubic-bezier(.2,.9,.2,1.2),box-shadow .3s;z-index:var(--z,2)}
.post .pimg{position:relative;aspect-ratio:3/4;overflow:hidden;background:#111}
.post .pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.post:hover{scale:1.1;z-index:20;--z:20;box-shadow:0 0 0 2px #000,22px 26px 0 rgba(0,0,0,.7)}
.post:hover .pimg img{transform:scale(1.1)}
.post figcaption{position:absolute;left:14px;right:14px;bottom:10px;font-size:34px;line-height:.95;color:#0d0b0a;text-align:center;text-transform:uppercase}
.post figcaption small{font:900 20px var(--fb);letter-spacing:.08em}
.post .tape{left:50%;top:-24px;width:150px;height:46px;margin-left:-75px;transform:rotate(var(--tr,-4deg))}
.po1{left:1000px;top:40px;--r:-5deg;--tr:5deg}
.po2{left:1440px;top:96px;--r:4deg;--tr:-6deg}
.po3{left:1080px;top:490px;--r:3deg;--tr:-3deg}
.po4{left:1480px;top:520px;--r:-4deg;--tr:6deg}

/* =====================================================================
   6 · PASIÓN / CONTEXTO / IDENTIDAD
   ===================================================================== */
.s6{background:#06201d}
.gwall{inset:-60px;background:var(--u-graffiti) center/cover;filter:brightness(.5) saturate(1.25)}
.shade6{inset:0;background:radial-gradient(ellipse at 30% 50%,transparent 20%,rgba(0,0,0,.55) 100%)}
.ph6{left:80px;top:120px;width:630px;height:840px;z-index:3}
.ph6 .tw{width:100%;height:100%}
.t6{left:100px;top:470px;font-size:250px;color:#fff;z-index:6;text-shadow:11px 11px 0 #000;transform:rotate(-7deg);white-space:nowrap}
.grid6{position:absolute;left:800px;top:76px;width:1050px;display:grid;grid-template-columns:1fr 1fr;gap:36px;z-index:5}
.fl{position:relative;min-height:436px;background:#0d0b0a;border:6px solid #fff;padding:30px 34px;overflow:hidden;box-shadow:14px 14px 0 rgba(0,0,0,.65);color:#fff;transition:color .25s,border-color .25s}
.fl .flood{position:absolute;inset:0;background:var(--c);clip-path:circle(0px at var(--fx,50%) var(--fy,50%));z-index:0}
.fl>*:not(.flood){position:relative;z-index:1}
.fl h3{font-size:60px;color:var(--c);margin-bottom:16px;transition:color .25s}
.fl p{font-size:28px}
.fl.on{color:#0d0b0a;border-color:#0d0b0a}.fl.on h3{color:#0d0b0a}
.terr{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.terr i{font:900 30px var(--ft);font-style:normal;text-transform:uppercase;padding:6px 18px;background:#fff;color:#000;transform:rotate(var(--r,-3deg))}
.terr i:nth-child(2n){--r:3deg;background:var(--y)}

/* =====================================================================
   7 · EL FORMATO
   ===================================================================== */
.s7{background:#08070d}
.dots7{inset:0;background:radial-gradient(circle,#ff2e93 2.2px,transparent 2.8px) 0 0/22px 22px;opacity:.2;-webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%)}
.pole{left:1846px;top:-40px;width:62px;height:1160px;background:#fff;border:6px solid #000;overflow:hidden;z-index:4;box-shadow:-8px 0 0 rgba(255,255,255,.1)}
.pole i{position:absolute;left:0;right:0;top:-170px;bottom:-170px;background:repeating-linear-gradient(-45deg,var(--pk) 0 28px,#fff 28px 56px,var(--bl) 56px 84px,#fff 84px 112px);animation:k-pole 1.8s linear infinite}
@keyframes k-pole{to{transform:translateY(158.4px)}}
.t7{left:76px;top:50px;font-size:200px;color:#fff;z-index:6;text-shadow:10px 10px 0 var(--pk);white-space:nowrap}
.tv{left:70px;top:300px;width:930px;height:700px;z-index:4}
.tvbody{position:absolute;left:0;right:0;top:0;bottom:56px;background:#1a1a22;border:12px solid #000;border-radius:46px;box-shadow:0 0 0 7px var(--pk),20px 22px 0 #000;padding:30px}
.screen{position:relative;width:100%;height:100%;border-radius:38px/32px;overflow:hidden;background:#000}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.screen .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 2px,transparent 2px 5px);mix-blend-mode:multiply;pointer-events:none}
.screen .spot{position:absolute;inset:0;background:radial-gradient(circle 260px at var(--sx,50%) var(--sy,38%),rgba(255,255,255,.3),transparent 72%);mix-blend-mode:screen;pointer-events:none}
.screen::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(0,0,0,.65);border-radius:inherit;pointer-events:none}
.screen.gl img{animation:k-rgb .42s steps(2) 1}
@keyframes k-rgb{0%{transform:scale(1.04) translateX(0);filter:none}25%{transform:scale(1.06) translateX(-14px);filter:hue-rotate(90deg) saturate(2)}50%{transform:scale(1.04) translateX(12px);filter:hue-rotate(-60deg) contrast(1.4)}100%{transform:scale(1.04);filter:none}}
.live{position:absolute;left:26px;top:22px;background:var(--rd);color:#fff;font:900 30px var(--ft);padding:2px 18px 4px;text-transform:uppercase;z-index:3}
.live i{display:inline-block;width:14px;height:14px;border-radius:50%;background:#fff;margin-right:10px;animation:k-flick 1.4s linear infinite}
.tvfoot{position:absolute;left:90px;right:90px;bottom:0;height:56px}
.tvfoot::before,.tvfoot::after{content:'';position:absolute;top:0;width:90px;height:56px;background:#000;clip-path:polygon(0 0,100% 0,82% 100%,18% 100%)}
.tvfoot::before{left:0}.tvfoot::after{right:0}
.ficha{position:absolute;left:1060px;top:80px;width:740px;z-index:5}
.spec{display:flex;align-items:baseline;gap:22px;border-bottom:6px solid #fff;padding:18px 0 14px;transition:translate .25s cubic-bezier(.2,.8,.2,1)}
.spec .k{flex:0 0 250px;font:400 46px/1 var(--fg);color:var(--y);transform:rotate(-3deg);transition:color .2s}
.spec .v{font:900 54px/.98 var(--ft);text-transform:uppercase;color:#fff;transition:color .2s}
.spec .v em{display:block;font:500 26px/1.2 var(--fb);text-transform:none;font-style:normal;color:#cfc8b8;margin-top:6px}
.spec:hover{translate:-16px 0}.spec:hover .v{color:var(--tl)}.spec:hover .k{color:var(--pk)}
.claim{position:absolute;left:1060px;width:740px;padding:22px 30px;border:6px solid #000;box-shadow:12px 12px 0 #000;color:#000;z-index:5}
.claim p{font:700 31px/1.22 var(--fb)}
.c1{top:610px;background:var(--y);transform:rotate(-1.6deg)}
.c2{top:830px;background:var(--pk);transform:rotate(1.4deg)}

/* =====================================================================
   8 · FASES 1 Y 2
   ===================================================================== */
.s8{background:#0d0b0a}
.wall8{inset:0;background:var(--u-brick-dark) center/cover}
.shade8{inset:0;background:radial-gradient(ellipse at 20% 20%,transparent 20%,rgba(0,0,0,.6) 100%)}
.big12{left:60px;top:10px;font-size:340px;line-height:1;color:var(--y);-webkit-text-stroke:12px #000;paint-order:stroke fill;text-shadow:16px 16px 0 var(--pk);z-index:5}
.sub12{left:560px;top:104px;font-size:60px;color:var(--pk);transform:rotate(-3deg);white-space:nowrap;z-index:5;text-shadow:5px 5px 0 #000}
.lead8{left:560px;top:206px;width:1000px;font-size:31px;line-height:1.28;color:#fff;z-index:5}
.lead8 b{color:var(--y)}
.ph{position:absolute;top:440px;background:#fff;color:#0d0b0a;border:6px solid #000;box-shadow:14px 14px 0 var(--pk);padding:26px 34px 30px;z-index:5}
.ph1{left:70px;width:830px}
.ph2{left:960px;width:890px;box-shadow:14px 14px 0 var(--tl)}
.ph h3{font-size:62px;line-height:.9}
.ph h3 span{background:var(--y);padding:0 14px;margin-right:10px;display:inline-block;transform:rotate(-2deg)}
.ph .sm{font:900 21px var(--fb);letter-spacing:.1em;text-transform:uppercase;margin:10px 0 12px;color:#555}
.ph .B{font-size:25px;margin-bottom:10px}
.slogan{font-size:46px;color:var(--pk);line-height:1.04;margin:6px 0 14px}
.deps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.dep{border:5px solid #000;padding:8px 10px 12px;text-align:center;background:#f4eee0;transition:translate .2s,background .2s}
.dep:hover{background:var(--y);translate:0 -8px}
.dep .dn{font:900 30px/1 var(--ft);text-transform:uppercase;display:block;margin-bottom:8px}
.dep .dd{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.dep .dd i{width:20px;height:20px;border-radius:50%;background:#0d0b0a;display:block}
.dep:nth-child(2) .dd i{background:var(--pk)}.dep:nth-child(3) .dd i{background:var(--tl)}.dep:nth-child(4) .dd i{background:var(--rd)}

/* =====================================================================
   9 · FASES 3 Y 4
   ===================================================================== */
.s9{background:var(--pk)}
.pinkwall{inset:0;background:var(--pk)}
.halft9{inset:0;background:radial-gradient(circle,#0d0b0a 2.6px,transparent 3.2px) 0 0/18px 18px;opacity:.3;-webkit-mask-image:radial-gradient(ellipse at 100% 100%,#000,transparent 72%);mask-image:radial-gradient(ellipse at 100% 100%,#000,transparent 72%)}
.f3{left:70px;top:66px;width:680px;background:#fff;color:#0d0b0a;border:6px solid #000;box-shadow:14px 14px 0 #000;padding:26px 34px 30px;transform:rotate(-1.2deg);z-index:5}
.f4{left:810px;top:66px;width:640px;background:#0d0b0a;color:#fff;border:6px solid #fff;box-shadow:14px 14px 0 var(--y);padding:26px 34px 30px;transform:rotate(1deg);z-index:5}
.f3 h3,.f4 h3{font-size:58px;line-height:.9;margin-bottom:4px}
.f3 h3 span,.f4 h3 span{background:var(--y);color:#000;padding:0 14px;margin-right:8px;display:inline-block;transform:rotate(-2deg)}
.f3 h3 small{font-size:.6em}
.f4 h3 span{background:var(--pk)}
.f3 .sm,.f4 .sm{font:900 21px var(--fb);letter-spacing:.1em;text-transform:uppercase;margin:10px 0 12px;opacity:.7}
.f3 .B,.f4 .B{font-size:25px;margin-bottom:10px}
.f4 .B em{font-style:normal;color:var(--y)}
.arena{left:70px;top:640px;width:680px;height:400px;z-index:5}
.arena .ring{position:absolute;inset:0}
.arena .ad{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#0d0b0a;border:5px solid #fff;box-shadow:5px 5px 0 rgba(0,0,0,.5)}
.arena .ad.keep{background:var(--y);border-color:#000}
.arlab{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;align-items:center;gap:14px;font-size:88px;color:#fff;text-shadow:6px 6px 0 #000}
.arlab b{font-weight:400;font-size:130px}
.arlab span{font-size:90px}
.face{left:1490px;top:80px;width:370px;height:450px;z-index:5}
.face .tw{width:100%;height:100%}
.tape9{position:absolute;left:-60px;width:2100px;height:84px;background:var(--y);border-block:7px solid #000;overflow:hidden;z-index:4}
.t9a{left:690px;top:880px;width:1500px;transform:rotate(-8deg)}
.t9b{left:640px;top:820px;width:1500px;transform:rotate(5deg);background:#0d0b0a}
.t9b .run span{color:var(--y)}
.tape9 .run span{line-height:70px}

/* =====================================================================
   10 · FASE 5
   ===================================================================== */
.s10{background:#14050a}
.beams{inset:0;overflow:hidden;mix-blend-mode:screen;pointer-events:none}
.beams i{position:absolute;top:-160px;width:760px;height:1500px;margin-left:-380px;background:conic-gradient(from 180deg at 50% 0,transparent 163deg,rgba(255,213,0,.4) 180deg,transparent 197deg);transform-origin:50% 0;animation:k-beam 6.5s ease-in-out infinite alternate}
.beams i:nth-child(1){left:20%;--a:-16deg;--b:10deg}.beams i:nth-child(2){left:50%;--a:12deg;--b:-14deg;animation-duration:8s}.beams i:nth-child(3){left:80%;--a:-8deg;--b:18deg;animation-duration:7.2s;background:conic-gradient(from 180deg at 50% 0,transparent 163deg,rgba(255,46,147,.4) 180deg,transparent 197deg)}
@keyframes k-beam{from{transform:rotate(var(--a))}to{transform:rotate(var(--b))}}
.sun10{left:1000px;top:-260px;width:1200px;height:1200px;border-radius:50%;background:repeating-conic-gradient(var(--y) 0 7deg,transparent 7deg 22deg);opacity:.9;-webkit-mask-image:radial-gradient(circle,#000 20%,transparent 68%);mask-image:radial-gradient(circle,#000 20%,transparent 68%);animation:k-spin 50s linear infinite;z-index:1}
.skull{left:1110px;top:70px;width:710px;height:1262px;z-index:3;perspective:1400px}
.skin{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.skin .tw{width:100%;height:100%}
.crown10{position:absolute;filter:drop-shadow(5px 6px 0 #000)}
.txt10{position:absolute;left:70px;top:44px;width:1010px;z-index:6}
.t10{width:max-content;font-size:98px;color:#fff;line-height:.9;text-shadow:7px 7px 0 #000}
.fase{background:var(--y);color:#000;padding:0 18px;display:inline-block;transform:rotate(-3deg);text-shadow:none}
.sm10{font-size:46px;color:var(--pk);margin:10px 0 8px}
.txt10>.B{font-size:25px;color:#fff}
.blk{background:rgba(0,0,0,.72);border:6px solid #fff;padding:18px 28px 22px;margin-top:20px;box-shadow:12px 12px 0 var(--pk)}
.blk.gold{border-color:var(--y);box-shadow:12px 12px 0 var(--y)}
.blk h4{font-size:52px;color:var(--y);margin-bottom:6px}
.blk .B{font-size:25px;color:#fff}
.blk .B b{color:var(--y)}
.chips10{display:flex;gap:14px;margin-top:14px}
.chips10 i{font:900 32px var(--ft);font-style:normal;text-transform:uppercase;background:#fff;color:#000;padding:2px 20px 4px;transition:background .25s}
.chips10 i.on{background:var(--y);transform:translateY(-10px) rotate(-4deg);box-shadow:5px 6px 0 var(--pk)}

/* =====================================================================
   11 · PRUEBAS
   ===================================================================== */
.s11{background:#1a1a1d}
.conc{inset:0;background:#262628 var(--u-crumple) center/cover;background-blend-mode:screen}
.hz{left:0;right:0;height:46px;background:repeating-linear-gradient(-45deg,var(--y) 0 30px,#000 30px 60px);z-index:9}
.hz-t{top:0}.hz-b{bottom:0}
.t11{left:40px;top:60px;font-size:150px;color:var(--y);transform:rotate(-4deg);z-index:7;text-shadow:11px 11px 0 #000}
.fadeph{left:76px;top:350px;width:400px;height:533px;z-index:3}
.fadeph .tw{width:100%;height:100%}
.stop{left:290px;top:560px;width:310px;z-index:6}
.stopimg{width:300px;height:300px;border:8px solid #000;box-shadow:12px 12px 0 #000;transform:rotate(5deg);overflow:hidden;position:relative}
.stopimg img{width:100%;height:100%;object-fit:cover;animation:k-brpulse 1s ease-in-out infinite}
@keyframes k-brpulse{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.25) saturate(1.4)}}
.clock{display:block;width:fit-content;font-size:92px;color:var(--rd);background:#000;padding:6px 20px 8px;border:6px solid var(--rd);margin:-34px 0 0 -26px;transform:rotate(-4deg);position:relative;z-index:2;letter-spacing:.04em}
.cr{position:absolute;left:70px;top:-58px;font-size:58px;color:#fff;transform:rotate(-6deg);text-shadow:5px 5px 0 #000}
.cards11{position:absolute;left:660px;top:62px;width:1210px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;z-index:5;perspective:1200px}
.pc{position:relative;background:#f4eee0;color:#0d0b0a;border:6px solid #000;box-shadow:12px 12px 0 #000;padding:22px 26px 20px;height:400px;transform-style:preserve-3d;will-change:transform;--c:var(--y)}
.pc:nth-child(2){--c:var(--pk)}.pc:nth-child(3){--c:var(--tl)}.pc:nth-child(4){--c:var(--rd)}.pc:nth-child(5){--c:var(--rd)}.pc:nth-child(6){--c:var(--bl)}
.pc .n{position:absolute;right:18px;top:-10px;font-size:160px;line-height:1;color:var(--c);-webkit-text-stroke:6px #000;paint-order:stroke fill;font-weight:400}
.pc h3{font-size:50px;line-height:.9;margin:84px 0 10px;position:relative}
.pc p{font-size:23px;line-height:1.25;margin:0}
.pc.hot{background:#000;color:#fff;border-color:var(--rd);box-shadow:12px 12px 0 var(--rd)}
.pc.hot .n{-webkit-text-stroke-color:#fff}
.pc:hover{box-shadow:20px 20px 0 var(--c)}
.ticker11{position:absolute;left:-30px;right:-30px;top:946px;height:78px;background:var(--rd);border-block:7px solid #000;transform:rotate(-.7deg);overflow:hidden;z-index:8}
.ticker11 .run span{color:#000;line-height:64px}
.ticker11 .run b{background:#000}

/* =====================================================================
   12 · ESTRUCTURA DEL EPISODIO
   ===================================================================== */
.s12{background:#0b1030}
.night12{inset:0;background:radial-gradient(ellipse at 80% 15%,#1b3a8f 0,transparent 62%)}
.halft12{inset:0;background:radial-gradient(circle,#18c5ae 1.9px,transparent 2.4px) 0 0/20px 20px;opacity:.16}
.t12{left:76px;top:46px;font-size:152px;color:#fff;z-index:5;text-shadow:9px 9px 0 var(--pk);white-space:nowrap}
.ph12{left:1500px;top:40px;width:350px;height:466px;z-index:4}
.ph12 .tw{width:100%;height:100%}
.beat{position:absolute;left:76px;top:346px;width:1360px;height:178px;display:flex;gap:30px;align-items:center;background:#000;border:6px solid var(--y);box-shadow:12px 12px 0 var(--pk);padding:12px 34px;z-index:6}
.bn{font-size:150px;color:var(--y);flex:0 0 130px;text-align:center;-webkit-text-stroke:0;text-shadow:7px 7px 0 var(--pk)}
.bt h3{font-size:62px;color:#fff;line-height:.92}
.bt p{font-size:26px;color:#ddd;margin-top:6px;line-height:1.25;max-width:1060px}
.curve{left:40px;top:560px;width:1840px;height:420px;z-index:4;overflow:visible}
.curve path.base{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;opacity:.25}
.curve path.live{fill:none;stroke:var(--y);stroke-width:14;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 6px 0 var(--pk))}
.curve .area{fill:rgba(255,46,147,.16)}
.curve circle.nd{fill:#0b1030;stroke:#fff;stroke-width:7;transition:r .2s,fill .2s,stroke .2s}
.curve circle.nd.on{fill:var(--y);stroke:#000}
.curve circle.head{fill:var(--pk);stroke:#fff;stroke-width:6;filter:drop-shadow(0 0 14px var(--pk))}
.curve line.stem{stroke:#fff;stroke-width:3;stroke-dasharray:6 8;opacity:.4}
.beats12{left:40px;top:560px;width:1840px;height:420px;z-index:5;pointer-events:none}
.bb{position:absolute;pointer-events:auto;width:200px;margin-left:-100px;text-align:center;background:none;border:0;font:900 26px/1 var(--ft);text-transform:uppercase;color:#fff;letter-spacing:.02em;padding:6px;transition:color .2s,scale .2s}
.bb:hover,.bb.on{color:var(--y);scale:1.18}
.bb i{display:block;font:400 34px/1 var(--fs);color:var(--pk);margin-bottom:2px;font-style:normal}

/* =====================================================================
   13 · CIERRE
   ===================================================================== */
.s13{background:#009496}
.teal13{inset:0;background:#009496}
.hands{z-index:1}
.t13{left:0;top:40px;width:1920px;text-align:center;font-size:122px;color:#fff;text-shadow:8px 8px 0 #000;line-height:.9;z-index:6;white-space:nowrap}
.w13a{left:70px;top:470px;z-index:6;transform:rotate(-8deg)}
.w13a h2{font-size:128px;color:var(--y);text-shadow:8px 8px 0 #000}
.w13b{left:1290px;top:500px;z-index:6;transform:rotate(6deg)}
.w13b h2{font-size:128px;color:var(--pk);text-shadow:8px 8px 0 #000}
.logo13{left:660px;top:380px;width:600px;z-index:5;filter:drop-shadow(0 14px 0 rgba(0,0,0,.45))}
.logo13 img{width:100%}
.credit{left:0;top:1022px;width:1920px;text-align:center;font:700 26px var(--fb);letter-spacing:.06em;color:#fff;text-shadow:2px 2px 0 #000;z-index:6}
.tps{z-index:7}
.sheet{padding:26px 34px;border:6px solid #000;box-shadow:12px 12px 0 #000}
.sheet img{width:150px}
.sheet.paperw{background:#f3ecdc}.sheet.black{background:#0d0b0a}.sheet.yel{background:var(--y)}
.tp-a{left:150px;top:800px;transform:rotate(-5deg)}
.tp-b{left:845px;top:730px;transform:rotate(2deg)}
.tp-c{left:1560px;top:796px;transform:rotate(5deg)}

/* ---------- efectos de transición ---------- */
#curtain{position:absolute;inset:0;z-index:800;pointer-events:none;visibility:hidden;display:grid;grid-template-rows:repeat(8,1fr)}
#curtain i{display:block;transform-origin:0 50%;transform:scaleX(0);will-change:transform}
#curtain.paint i:nth-child(8n+1){background:var(--pk)}#curtain.paint i:nth-child(8n+2){background:var(--y)}#curtain.paint i:nth-child(8n+3){background:var(--tl)}#curtain.paint i:nth-child(8n+4){background:#0d0b0a}#curtain.paint i:nth-child(8n+5){background:var(--rd)}#curtain.paint i:nth-child(8n+6){background:#fff}#curtain.paint i:nth-child(8n+7){background:var(--bl)}#curtain.paint i:nth-child(8n+8){background:var(--y)}
#curtain.brick i{background:var(--u-brick-red) center/cover;border-block:6px solid #1a0a06;box-shadow:inset 0 0 0 4px rgba(0,0,0,.3)}
#fxslash{position:absolute;inset:0;width:1920px;height:1080px;z-index:801;pointer-events:none;visibility:hidden}
#fxslash line{stroke-linecap:butt}
#fxring{position:absolute;left:0;top:0;z-index:801;pointer-events:none;visibility:hidden}
#fxring i{position:absolute;border-radius:50%;border:22px solid var(--y);translate:-50% -50%;left:0;top:0}
#fxring i+i{border-color:var(--pk);border-width:12px}
#fxhand{position:absolute;left:960px;top:540px;width:0;height:0;z-index:801;pointer-events:none;visibility:hidden}
#fxhand i{position:absolute;left:-9px;top:-1300px;width:18px;height:1300px;background:linear-gradient(0deg,var(--rd),rgba(255,59,31,0));transform-origin:50% 100%}
#fxflash{position:absolute;inset:0;background:#fff;z-index:802;pointer-events:none;opacity:0;visibility:hidden}

@media (prefers-reduced-motion:reduce){
  .lp,.run,.vrun,.drip,.citytrack,.vdisc,.vring,.sun10,.beams i,.pole i{animation:none!important}
}