/* Tokens, type, shared utilities and the screen-transition effects. Designed at 2560px wide (2K); scaled for smaller monitors. */
:root{
  --ink:#141414; --ink2:#262626; --paper:#ece5da; --card:#f7f2ea; --cream:#f2ece4; --mute:#6c6560; --mute2:#8a8279;
  --yellow:#f6e900; --pink:#fb2970; --red:#f01c12; --mint:#4ff8e2; --orange:#f99300;
  --ease-expo:cubic-bezier(.16,1,.3,1); --ease-dial:cubic-bezier(.22,.61,.36,1);
  --spring:linear(0,.008,.032 2%,.13 4.4%,.26 6.6%,.681 13%,.891 17.1%,.968,1.028,1.073,1.103 25.2%,1.114,1.119,1.12,1.115 31.4%,1.098 34.4%,1.042 41.6%,1.017 45.4%,.998 49.5%,.988 53.9%,.986 60.4%,1.001 80.9% 100%);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--cream)}
body{overflow:hidden;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit}
.d{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:900;line-height:.86}
.m{font-family:'Space Mono',monospace;letter-spacing:.08em}
.r{font-family:Inter,system-ui,sans-serif}
.slab{display:inline-block;transform:skewX(-12deg)}.slab>span{display:block;transform:skewX(12deg)}
.lit{background:var(--yellow);color:var(--ink);box-shadow:10px 10px 0 var(--mint),-4px -4px 0 var(--pink)}
.dim{background:var(--ink2);color:#cfc7bb;box-shadow:6px 6px 0 #0b0b0b}
.blink{animation:blink 1s steps(2) infinite}
.rise{animation:rise .5s var(--ease-expo) both}
.dots{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1.4px) 0 0/7px 7px;mix-blend-mode:overlay;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes jit{0%,100%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}}
@keyframes zap{0%{stroke-dashoffset:1400}100%{stroke-dashoffset:0}}
@keyframes dead{0%{opacity:1}12%{opacity:.25}24%{opacity:.85}36%{opacity:.15}100%{opacity:.5}}
@keyframes flash{0%{opacity:.7}100%{opacity:0}}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-14px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}

