/* Dark screens: home v2, Contact and Résumé panels, Products chooser, loader, 404. */
.dark{background:var(--ink);color:var(--cream);font-family:'Big Shoulders Display',Impact,sans-serif}
.shard-pink{position:absolute;background:var(--pink);clip-path:polygon(0 8%,38% 0,52% 14%,74% 2%,100% 20%,88% 46%,100% 70%,62% 64%,48% 100%,30% 72%,0 88%)}
.shard-red{position:absolute;background:var(--red);clip-path:polygon(20% 0,64% 10%,100% 0,94% 40%,100% 100%,52% 86%,8% 100%,22% 58%,0 30%)}
.chip{position:absolute;background:var(--ink);color:var(--cream);padding:5px 9px;font-family:'Space Mono',monospace;font-size:16px;letter-spacing:.06em}
.chip .dot{display:inline-block;width:7px;height:7px;background:var(--mint);margin-right:8px;vertical-align:middle}
.hint{position:absolute;left:56px;bottom:40px;background:var(--ink);padding:6px 10px;font-family:'Space Mono',monospace;font-size:16px;letter-spacing:.06em;color:#cfc7bb}

/* Ray animation */
.a-ray{animation:rayBreathe 4.2s ease-in-out infinite;transform-box:view-box;transform-origin:430px 1380px}
.a-head{animation:headTilt 6.5s ease-in-out infinite}
.a-armR{animation:armSway 4.2s ease-in-out infinite}
.a-armL{animation:armSwayL 4.6s ease-in-out infinite}
.a-torso{animation:torsoBreathe 4.2s ease-in-out infinite}
.a-fing{animation:twitch 3.8s steps(1,end) infinite}
.f0{animation-delay:-.2s}.f1{animation-delay:-1.1s}.f2{animation-delay:-2.3s}.f3{animation-delay:-2.9s}.f4{animation-delay:-.7s}
@keyframes rayBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes headTilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-1.6deg)}62%{transform:rotate(1.1deg)}}
@keyframes armSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.2deg)}}
@keyframes armSwayL{0%,100%{transform:rotate(0)}50%{transform:rotate(1.6deg)}}
@keyframes torsoBreathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}
@keyframes twitch{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-9deg)}92%{transform:rotate(4deg)}95%{transform:rotate(-3deg)}}
.ray-eyes{transition:transform .15s linear}
.raymove{transition:transform .7s var(--ease-expo)}

