:root{--ink:#111;--black:#080808;--bone:#EFEBE4;--blue:#244BFF;--org:#FF5A1F;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;--head:Anton,'Bebas Neue',Impact,'Arial Narrow',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;user-select:none;-webkit-user-drag:none}
.mono{font:600 .72rem var(--mono);letter-spacing:.18em;text-transform:uppercase}
h2{font-family:var(--head);font-weight:400;text-transform:uppercase;line-height:.9;margin:0;font-size:clamp(3rem,11vw,9rem)}
.sec{opacity:.55;margin:0 0 1.2rem}
.sub{max-width:34ch;font-size:1.05rem;line-height:1.5;opacity:.8}
/* hero */
.hero{position:relative;height:calc(100svh*4)}
.stick{position:sticky;top:0;height:100svh;overflow:hidden;perspective:1200px}
.bgt{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.bgt span{font-family:var(--head);font-size:clamp(5rem,27vw,34rem);line-height:.85;white-space:nowrap;will-change:transform}
.stage{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.sl{grid-area:1/1;margin:0;width:min(78vw,500px);height:min(62svh,500px);opacity:0;transform:translate3d(0,60px,0) scale(.85);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1)}
.sl.on{opacity:1;transform:none}.sl.pv{transform:translate3d(0,-60px,0) scale(1.1) rotate(-6deg)}
.tilt{width:100%;height:100%;transform-style:preserve-3d}
.tilt img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 28px rgba(0,0,0,.3))}
.shadow{position:absolute;bottom:11svh;width:min(46vw,320px);height:22px;border-radius:50%;background:rgba(0,0,0,.25);filter:blur(18px)}
.meta,.hint{position:absolute}
.meta{left:clamp(16px,4vw,48px);right:clamp(16px,4vw,48px);bottom:26px;display:flex;justify-content:space-between;gap:12px}
.tag{color:var(--org)}.hint{top:22px;left:clamp(16px,4vw,48px);opacity:.6}
/* products */
.pr{position:relative;background:var(--ink);color:var(--bone)}
.pr .stick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding:0 5vw;gap:2vw}
.pr ul{list-style:none;margin:0;padding:0}
.pr li{font-family:var(--head);text-transform:uppercase;font-size:clamp(2.2rem,6vw,5.2rem);line-height:1.02;opacity:.28;cursor:pointer;transition:opacity .3s,color .3s,transform .4s}
.pr li.on{opacity:1;color:var(--org);transform:translateX(14px)}
.st{position:relative;height:72svh;perspective:1100px;display:grid;place-items:center}
.it{grid-area:1/1;opacity:0;transition:opacity .45s;pointer-events:none;display:grid;place-items:center}.it.on{opacity:1}
.mxw{will-change:transform}
.spin{width:min(40vw,440px);transform-style:preserve-3d;animation:sway 7s ease-in-out infinite}
.spin img{width:100%;max-height:66svh;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55))}
@keyframes sway{0%,100%{transform:rotateY(-32deg)}50%{transform:rotateY(32deg)}}
/* countdown */
.cd{min-height:100svh;display:grid;align-content:center;justify-items:center;text-align:center;padding:12svh 5vw;background:var(--bone)}
.clock{display:flex;gap:clamp(.8rem,3vw,3rem);margin-top:5vh;flex-wrap:wrap;justify-content:center}
.clock div{display:grid;gap:.6rem}
.clock b{font-family:var(--head);font-weight:400;font-size:clamp(4.5rem,18vw,15rem);line-height:.85;font-variant-numeric:tabular-nums}
.clock .sx b{color:var(--org)}
/* pdp */
.pdp{min-height:100svh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--ink);color:var(--bone);align-items:center}
.pimg{display:grid;place-items:center;padding:6vw;background:radial-gradient(circle at 50% 45%,#2a2a2a,var(--ink) 70%)}
.pimg canvas{width:100%;max-width:640px;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.pinfo{padding:6vw 6vw 6vw 2vw}
.price{font:600 1.6rem var(--mono);margin:1.2rem 0}
.dots{display:flex;gap:14px;margin:.8rem 0 2rem}
.dot{width:42px;height:42px;border-radius:50%;border:2px solid transparent;background:var(--c);cursor:pointer;outline:2px solid rgba(239,235,228,.25);outline-offset:3px;transition:transform .2s}
.dot.on{outline-color:var(--bone);transform:scale(1.12)}
details{border-top:1px solid rgba(239,235,228,.25);padding:14px 0}details:last-of-type{border-bottom:1px solid rgba(239,235,228,.25)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between}summary::after{content:'+'}details[open] summary::after{content:'–'}
details p{margin:.8rem 0 0;line-height:1.6;opacity:.8}
.cta{margin-top:1.6rem;width:100%;padding:18px;background:var(--org);color:var(--black);border:0;opacity:.45;cursor:not-allowed}
.note{opacity:.4;margin-top:1rem;font-size:.62rem}
/* pull */
.pull{min-height:100svh;background:var(--black);color:var(--bone);padding:12svh 5vw;display:grid;justify-items:center;text-align:center;align-content:center;gap:0}
.pull .sub{margin:1.2rem auto 2rem}
.pstage,.handle{user-select:none;-webkit-user-select:none}
.pstage{position:relative;width:min(92vw,620px);touch-action:none}
.pstage>img{width:100%;display:block;filter:drop-shadow(0 30px 40px rgba(0,0,0,.7))}
.zone{position:absolute;left:11%;top:37%;width:21%;height:27%;--p:0}
.print{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;color:#111;clip-path:inset(0 0 calc((1 - var(--p))*100%) 0);transform:skewY(calc((1 - var(--p))*-5deg));font-family:var(--head);text-transform:uppercase}
.print i{font:normal 700 clamp(.5rem,1.6vw,.85rem) var(--mono);letter-spacing:.2em}
.print b{font-weight:400;font-size:clamp(3rem,11vw,6.5rem);line-height:.9;color:var(--org);-webkit-text-stroke:1px #111}
.handle{position:absolute;left:9%;width:25%;top:calc(37% + var(--hp,0)*27%);transform:translateY(-50%);padding:10px 0;background:var(--bone);color:var(--black);cursor:grab;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.5);touch-action:none}
.handle:active{cursor:grabbing}
.pst{margin:1.4rem 0 0;opacity:.7}
.rst{margin-top:1rem;background:none;color:var(--org);border:1px solid var(--org);padding:12px 22px;cursor:pointer}
/* fabric */
.fb{position:relative;height:100svh;overflow:hidden;background:var(--ink);color:var(--bone)}
.fb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fbov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,.55),rgba(8,8,8,.1) 45%,rgba(8,8,8,.8))}
.fbc{position:absolute;inset:0;padding:12svh 5vw 6svh;display:flex;flex-direction:column;justify-content:space-between}
.tags{display:flex;gap:12px;flex-wrap:wrap}.tags span{border:1px solid var(--bone);padding:10px 16px}
/* night */
.nd{position:relative;min-height:130svh;background:var(--blue);color:#fff;padding:12svh 5vw;overflow:hidden;--mx:0;--my:0}
.nd h2{position:relative;z-index:2;text-align:center;margin-top:34svh;font-size:clamp(3.4rem,13vw,11rem);mix-blend-mode:normal}
.nd .sec{text-align:center;position:relative;z-index:2}
.fl{position:absolute;z-index:1;height:auto;animation:flt 9s ease-in-out infinite;animation-delay:var(--t);filter:drop-shadow(0 30px 30px rgba(0,10,80,.45));will-change:transform}
@keyframes flt{0%,100%{transform:translate3d(calc(var(--mx)*var(--d,30)*-1px),calc(var(--my)*var(--d,30)*-1px - 12px),0) rotate(var(--r))}50%{transform:translate3d(calc(var(--mx)*var(--d,30)*-1px),calc(var(--my)*var(--d,30)*-1px + 14px),0) rotate(calc(var(--r)*-.6))}}
/* gone */
.gn{min-height:100svh;background:var(--black);color:var(--bone);display:grid;align-content:center;justify-items:center;text-align:center;padding:12svh 5vw}
.gn h2{font-size:clamp(4rem,19vw,17rem)}.gn em{font-style:normal;color:var(--org)}
.gn .sub{margin-top:2rem}
.ft{display:flex;justify-content:space-between;gap:12px;padding:28px 5vw;background:var(--black);color:var(--bone);border-top:1px solid rgba(239,235,228,.18)}
.ft span{opacity:.5}
@media(max-width:760px){
 .pr .stick{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start;padding-top:9svh}
 .pr ul{display:flex;gap:16px;overflow-x:auto;white-space:nowrap;padding-bottom:6px}.pr li{font-size:2rem}.pr li.on{transform:none}
 .spin{width:68vw}
 .pdp{grid-template-columns:1fr}.pinfo{padding:6vw}
 .fl{width:34vw!important}.nd h2{margin-top:30svh}
}
@media(prefers-reduced-motion:reduce){.spin,.fl{animation:none}.sl{transition:none}}