/* screens */
#app{position:fixed;inset:0}
.screen{position:absolute;inset:0;overflow:hidden}
.screen.scroll{overflow-y:auto;overflow-x:hidden}
.screen.fade-in{animation:fadeIn .3s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* fixed-size stage, scaled to fit (dark screens) */
.stage{position:absolute;left:50%;top:50%;transform-origin:50% 50%}
.stage.cover{pointer-events:none}

/* Persona three-pane wipe: swap at 340ms while covered */
#fx{position:fixed;inset:0;pointer-events:none;z-index:50}
.wipe{position:absolute;inset:-10%}
.wipe .pane{position:absolute;inset:0;transform:translateX(-130%) skewX(-14deg);animation:wipeAcross .7s cubic-bezier(.75,0,.2,1) forwards}
.wipe .p2{animation-delay:.06s}.wipe .p1{animation-delay:.12s}
.wipe .wf{position:absolute;inset:0;background:var(--cream);opacity:0;animation:wflash .7s linear forwards}
@keyframes wipeAcross{0%{transform:translateX(-130%) skewX(-14deg)}45%,55%{transform:translateX(0) skewX(-14deg)}100%{transform:translateX(130%) skewX(-14deg)}}
@keyframes wflash{0%,44%{opacity:0}48%{opacity:1}56%,100%{opacity:0}}
/* signal cut: home tears into glitch slices, cuts to black, scanline shutter opens on the new screen */
.gx{position:absolute;inset:0;overflow:hidden}
.gx .sl{position:absolute;inset:0;overflow:hidden;animation:gxSl .3s steps(1,end) both}
.gx .sl>.screen{pointer-events:none}
.gx .tint{position:absolute;inset:0;mix-blend-mode:screen;opacity:0;animation:gxTint .3s steps(1,end) both}
.gx .bar{position:absolute;left:0;right:0;height:var(--h);top:var(--y);background:var(--c);opacity:0;animation:gxBar .32s steps(1,end) var(--d) both}
.gx .sh{position:absolute;left:0;right:0;height:50.5%;background:#0b0b0b;opacity:0;animation:gxShT .62s cubic-bezier(.7,0,.2,1) both}
.gx .sh.t{top:0}.gx .sh.b{bottom:0;animation-name:gxShB}
.gx .sh::after{content:"";position:absolute;left:0;right:0;height:3px;background:var(--mint);box-shadow:0 0 18px var(--mint),0 0 4px #fff}
.gx .sh.t::after{bottom:0}.gx .sh.b::after{top:0;background:var(--yellow);box-shadow:0 0 18px var(--yellow),0 0 4px #fff}
.gx .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px);opacity:0;animation:gxScan .62s linear both}
@keyframes gxSl{0%{transform:none;filter:none}12%{transform:translateX(var(--a))}30%{transform:translateX(var(--b)) skewX(-6deg);filter:saturate(2.4) hue-rotate(var(--hr))}52%{transform:translateX(calc(var(--a) * -1.6))}70%{transform:translateX(var(--b));filter:contrast(1.8) brightness(1.4)}86%{transform:translateX(calc(var(--b) * 3));opacity:.6}100%{opacity:0}}
@keyframes gxTint{0%{opacity:0}18%{opacity:.5;background:var(--pink);transform:translateX(14px)}40%{opacity:.4;background:var(--mint);transform:translateX(-18px)}62%{opacity:.55;background:var(--yellow);transform:translateX(8px)}80%,100%{opacity:0}}
@keyframes gxBar{0%{opacity:1;transform:translateX(-30%) scaleX(.6)}40%{opacity:1;transform:translateX(20%)}70%{opacity:.8;transform:none}100%{opacity:0}}
@keyframes gxShT{0%,40%{opacity:0;transform:none}45%,58%{opacity:1;transform:none}100%{opacity:1;transform:translateY(-101%)}}
@keyframes gxShB{0%,40%{opacity:0;transform:none}45%,58%{opacity:1;transform:none}100%{opacity:1;transform:translateY(101%)}}
@keyframes gxScan{0%,40%{opacity:0}48%{opacity:1}100%{opacity:0}}
.screen.glitch-in{animation:gxIn .5s steps(1,end) .34s both}
@keyframes gxIn{0%{transform:translateX(-18px) skewX(-3deg);filter:saturate(2) hue-rotate(-30deg)}18%{transform:translateX(12px);filter:none}34%{transform:translateX(-6px) skewX(2deg)}52%{transform:translateX(3px)}70%,100%{transform:none;filter:none}}


@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---- custom cursor (js/cursor.js): OVERLOAD on dark screens, RETICLE on light ones ---- */
.has-cur,.has-cur *{cursor:none!important}
.has-cur input,.has-cur textarea,.has-cur [contenteditable],.has-cur iframe{cursor:auto!important}
#cur{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}
#cur.off .xspark,#cur.off .xarcs,#cur.off .xload,#cur.off .xrt{opacity:0!important}
#cur .xov,#cur .xrt{position:absolute;inset:0}
#cur:not(.c-dk) .xov,#cur.c-dk .xrt{display:none}
#cur .xspark,#cur .xar,#cur .xtg,#cur .xch,#cur .xib,#cur .xload{position:absolute;left:0;top:0;will-change:transform}
/* overload */
#cur .xspark b{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #4ff8e2,0 0 14px 5px #4ff8e2,0 0 32px 8px #fb297066;animation:curP .12s steps(2,end) infinite}
@keyframes curP{50%{transform:scale(.78);box-shadow:0 0 0 2px #fb2970,0 0 11px 3px #4ff8e2,0 0 24px 6px #fb297066}}
#cur .xarcs{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#cur .xarcs polyline{fill:none;stroke-linejoin:miter}
#cur .xarcs .xgl{stroke:#4ff8e2;stroke-width:7;opacity:.35;filter:blur(3px)}
#cur .xarcs .xmn{stroke:#e9fffb;stroke-width:2.2}
#cur .xarcs .xpk{stroke:#fb2970;stroke-width:1.6}
#cur .xarcs .xyl{stroke:#f6e900;stroke-width:2.4}
#cur .xload{font-size:13px;color:#4ff8e2;white-space:nowrap;opacity:0;transition:opacity .2s;text-shadow:0 0 6px #141414}
#cur .xload i{display:inline-block;width:110px;height:6px;margin-left:8px;background:#262626;vertical-align:middle;position:relative;overflow:hidden}
#cur .xload i b{position:absolute;inset:0;background:linear-gradient(90deg,#4ff8e2,#f6e900 60%,#f01c12);transform-origin:0 50%}
#cur .xpsy{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(160,10,8,.5) 100%)}
#cur .xpsyt{position:absolute;left:50%;top:4vh;translate:-50% 0;font-size:clamp(32px,4vw,64px);letter-spacing:.04em;color:#f01c12;text-shadow:-4px 0 #4ff8e2,4px 0 #fb2970;opacity:0;white-space:nowrap;animation:curPf .22s steps(2,end) infinite}
@keyframes curPf{50%{translate:-49% 2px;color:#fff}}
#cur .xpsyb{position:absolute;left:0;right:0;height:var(--h);top:var(--y);background:var(--c);opacity:0}
.screen.cur-shk{animation:curShk .28s steps(6,end)}
@keyframes curShk{0%{translate:-10px 5px}20%{translate:9px -6px}40%{translate:-6px -3px}60%{translate:4px 6px}80%{translate:-2px 1px}100%{translate:0 0}}
/* reticle */
#cur .xbk{position:absolute;left:var(--bx);top:var(--by);width:var(--bw);height:var(--bh);--c:#141414;--L:12px;--w:3px;transition:opacity .15s;background:
 linear-gradient(var(--c),var(--c)) 0 0/var(--L) var(--w),linear-gradient(var(--c),var(--c)) 0 0/var(--w) var(--L),
 linear-gradient(var(--c),var(--c)) 100% 0/var(--L) var(--w),linear-gradient(var(--c),var(--c)) 100% 0/var(--w) var(--L),
 linear-gradient(var(--c),var(--c)) 0 100%/var(--L) var(--w),linear-gradient(var(--c),var(--c)) 0 100%/var(--w) var(--L),
 linear-gradient(var(--c),var(--c)) 100% 100%/var(--L) var(--w),linear-gradient(var(--c),var(--c)) 100% 100%/var(--w) var(--L);background-repeat:no-repeat}
#cur .xbk.xg1,#cur .xbk.xg2{opacity:0}
#cur .xbk.xg1{--c:#fb2970}#cur .xbk.xg2{--c:#f6e900}
#cur.press .xbk:not(.xg1):not(.xg2){animation:curB .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes curB{0%{scale:1}25%{scale:.82}100%{scale:1}}
#cur.press .xbk.xg1{animation:curG1 .45s steps(1,end)}#cur.press .xbk.xg2{animation:curG2 .45s steps(1,end)}
@keyframes curG1{0%{opacity:1;translate:-6px 3px}25%{opacity:1;translate:4px -2px}40%,100%{opacity:0}}
@keyframes curG2{0%,10%{opacity:1;translate:5px 4px}30%{opacity:1;translate:-3px -3px}45%,100%{opacity:0}}
#cur .xar svg{display:block;filter:drop-shadow(3px 3px 0 #f6e900)}
#cur .xar path{fill:#141414;stroke:#f2ece4;stroke-width:1.6;stroke-linejoin:round}
#cur .xtg{white-space:nowrap;background:#f6e900;color:#141414;padding:5px 12px 6px 9px;transform-origin:0 0;box-shadow:4px 4px 0 #141414,-2px -2px 0 #fb2970;clip-path:inset(0 100% 100% 0);transition:clip-path .22s cubic-bezier(.22,.61,.36,1)}
#cur .xtg span{display:block;font-size:22px;line-height:1}
#cur .xtg.on{clip-path:inset(-10px -10px -10px -10px)}
#cur .xch{font-size:18px;font-weight:700;color:#141414;transition:opacity .15s;text-shadow:0 0 0 #f6e900,2px 2px 0 #f6e900}
#cur .xib{width:4px;height:34px;background:#141414;box-shadow:3px 0 0 #f6e900;transition:opacity .15s}
#cur.inv .xbk:not(.xg1):not(.xg2){--c:#4ff8e2}
#cur.inv .xar path{fill:#f6e900;stroke:#141414}#cur.inv .xar svg{filter:drop-shadow(3px 3px 0 #4ff8e2)}
#cur.inv .xch{color:#4ff8e2}#cur.inv .xib{background:#f2ece4}
#cur .xflash{position:absolute;inset:0;background:#e9fffb;opacity:0}
#cur.c-dk.press .xflash{animation:xfl .22s steps(2,end) both}
@keyframes xfl{0%{opacity:.7}100%{opacity:0}}
::selection{background:#f6e900;color:#141414}

.dial,.dial *,.wk-sub,.track{-webkit-user-select:none;user-select:none}

/* ---- music player (home, top right) ---- */
#player{position:fixed;right:48px;top:34px;z-index:40;display:none;align-items:center;gap:14px;padding:8px 18px 8px 8px;background:#141414e6;color:#cfc7bb;box-shadow:6px 6px 0 #0b0b0b;transform:skewX(-12deg)}
#player>*{transform:skewX(12deg)}
body[data-screen="home"] #player,body[data-screen="products"] #player{display:flex;animation:fadeIn .4s ease both}
#player.on{box-shadow:6px 6px 0 var(--mint),-3px -3px 0 var(--pink)}
#sound{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:#262626;color:#cfc7bb;transition:background .2s,color .2s}
#sound:hover{background:#333;color:#fff}
#player.on #sound{background:var(--yellow);color:var(--ink)}
.pl-eq{display:flex;align-items:flex-end;gap:3px;height:22px;width:27px}
.pl-eq i{flex:1;height:4px;background:#5a554f}
#player.on .pl-eq i{background:var(--mint);animation:eq .9s steps(5,end) infinite}
#player.on .pl-eq i:nth-child(2){animation-duration:.7s;animation-delay:-.2s;background:var(--yellow)}
#player.on .pl-eq i:nth-child(3){animation-duration:1.1s;animation-delay:-.5s;background:var(--pink)}
#player.on .pl-eq i:nth-child(4){animation-duration:.8s;animation-delay:-.1s}
#player.on .pl-eq i:nth-child(5){animation-duration:1s;animation-delay:-.7s;background:var(--yellow)}
@keyframes eq{0%{height:5px}25%{height:20px}50%{height:9px}75%{height:16px}100%{height:5px}}
.pl-meta{line-height:1.25;white-space:nowrap}
.pl-t{font-size:16px;font-weight:700;color:#f2ece4;letter-spacing:.08em}
#player.on .pl-t{color:var(--yellow)}
.pl-a{font-size:13px;color:#8a8279;letter-spacing:.08em}
#vol{-webkit-appearance:none;appearance:none;width:110px;height:6px;margin:0 0 0 4px;background:linear-gradient(90deg,var(--yellow) var(--v,60%),#3a3a3a var(--v,60%));outline:none}
#vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:20px;background:#f2ece4;box-shadow:2px 2px 0 var(--pink);border:0}
#vol::-moz-range-thumb{width:12px;height:20px;background:#f2ece4;border:0;border-radius:0}
#vol:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
#sfx{position:fixed;right:56px;bottom:40px;z-index:40;border:0;background:var(--ink2);color:#cfc7bb;padding:8px 14px;font-size:16px;font-weight:700;display:none}
#sfx.on{background:var(--yellow);color:var(--ink)}
body.dark-screen #sfx{display:block}

.pl-fx{display:none;border:0;padding:0 8px;height:34px;font:700 12px "Space Mono",monospace;letter-spacing:.08em;background:#333;color:#e2dbd0}
.pl-fx.on{background:var(--mint);color:var(--ink)}
@media (max-width:759px){
  .pl-fx{display:block}
  #sfx{display:none!important}
  #player{right:10px;top:10px;padding:5px 12px 5px 5px;gap:9px;box-shadow:4px 4px 0 #0b0b0b}
  #player.on{box-shadow:4px 4px 0 var(--mint),-2px -2px 0 var(--pink)}
  #vol,.pl-a{display:none}
  #sound{width:34px;height:34px}
  .pl-t{font-size:13px}
  #sfx{right:auto;left:12px;bottom:12px;font-size:12px;padding:6px 10px}
}

/* zoom viewer (js/zoom.js): sits above every screen and button, below the custom cursor */
.zv{position:fixed;inset:0;z-index:190;background:rgba(14,14,14,.97);overflow:hidden;touch-action:none;overscroll-behavior:contain;cursor:zoom-in;animation:fadeIn .18s ease both}
.zv.zin{cursor:grab}.zv.drg{cursor:grabbing}
.zv .zc{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.zv .zc img{display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.zv .zx{position:fixed;right:24px;top:20px;z-index:2;border:0;background:var(--cream);color:var(--ink);padding:10px 14px;font-size:15px;cursor:pointer;box-shadow:3px 3px 0 var(--yellow)}
@media (max-width:760px){.zv .zx{right:12px;top:12px;min-width:44px;min-height:44px;font-size:13px}}