/* Dequavious Von: site styles */
html,body{height:100%;overflow:hidden;overscroll-behavior:none;scrollbar-width:none;margin:0;background:#1a0634;color-scheme:dark}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
body{margin:0;background:#260a4a;font-family:'Archivo',sans-serif;color:#ffffff}
a{color:#e8bd5a}a:hover{color:#f7df94}
/* gold foil with a travelling highlight */
.foil,.foil-bg{background-image:linear-gradient(110deg,#c08f32 0%,#f2d27e 14%,#d6a23e 28%,#c08f32 40%,#fff7dc 50%,#c08f32 60%,#d6a23e 72%,#f2d27e 86%,#c08f32 100%);background-size:200% 100%;animation:sweep 3.6s linear infinite}
.foil{-webkit-background-clip:text;background-clip:text;color:transparent}
.slow{animation-duration:6s}
@keyframes sweep{from{background-position:200% 0}to{background-position:0% 0}}
.glow{filter:drop-shadow(0 0 16px rgba(247,210,126,0.35)) drop-shadow(0 0 44px rgba(170,90,255,0.45))}
.pulse{animation:pulse 4.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.rays{background:repeating-conic-gradient(from 0deg,rgba(247,223,148,0.10) 0deg 5deg,transparent 5deg 15deg);-webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gem{position:absolute;top:-90px;animation:fall linear infinite;will-change:transform}
@keyframes fall{from{transform:translateY(0)}to{transform:translateY(var(--fall,1260px))}}
.gem .sway{display:block;animation:sway ease-in-out infinite alternate;transform-style:preserve-3d}
@keyframes sway{from{transform:translateX(-16px) rotate(-14deg) rotateY(-55deg)}to{transform:translateX(16px) rotate(14deg) rotateY(55deg)}}
.cash{display:block;font-family:'Bodoni Moda',serif;font-weight:900;line-height:1;background-image:linear-gradient(165deg,#fff8dc 0%,#f5d77f 16%,#b8862b 36%,#fbe7a1 50%,#8f6218 68%,#e2b95a 86%,#fff1c2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.track{display:flex;align-items:center;gap:40px;width:max-content;animation:slide 32s linear infinite}
.track.rev{animation-direction:reverse;animation-duration:42s}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.btn{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.75),transparent);transform:skewX(-20deg);animation:glint 4s ease-in-out infinite}
@keyframes glint{0%,70%{left:-60%}100%{left:130%}}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(247,223,148,.7),0 10px 36px rgba(232,189,90,.4)}
.icon{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.icon:hover{border-color:#f2d27e;transform:translateY(-2px);box-shadow:0 0 24px rgba(247,210,126,.45)}
.cell{transition:transform .25s ease,box-shadow .25s ease}
.cell:hover{transform:translateY(-6px);box-shadow:0 0 40px rgba(247,210,126,.35),0 0 80px rgba(170,90,255,.45)}
.cell .bar{transform:scaleX(.25);transition:transform .35s ease}
.cell:hover .bar{transform:scaleX(1)}
.drift{transition:transform .5s cubic-bezier(.2,.7,.2,1)}

/* ===== ENTRY GATE: Pimp Pass swipe ===== */
.gate{position:absolute;left:0;top:0;width:100%;height:100%;z-index:20;overflow:hidden;transition:opacity .5s ease 2.7s}
.gate.breaking{opacity:0;pointer-events:none}
.gate-bg{position:absolute;left:0;top:0;width:100%;height:100%;background:#1a0634;transform-origin:960px 721px}
.gate.breaking .gate-bg{animation:bgout 1.3s cubic-bezier(.5,0,.3,1) 1.65s forwards}
@keyframes bgout{0%{transform:none;opacity:1}100%{transform:scale(1.6);opacity:0}}
.bevel{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;text-transform:uppercase;line-height:1;-webkit-text-stroke:1.2px #6e4a10;filter:drop-shadow(0 3px 0 #5a3a0c) drop-shadow(0 10px 18px rgba(10,2,24,.7)) drop-shadow(0 0 26px rgba(247,210,126,.25))}
.gate.breaking .headline{animation:lift .6s cubic-bezier(.5,0,.3,1) .1s forwards}
@keyframes lift{to{opacity:0;transform:translateY(-60px) scale(.96);filter:blur(4px)}}
/* the Pimp Pass card */
.card-clip{position:absolute;left:0;top:0;width:1920px;height:568px;overflow:hidden;pointer-events:none}
.pass{position:absolute;left:580px;top:390px;width:340px;height:214px;padding:0;border:0;background:none;cursor:grab;touch-action:none;pointer-events:auto;-webkit-user-select:none;user-select:none;will-change:transform}
.pass.grab{cursor:grabbing}
.pass:focus-visible .pass-face{outline:3px solid #fff3c4;outline-offset:5px}
.pass-nudge,.pass-in{display:block;width:100%;height:100%}
.pass-nudge{animation:nudge 2.8s ease-in-out infinite}
@keyframes nudge{0%,50%,100%{transform:none}68%{transform:translateX(40px)}84%{transform:none}}
.pass.grab .pass-nudge,.gate.fail .pass-nudge,.gate.breaking .pass-nudge{animation:none}
.pass-face{position:relative;display:block;width:340px;height:214px;box-sizing:border-box;border-radius:16px;overflow:hidden;text-align:left;
background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),linear-gradient(135deg,#2c0c52 0%,#170530 42%,#3b1172 68%,#12031f 100%);
box-shadow:0 0 0 1.5px #6e4a10,0 0 0 3.5px #e2b24c,0 0 0 5px #6e4a10,0 18px 40px rgba(10,2,24,.65),0 0 44px rgba(170,90,255,.4)}
.pass-sheen{position:absolute;top:-30%;bottom:-30%;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),rgba(247,223,148,.35),transparent);transform:skewX(-20deg);animation:passsheen 4s ease-in-out infinite;pointer-events:none}
@keyframes passsheen{0%,55%{left:-60%}100%{left:140%}}
.chip{position:absolute;left:26px;top:74px;width:48px;height:38px;border-radius:7px;background-image:linear-gradient(100deg,#5e3d0a 0%,#a8741c 8%,#f3cf6e 15%,#fff8dc 19%,#f0c75e 23%,#b3801f 31%,#7a5212 38%,#c8952f 46%,#ffe9a8 52%,#fffdf2 55%,#f6d98a 58%,#c08f32 66%,#8f6218 74%,#d9a841 82%,#fff3c4 88%,#e2b24c 93%,#6e4a10 100%);background-size:300% 100%;background-position:40% 0;box-shadow:inset 0 0 0 1px #6e4a10,inset 0 2px 1px rgba(255,250,230,.7)}
.chip::before{content:"";position:absolute;left:16px;right:16px;top:0;bottom:0;border-left:1px solid rgba(110,74,16,.8);border-right:1px solid rgba(110,74,16,.8)}
.chip::after{content:"";position:absolute;left:0;right:0;top:12px;bottom:12px;border-top:1px solid rgba(110,74,16,.8);border-bottom:1px solid rgba(110,74,16,.8)}
.holo{position:absolute;right:24px;top:70px;width:52px;height:40px;border-radius:6px;background:conic-gradient(from 0deg,#f7df94,#c38bff,#7fe3ff,#fff3c4,#e2b24c,#b57cff,#f7df94);opacity:.85;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);animation:holo 6s linear infinite}
@keyframes holo{to{filter:hue-rotate(360deg)}}
.emboss{font-family:'DM Mono',monospace;font-weight:500;color:#f2d27e;text-shadow:0 1px 0 #6e4a10,0 -1px 0 rgba(255,250,230,.35),0 2px 4px rgba(0,0,0,.6);letter-spacing:.12em;text-transform:uppercase}
.gate.breaking .pass-face{animation:readglow .9s ease-out}
@keyframes readglow{30%{box-shadow:0 0 0 1.5px #6e4a10,0 0 0 3.5px #fff3c4,0 0 0 5px #6e4a10,0 18px 40px rgba(10,2,24,.65),0 0 90px rgba(247,210,126,.9)}}
.gate.breaking .pass-in{animation:passout 1s cubic-bezier(.5,0,.3,1) .35s forwards}
@keyframes passout{0%{transform:none}30%{transform:translateY(-36px)}100%{transform:translateY(-440px) rotate(-7deg) scale(.9);opacity:0}}
.swipe-tip{position:absolute;left:580px;top:344px;width:760px;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:#f7df94;text-shadow:0 2px 6px rgba(10,2,24,.8);pointer-events:none;transition:opacity .3s ease}
.swipe-tip .line{flex-grow:1;height:2px;background:linear-gradient(90deg,rgba(247,223,148,.8),rgba(247,223,148,0));}
.gate.breaking .swipe-tip{opacity:0}
/* the deposit box */
.box{position:absolute;left:0;top:0;width:1920px;height:1080px;perspective:1600px;perspective-origin:960px 721px}
.gate.breaking .box{animation:jolt .4s ease-out .85s}
@keyframes jolt{0%{transform:none}30%{transform:translateY(12px)}65%{transform:translateY(-4px)}100%{transform:none}}
.slit-glow{position:absolute;left:760px;top:496px;width:400px;height:140px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,190,.9),rgba(247,210,126,.4) 45%,transparent);opacity:.25;animation:slotpulse 2.2s ease-in-out infinite;pointer-events:none}
@keyframes slotpulse{0%,100%{opacity:.18}50%{opacity:.45}}
.gate.breaking .slit-glow{animation:slotflash 1.2s ease-out .85s forwards}
@keyframes slotflash{0%{opacity:.3;transform:scale(1)}15%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(2.4)}}
.beam{position:absolute;left:850px;top:-34px;width:220px;height:600px;background:linear-gradient(0deg,rgba(255,244,205,.95),rgba(247,210,126,.45) 40%,transparent);transform-origin:50% 100%;transform:scaleY(0);opacity:0;filter:blur(6px);pointer-events:none}
.gate.breaking .beam{animation:beam 1.1s cubic-bezier(.2,.7,.3,1) .88s forwards}
@keyframes beam{0%{transform:scaleY(0);opacity:0}25%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1.2) scaleX(1.8);opacity:0}}
.rail{position:absolute;left:560px;top:542px;width:800px;height:52px;border-radius:26px;background-image:linear-gradient(100deg,#5e3d0a 0%,#a8741c 8%,#f3cf6e 15%,#fff8dc 19%,#f0c75e 23%,#b3801f 31%,#7a5212 38%,#c8952f 46%,#ffe9a8 52%,#fffdf2 55%,#f6d98a 58%,#c08f32 66%,#8f6218 74%,#d9a841 82%,#fff3c4 88%,#e2b24c 93%,#6e4a10 100%);background-size:300% 100%;animation:sweep 7s linear infinite;box-shadow:inset 0 3px 2px rgba(255,250,230,.75),inset 0 -5px 6px rgba(90,58,12,.6),0 0 0 1.5px #6e4a10,0 12px 26px rgba(10,2,24,.55)}
.groove{position:absolute;left:22px;right:22px;top:20px;height:12px;border-radius:6px;background:#0c0214;box-shadow:inset 0 4px 6px rgba(0,0,0,.95),0 1px 0 rgba(255,250,230,.65),0 -1px 0 rgba(90,58,12,.6)}
.gate.breaking .rail{animation:fadeout .4s ease 1.35s forwards}
.led{position:absolute;left:640px;top:714px;width:14px;height:14px;border-radius:50%;background:#b57cff;box-shadow:0 0 10px #b57cff,0 0 0 2px #2a0b52;animation:ledblink 1.2s ease-in-out infinite}
@keyframes ledblink{50%{opacity:.35}}
.gate.fail .led{background:#ff6b8a;box-shadow:0 0 12px #ff6b8a,0 0 0 2px #2a0b52}
.gate.breaking .led{animation:none;background:#fff3c4;box-shadow:0 0 16px #f7df94,0 0 34px #f7df94,0 0 0 2px #2a0b52;transition:background .1s linear .85s,box-shadow .1s linear .85s}
@keyframes fadeout{to{opacity:0}}
.half{position:absolute;top:566px;width:400px;height:310px;overflow:hidden;backface-visibility:hidden}
.half.l{left:560px;transform-origin:0 50%}
.half.r{left:960px;transform-origin:100% 50%}
.half .plate{position:absolute;top:0;left:0;width:800px;height:310px}
.half.r .plate{left:-400px}
.gate.breaking .half.l{animation:doorL 1.1s cubic-bezier(.55,0,.25,1) 1.35s forwards}
.gate.breaking .half.r{animation:doorR 1.1s cubic-bezier(.55,0,.25,1) 1.35s forwards}
@keyframes doorL{0%{transform:none}100%{transform:rotateY(-108deg);opacity:.15}}
@keyframes doorR{0%{transform:none}100%{transform:rotateY(108deg);opacity:.15}}
.studs{background-color:#c8952f;background-image:radial-gradient(circle at 42% 42%,#fff0b8 0 1.6px,#7a5212 2.5px,transparent 3.2px);background-size:10px 10px}
.inner-light{position:absolute;left:560px;top:566px;width:800px;height:310px;border-radius:36px;background:radial-gradient(closest-side,#fffaf0,#ffe9a8 35%,#f2c45c 65%,rgba(170,90,255,.6));opacity:0;pointer-events:none}
.gate.breaking .inner-light{animation:innerlight 1.5s ease-out 1.3s forwards}
@keyframes innerlight{0%{opacity:0;transform:none}25%{opacity:1;transform:none}100%{opacity:0;transform:scale(3.2)}}
.front-ui{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none}
.front-ui > *{pointer-events:auto}
.gate.breaking .front-ui{animation:fadeout .3s ease 1.3s forwards}
.display{position:absolute;left:620px;top:682px;width:360px;height:78px;box-sizing:border-box;border-radius:14px;background:#0f0320;box-shadow:inset 0 4px 14px rgba(0,0,0,.8),0 0 0 3px #6e4a10,0 0 0 5px #f2d27e,0 0 0 7px #6e4a10;display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.disp-a{position:absolute;font-size:22px;color:#f7df94;text-shadow:0 0 8px rgba(247,210,126,.9),0 0 22px rgba(247,210,126,.5);animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.disp-b{position:absolute;font-size:20px;color:#ffffff;text-shadow:0 0 8px #fff3c4,0 0 24px rgba(247,210,126,.9);opacity:0}
.gate.breaking .disp-a,.gate.fail .disp-a{animation:none;opacity:0}
.disp-r,.disp-f{position:absolute;font-size:20px;opacity:0}
.disp-r{color:#f7df94;text-shadow:0 0 8px rgba(247,210,126,.9)}
.disp-f{color:#ffc2cf;text-shadow:0 0 8px rgba(255,107,138,.9)}
.gate.fail .disp-f{opacity:1}
.gate.breaking .disp-r{animation:readshow .85s steps(1,end) forwards}
@keyframes readshow{0%{opacity:1}100%{opacity:0}}
.gate.breaking .disp-b{opacity:1;transition:opacity .05s linear .85s}
.unlock{transition:transform .2s ease}
.unlock:hover{transform:scale(1.03)}
.gate.breaking .unlock{animation:press .5s cubic-bezier(.5,0,.3,1) forwards}
@keyframes press{0%{transform:none;opacity:1}35%{transform:scale(.92);opacity:1}100%{transform:scale(1.08);opacity:0;filter:blur(3px)}}
.halo{animation:halo 2.4s ease-in-out infinite}
@keyframes halo{0%,100%{box-shadow:0 0 0 2px #6e4a10,0 0 30px rgba(247,210,126,.3),0 0 60px rgba(170,90,255,.35)}50%{box-shadow:0 0 0 2px #6e4a10,0 0 50px rgba(247,210,126,.6),0 0 100px rgba(170,90,255,.6)}}
/* impact effects */
.ring{position:absolute;left:860px;top:466px;width:200px;height:200px;box-sizing:border-box;border-radius:50%;border:6px solid #f7df94;box-shadow:0 0 30px rgba(247,210,126,.8),inset 0 0 30px rgba(247,210,126,.6);opacity:0;pointer-events:none}
.gate.breaking .ring{animation:ring 1.1s cubic-bezier(.1,.7,.3,1) .88s forwards}
.gate.breaking .ring.two{top:621px;animation-delay:1.4s;border-width:4px}
@keyframes ring{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(9)}}
.flash{position:absolute;left:0;top:0;width:1920px;height:1080px;background:radial-gradient(circle at 960px 721px,rgba(255,250,230,1),rgba(255,236,170,.85) 25%,rgba(200,150,255,.35) 60%,transparent 85%);opacity:0;pointer-events:none}
.gate.breaking .flash{animation:flash .9s ease-out 1.45s forwards}
@keyframes flash{0%{opacity:0}20%{opacity:.95}100%{opacity:0}}
.pt{position:absolute;opacity:0;pointer-events:none;transition:transform 1.6s cubic-bezier(.12,.8,.3,1)}
.gate.breaking .pt{animation:ptfade 1.7s ease-out forwards}
@keyframes ptfade{0%{opacity:0}8%{opacity:1}70%{opacity:1}100%{opacity:0}}
.shard{background:linear-gradient(135deg,#fff7dc,#e2b24c 45%,#7a5212);clip-path:polygon(50% 0,100% 40%,60% 100%,0 55%);filter:drop-shadow(0 0 6px rgba(247,210,126,.8))}
.spk{border-radius:50%;background:radial-gradient(circle,#ffffff 0,#fff3c4 35%,rgba(247,210,126,0) 70%)}
/* site entrance */
.enter-hero{animation:inHero 1.7s cubic-bezier(.2,.7,.2,1) 1.75s both}
@keyframes inHero{from{transform:scale(1.14);filter:blur(10px);opacity:0}to{transform:none;filter:none;opacity:1}}
.enter-rise{animation:inRise 1.2s cubic-bezier(.2,.7,.2,1) 2.15s both}
@keyframes inRise{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.enter-top{animation:inTop .9s cubic-bezier(.2,.7,.2,1) 2s both}
@keyframes inTop{from{transform:translateY(-100%)}to{transform:none}}
.enter-bot{animation:inBot .9s cubic-bezier(.2,.7,.2,1) 2s both}
@keyframes inBot{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.gate.breaking *,.halo,.pass-nudge,.pass-sheen,.holo,.led,.rail,.slit-glow,.enter-hero,.enter-rise,.enter-top,.enter-bot{animation:none!important}.gate.breaking .pt{opacity:0}}
/* ===== 3D spinning portrait on a gold bar ===== */
.spin-scene{position:absolute;left:0;top:0;width:660px;height:944px;perspective:1900px;perspective-origin:330px 420px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.spin-scene:active{cursor:grabbing}
.rotor{position:absolute;left:0;top:0;width:660px;height:944px;transform-style:preserve-3d;transform-origin:330px 430px 0}
.face{position:absolute;left:50px;top:150px;width:560px;height:560px;border-radius:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.face.front{transform:translateZ(15px)}
.face.back{transform:translateZ(-15px) rotateY(180deg)}
.slice{position:absolute;left:50px;top:150px;width:560px;height:560px;border-radius:50%;background-image:repeating-linear-gradient(90deg,rgba(60,30,0,.45) 0 3px,rgba(255,240,200,.12) 3px 7px),linear-gradient(100deg,#5e3d0a 0%,#a8741c 8%,#f3cf6e 15%,#fff8dc 19%,#f0c75e 23%,#b3801f 31%,#7a5212 38%,#c8952f 46%,#ffe9a8 52%,#fffdf2 55%,#f6d98a 58%,#c08f32 66%,#8f6218 74%,#d9a841 82%,#fff3c4 88%,#e2b24c 93%,#6e4a10 100%);background-size:100% 100%,300% 100%;background-position:0 0,var(--sh2,50%) 0}
.engrave{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;text-transform:uppercase;color:#7a5212;text-shadow:0 1px 0 rgba(255,247,220,.7),0 -1px 0 rgba(60,30,5,.35)}
.floor{position:absolute;left:110px;top:735px;width:440px;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgba(10,2,24,.7),rgba(10,2,24,0));pointer-events:none}
.spin-hint{position:absolute;left:0;width:660px;top:780px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#f7df94;text-shadow:0 2px 6px rgba(10,2,24,.8);pointer-events:none;transition:opacity .6s ease}
.spin-hint.seen{opacity:0}
.spin-hint svg{animation:hintspin 2.4s ease-in-out infinite}
@keyframes hintspin{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}}
/* ===== polished metal (reflection moves with the spin) ===== */
.metal{background-image:linear-gradient(100deg,#5e3d0a 0%,#a8741c 8%,#f3cf6e 15%,#fff8dc 19%,#f0c75e 23%,#b3801f 31%,#7a5212 38%,#c8952f 46%,#ffe9a8 52%,#fffdf2 55%,#f6d98a 58%,#c08f32 66%,#8f6218 74%,#d9a841 82%,#fff3c4 88%,#e2b24c 93%,#6e4a10 100%);background-size:300% 100%;background-position:var(--sh,50%) 0;background-repeat:no-repeat}
.metal-edge{background-image:linear-gradient(100deg,#5e3d0a 0%,#a8741c 8%,#f3cf6e 15%,#fff8dc 19%,#f0c75e 23%,#b3801f 31%,#7a5212 38%,#c8952f 46%,#ffe9a8 52%,#fffdf2 55%,#f6d98a 58%,#c08f32 66%,#8f6218 74%,#d9a841 82%,#fff3c4 88%,#e2b24c 93%,#6e4a10 100%);background-size:300% 100%;background-position:var(--sh2,50%) 0;background-repeat:no-repeat}
/* ===== social buttons above the timer ===== */
.social{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1f0840;text-decoration:none;box-shadow:0 0 0 2px #6e4a10,0 0 0 4px #f2d27e,0 0 0 6px #6e4a10,0 10px 24px rgba(10,2,24,.55);transition:transform .2s ease,box-shadow .2s ease}
.social:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 0 0 2px #6e4a10,0 0 0 4px #fff3c4,0 0 0 6px #6e4a10,0 12px 28px rgba(10,2,24,.6),0 0 34px rgba(247,210,126,.55)}
.social:focus-visible{outline:3px solid #fff3c4;outline-offset:6px}
/* ===== launch view ===== */
.site .ca-pending{text-shadow:0 2px 0 #5a0010,0 0 18px rgba(255,60,60,.55),0 6px 18px rgba(10,2,24,.75)}
.site h2.arrived{text-shadow:0 3px 0 rgba(20,4,40,.4),0 8px 24px rgba(10,2,24,.7)}
/* ===== sound toggle ===== */
.snd{position:absolute;right:32px;bottom:92px;z-index:5;width:60px;height:60px;padding:0;border:0;border-radius:50%;background:#1f0840;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #6e4a10,0 0 0 4px #f2d27e,0 0 0 6px #6e4a10,0 12px 26px rgba(10,2,24,.6);transition:transform .2s ease,box-shadow .2s ease}
.snd:hover{transform:scale(1.08);box-shadow:0 0 0 2px #6e4a10,0 0 0 4px #fff3c4,0 0 0 6px #6e4a10,0 12px 26px rgba(10,2,24,.6),0 0 30px rgba(247,210,126,.55)}
.snd:focus-visible{outline:3px solid #fff3c4;outline-offset:6px}
.snd.on::after{content:"";position:absolute;left:-6px;top:-6px;right:-6px;bottom:-6px;border-radius:50%;border:2px solid rgba(247,210,126,.7);animation:sndpulse 1.8s ease-out infinite;pointer-events:none}
@keyframes sndpulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.snd.on::after{animation:none;opacity:0}}
/* ===== performance ===== */
.gate-stage{position:absolute;left:0;top:0;width:1920px;height:1080px}
.wobble{position:absolute;left:0;top:0;width:660px;height:944px;transform-style:preserve-3d;transform-origin:330px 430px 0;animation:coinsway 5s ease-in-out infinite alternate}
@keyframes coinsway{from{transform:rotateY(-14deg)}to{transform:rotateY(14deg)}}
.coin-rim{border-radius:50%;box-sizing:border-box;padding:20px;box-shadow:inset 0 0 0 2px #6e4a10,inset 0 4px 3px rgba(255,250,230,.6),inset 0 -5px 6px rgba(90,58,12,.55),0 0 60px rgba(170,90,255,.4);animation:coinsheen 10s linear infinite}
@keyframes coinsheen{0%{background-position:0% 0}50%{background-position:100% 0}100%{background-position:0% 0}}
.reed{width:100%;height:100%;box-sizing:border-box;padding:12px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#fff3c4 0deg 1.4deg,#c8952f 1.4deg 3.6deg,#6e4a10 3.6deg 4.5deg);box-shadow:0 0 0 2px #6e4a10,inset 0 0 0 2px #6e4a10}
.coin-field{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 3px #6e4a10,inset 0 10px 30px rgba(255,247,220,.25),inset 0 -24px 40px rgba(40,10,60,.55)}
.coin-band{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);padding:6px 18px;white-space:nowrap;border-radius:999px;box-shadow:inset 0 0 0 1.5px #6e4a10,inset 0 2px 1px rgba(255,250,230,.7),0 4px 10px rgba(10,2,24,.5)}
.site .cell.foil-bg{animation:none}
/* ===== DEPTH: soft drop shadows on site text & timer ===== */
.site p,.site h2,.site footer span,.site .cell span{text-shadow:0 2px 4px rgba(10,2,24,.55),0 8px 22px rgba(10,2,24,.55)}
.site .cell span:first-child{text-shadow:0 3px 0 rgba(20,4,40,.35),0 10px 26px rgba(10,2,24,.7),0 0 40px rgba(150,80,240,.25)}
.site .foil{text-shadow:none}
.site .foil:not(.bevel){filter:drop-shadow(0 3px 5px rgba(10,2,24,.65))}
.site .foil.glow{filter:drop-shadow(0 4px 8px rgba(10,2,24,.6)) drop-shadow(0 0 16px rgba(247,210,126,.35)) drop-shadow(0 0 44px rgba(170,90,255,.45))}
.site .cell{box-shadow:0 22px 46px rgba(10,2,24,.55),0 6px 14px rgba(10,2,24,.45)}
.site .cell:hover{box-shadow:0 26px 54px rgba(10,2,24,.6),0 0 40px rgba(247,210,126,.35),0 0 80px rgba(170,90,255,.45)}
.site .cell .bar{box-shadow:0 2px 6px rgba(10,2,24,.6)}
.site .foil-bg .track{text-shadow:0 1px 0 rgba(255,247,220,.55),0 2px 5px rgba(90,58,12,.5)}
.site .track.rev{text-shadow:0 2px 6px rgba(10,2,24,.8),0 0 18px rgba(247,210,126,.25)}
.site .btn{box-shadow:0 12px 28px rgba(10,2,24,.5)}
.site .btn:hover{box-shadow:0 0 0 1px rgba(247,223,148,.7),0 14px 36px rgba(10,2,24,.55),0 10px 36px rgba(232,189,90,.4)}
@media (prefers-reduced-motion:reduce){.foil,.foil-bg,.track,.pulse,.rays,.gem,.gem .sway,.float,.btn::after{animation:none}.drift{transition:none}}

/* ===== standalone page shell ===== */
/* phones & touch screens: fewer continuous repaints */
.stage.lite .foil-bg{animation:none}
.stage.lite .btn::after{display:none}
.stage.lite .drift{transition:none}
.stage.lite .pass-sheen,.stage.lite .holo,.stage.lite .pave::after{animation:none}
.stage.lite .rays{animation:none}
/* portrait layout (1080 x 1920 stage) */
.stage.is-phone #top{left:210px!important;top:calc(72px + var(--dy, 0px))!important}
.stage.is-phone .spin-scene{transform:scale(1.15);transform-origin:330px 472px}
.stage.is-phone #timer{left:40px!important;top:calc(1075px + var(--dy, 0px))!important}
.stage.is-phone #timer p{font-size:34px!important;max-width:1000px!important}
.stage.is-phone #preLaunch > div:first-child span.foil{font-size:22px!important}
.stage.is-phone #timer .cell span:last-child{font-size:20px!important}
.stage.is-phone #foot{left:40px!important;top:calc(1740px + var(--dy, 0px))!important;flex-direction:column;align-items:center;gap:8px!important;font-size:22px!important}
.stage.is-phone .gate-stage{transform-origin:960px 480px;transform:translate(-420px,calc(480px + var(--dy, 0px))) scale(1.25)}
.stage.is-phone .gate-bg{transform-origin:540px calc(960px + var(--dy, 0px))}
.stage.is-phone .gate-bg > div:not(:last-child){transform:translate(-420px,calc(480px + var(--dy, 0px)))}
.stage.is-phone .headline span:first-child{font-size:30px!important}
.stage.is-phone .headline span:last-child{font-size:58px!important}
/* widescreen: the stage stretches to the window, content stays centred */
.stage:not(.is-phone) #top{left:calc(140px + var(--dx, 0px))!important;top:calc(72px + var(--dy, 0px))!important}
.stage:not(.is-phone) #timer{left:calc(840px + var(--dx, 0px))!important;top:calc(262px + var(--dy, 0px))!important}
.stage:not(.is-phone) #foot{left:calc(840px + var(--dx, 0px))!important;top:calc(850px + var(--dy, 0px))!important}
.stage:not(.is-phone) .gate-stage{transform:translate(var(--dx, 0px), var(--dy, 0px))}
.stage:not(.is-phone) .gate-bg{transform-origin:calc(960px + var(--dx, 0px)) calc(721px + var(--dy, 0px))}
.stage:not(.is-phone) .gate-bg > div:not(:last-child){transform:translate(var(--dx, 0px), var(--dy, 0px))}
.stage [data-enter="enter-top"],.stage [data-enter="enter-top"] > div,.stage [data-enter="enter-bot"],.stage [data-enter="enter-bot"] > div{width:100%!important}
/* phones: extra savings */
.stage.lite .foil,.stage.lite .coin-rim,.stage.lite .snd.on::after{animation:none}
.stage.lite .halo{animation:none;box-shadow:0 0 0 2px #6e4a10,0 0 40px rgba(247,210,126,.4)}
.stage.lite .glow{filter:none}
.stage.lite .gem .sway{animation-name:sway2d}
@keyframes sway2d{from{transform:translateX(-12px) rotate(-12deg)}to{transform:translateX(12px) rotate(12deg)}}
.stage.lite .shard,.stage.lite .pt img{filter:none!important}
.stage.lite .enter-hero{animation-name:inHeroLite}
@keyframes inHeroLite{from{transform:scale(1.08);opacity:0}to{transform:none;opacity:1}}
.stage.lite .gate.breaking .headline{animation-name:liftLite}
@keyframes liftLite{to{opacity:0;transform:translateY(-60px) scale(.96)}}
.stage.lite .gate.breaking .unlock{animation-name:pressLite}
@keyframes pressLite{0%{transform:none;opacity:1}35%{transform:scale(.92);opacity:1}100%{transform:scale(1.08);opacity:0}}
/* phones: lightest settings */
.stage.lite .slice{display:none}
.stage.lite .coin-rim{box-shadow:inset 0 0 0 2px #6e4a10,inset 0 4px 3px rgba(255,250,230,.6),inset 0 -5px 6px rgba(90,58,12,.55)}
.stage.lite .gem .sway{animation:none}
.stage.lite .track,.stage.lite .track span{text-shadow:none!important}
.stage.lite .cell,.stage.lite .cell:hover{box-shadow:none!important;transform:none!important}
.stage.lite .cell > div{box-shadow:none!important}
.stage.lite .spin-hint svg{animation:none}
.stage.lite .gate-bg > div:first-child{background:radial-gradient(closest-side, rgba(140,70,230,0.45), transparent)!important}
.stage.is-phone .socials{gap:48px!important;margin-bottom:10px}
.stage.is-phone .social{transform:scale(1.3)}
/* shown only if a phone blocked the music */
.snd.ask{animation:askpulse 1.4s ease-in-out infinite}
@keyframes askpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.snd.ask::before{content:"Tap for sound";position:absolute;right:78px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:10px 16px;border-radius:999px;background:#1f0840;color:#f7df94;font:800 16px/1 'Archivo',sans-serif;letter-spacing:.18em;text-transform:uppercase;box-shadow:0 0 0 2px #6e4a10,0 8px 20px rgba(10,2,24,.5)}
.stage.is-phone .snd.ask::before{font-size:24px;padding:14px 22px;right:84px}
/* phones: pass activated by a tap, ready to be swiped */
.gate.armed .pass-face{box-shadow:0 0 0 1.5px #6e4a10,0 0 0 3.5px #fff3c4,0 0 0 5px #6e4a10,0 18px 40px rgba(10,2,24,.65),0 0 60px rgba(247,210,126,.75)}
.gate.armed .pass-nudge{animation:nudgeArmed 1.4s ease-in-out infinite}
@keyframes nudgeArmed{0%,40%,100%{transform:none}65%{transform:translateX(60px)}}
.gate.armed .led{background:#f7df94;box-shadow:0 0 12px #f7df94,0 0 0 2px #2a0b52}
.gate.armed .pass.grab .pass-nudge{animation:none}
.gate.armed.breaking .pass-nudge,.gate.armed.fail .pass-nudge{animation:none}
/* phones: bigger launch view (contract address + buttons) */
.stage.is-phone #postLaunch h2{font-size:72px!important}
.stage.is-phone .ca-pending{font-size:46px!important}
.stage.is-phone #caText{font-size:30px}
.stage.is-phone #copyBtn{height:84px!important;font-size:24px!important;padding:0 40px!important}
.stage.is-phone #postLaunch .btn:not(#copyBtn){height:92px!important;font-size:24px!important;padding:0 52px!important}

#viewport{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;background:#1a0634;touch-action:none}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;background:#260a4a;overflow:hidden}
[hidden]{display:none!important}