/* Home menu slabs */
.mi{position:absolute;display:block;text-decoration:none;outline:none}
.mi .slab{padding:10px 30px 12px 22px;transition:background .1s steps(2),box-shadow .1s steps(2),color .1s steps(2)}
.mi .slab>span{font-size:64px;font-weight:900;line-height:1}
.mi .tag{margin-top:8px;margin-left:12px;display:none;background:var(--ink);padding:5px 12px}
.mi .tag>span{font-family:'Space Mono',monospace;font-size:16px;letter-spacing:.08em;color:var(--yellow);white-space:nowrap}
.mi.on .slab{background:var(--yellow);color:var(--ink);box-shadow:10px 10px 0 var(--mint),-4px -4px 0 var(--pink)}
.mi.on{z-index:3}.mi.on .tag{display:table}
.mi:not(.on) .slab{background:var(--ink2);color:#cfc7bb;box-shadow:6px 6px 0 #0b0b0b}
.mi.dead .slab{animation:dead .6s steps(6) forwards}
.mi.jit{animation:jit .16s steps(2) infinite}
.zap{stroke-dasharray:1400;animation:zap .28s steps(5) forwards}
.flash{position:absolute;inset:0;background:var(--pink);mix-blend-mode:screen;pointer-events:none;animation:flash .45s ease-out forwards}
.toast{position:absolute;left:50%;top:40px;transform:translateX(-50%);background:var(--yellow);color:var(--ink);padding:8px 18px;font-weight:700;font-size:17px;box-shadow:6px 6px 0 var(--ink);z-index:30;animation:toast 1.6s steps(8) forwards}

/* Contact */
.ch{position:absolute;display:block;text-decoration:none;outline:none}
.ch .slab{display:flex;align-items:center;gap:16px;padding:8px 28px 10px 14px;background:var(--ink2);color:#cfc7bb;box-shadow:6px 6px 0 #0b0b0b}
.ch .no{display:inline-block;transform:skewX(12deg);background:var(--yellow);color:var(--ink);font-family:'Space Mono',monospace;font-weight:700;font-size:16px;padding:2px 8px}
.ch .lb{display:block;transform:skewX(12deg);font-size:50px;font-weight:900;line-height:1}
.ch .val{display:none;margin-top:8px;margin-left:14px;background:var(--ink);padding:5px 12px}
.ch .val>span{font-family:'Space Mono',monospace;font-size:17px;letter-spacing:.06em;color:var(--yellow);white-space:nowrap}
.ch.on .slab{background:var(--yellow);color:var(--ink);box-shadow:10px 10px 0 var(--mint),-4px -4px 0 var(--pink)}
.ch.on .no{background:var(--ink);color:var(--yellow)}
.ch.on{z-index:3}.ch.on .val{display:table}
.dialog{position:absolute;left:96px;top:628px;width:800px}
.dialog .bk{position:absolute;left:10px;top:10px;right:-10px;bottom:-10px;background:var(--mint)}
.dialog .bx{position:relative;background:var(--ink);border:3px solid var(--pink);padding:30px 34px 26px;min-height:120px}
.dialog .who{position:absolute;left:22px;top:-22px;background:var(--yellow);padding:4px 18px}
.dialog .who>span{font-size:30px;font-weight:900;line-height:1;color:var(--ink)}
.dialog .tx{font-family:'Space Mono',monospace;font-size:22px;line-height:1.55;color:var(--cream)}
.type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;animation:typeIn var(--t) steps(var(--s)) var(--d) forwards}
@keyframes typeIn{from{width:0}to{width:var(--n)}}

/* Résumé */
.paper-bk{position:absolute;left:574px;top:78px;width:520px;height:736px;background:var(--yellow);transform:rotate(2deg) translate(18px,18px)}
.paper{position:absolute;left:574px;top:78px;width:520px;height:736px;background:#fff;box-shadow:0 0 0 3px var(--ink);overflow:hidden;animation:paperUp .8s var(--ease-expo) .35s both}
.paper img{display:block;width:100%;height:100%;object-fit:cover}
.scan{position:absolute;left:-10px;right:-10px;height:3px;background:var(--mint);box-shadow:0 0 18px var(--mint);animation:scan 1.1s linear 1.1s both}
@keyframes paperUp{from{transform:translateY(110%) rotate(2deg)}to{transform:translateY(0) rotate(2deg)}}
@keyframes scan{0%{top:0;opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.stats{position:absolute;left:70px;top:440px;display:grid;grid-template-columns:200px 200px;gap:26px 30px}
.stats .n{font-size:78px;font-weight:900;line-height:.85;color:var(--cream);text-shadow:3px 3px 0 var(--ink)}
.stats .l{margin-top:6px;display:inline-block;background:var(--ink);padding:3px 7px;font-family:'Space Mono',monospace;font-size:16px;letter-spacing:.08em;color:var(--yellow)}

/* Products chooser */
.pcard{position:relative;display:block;text-decoration:none;color:inherit;transition:transform .3s var(--ease-expo)}
.pcard .in{background:var(--ink);box-shadow:10px 10px 0 #0b0b0b;padding:0 0 34px;transition:box-shadow .15s steps(2)}
.pcard.on .in{box-shadow:16px 16px 0 var(--mint),-6px -6px 0 var(--yellow)}

/* Loader */
.boot-seg{width:46px;height:30px;transform:skewX(-12deg);background:#2c2c2c}
.boot-seg.on{background:var(--yellow)}.boot-seg.hi{background:var(--mint)}

/* outlined RAYYAN: dim neon sign that flickers now and then */
.neon{opacity:.3;animation:neon 4.5s steps(1,end) infinite}
@keyframes neon{0%,100%{opacity:.3;filter:none}
  20%{opacity:.36}22%{opacity:.3}
  40%{opacity:.7;filter:drop-shadow(0 0 10px var(--mint))}42%{opacity:.12;filter:none}44%{opacity:.8;filter:drop-shadow(0 0 14px var(--mint))}47%{opacity:.2;filter:none}49%{opacity:.75;filter:drop-shadow(0 0 12px var(--mint))}53%{opacity:.25;filter:none}55%{opacity:.7;filter:drop-shadow(0 0 10px var(--mint))}60%{opacity:.3;filter:none}
  80%{opacity:.65;filter:drop-shadow(0 0 8px var(--mint))}82%{opacity:.15;filter:none}84%{opacity:.6;filter:drop-shadow(0 0 8px var(--mint))}88%{opacity:.3;filter:none}}

/* live bolt: a bright pulse travels from Ray's hand to the selected item */
.bolts .bp{stroke-dasharray:5 95;animation:bpulse .9s linear infinite;opacity:.95;filter:drop-shadow(0 0 6px #4ff8e2)}
@keyframes bpulse{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* ---- phone layout (390 x 844 stage, .mob) ---- */
.mob .mi .slab{padding:6px 16px 7px 12px}
.mob .mi .slab>span{font-size:38px}
.mob .mi .tag{display:none!important}
.mob .mi.on .slab{box-shadow:6px 6px 0 var(--mint),-3px -3px 0 var(--pink)}
.mob .mi:not(.on) .slab{box-shadow:4px 4px 0 #0b0b0b}
.mob .hint{display:none}
.mob .back{left:18px;right:auto!important;top:20px!important;font-size:13px}
.mob .ch .slab{gap:10px;padding:5px 18px 6px 10px}
.mob .ch .lb{font-size:30px}
.mob .ch .no{font-size:12px;padding:1px 6px}
.mob .ch .val{display:table;margin-top:5px;margin-left:10px;padding:3px 8px}
.mob .ch .val>span{font-size:12px}
.mob .ch.on .slab{box-shadow:6px 6px 0 var(--mint),-3px -3px 0 var(--pink)}
.mob .dialog{left:18px;top:712px;width:340px}
.mob .dialog .bx{padding:22px 14px 14px;min-height:0}
.mob .dialog .who{left:12px;top:-16px;padding:2px 12px}.mob .dialog .who>span{font-size:20px}
.mob .dialog .tx{font-size:12px}
.mob .dialog .bk{left:6px;top:6px;right:-6px;bottom:-6px}
.mob .paper-bk,.mob .paper{left:45px;top:84px;width:300px;height:425px}
.mob .paper{cursor:pointer}
.mob .paper-bk{transform:rotate(2deg) translate(10px,10px)}
.mob .stats{left:0;right:0;margin:0 auto;width:max-content;top:540px;grid-template-columns:auto auto;gap:14px 56px;justify-items:center;text-align:center}
.mob .stats .n{font-size:46px}
.mob .stats .l{font-size:11px;padding:2px 6px}
.mob .dl{left:0!important;right:0!important;margin:0 auto;width:max-content;top:710px!important}
.mob .dl .slab{padding:8px 20px 10px 10px!important;gap:10px!important}
.mob .dl .d{font-size:38px!important}
.mob .hname.off{display:none}
.mob .dl .slab>.m{display:none!important}
.mob .toast{top:66px}
.paper .ptag{display:none}
.mob .paper .ptag{display:block;position:absolute;right:8px;top:8px;background:var(--yellow);color:var(--ink);font-size:12px;font-weight:700;padding:4px 8px;box-shadow:3px 3px 0 var(--ink)}
.msel{position:absolute;left:18px;top:506px;z-index:2;background:var(--ink);padding:4px 9px;font-size:12px;color:var(--yellow);white-space:nowrap}
.msel span{display:inline-block}
.mtype{animation:mtype .35s steps(12,end) both}
@keyframes mtype{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.mob .ray-shift{transition:transform .7s var(--ease-expo)}