/* ===== FX layer: 3D, glass, motion ===== */
/* loader wordmark reveal */
#loader{transition:opacity .45s ease,visibility .45s}
.ld-logo{display:flex;overflow:hidden;padding:2px 0}
.ld-logo span{display:inline-block;transform:translateY(110%);animation:ldup .55s cubic-bezier(.2,.9,.25,1) forwards;animation-delay:calc(var(--i)*55ms)}
@keyframes ldup{to{transform:none}}
.ld-bar i{background:var(--acc)}
/* glass system */
.sum,.step,.rv,.proc li,.fs,.finder,.sg-fig,.cl{position:relative}
.sum.sticky{position:sticky}
.sum,.step,.rv,.proc li,.fs,.sg-fig,.cl,.sr-it:hover{background:linear-gradient(155deg,rgba(255,255,255,.72),rgba(255,255,255,.32));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.8);box-shadow:0 14px 34px rgba(40,36,28,.08),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(20,20,20,.04)}
.srch-in,.flt-sheet{background:linear-gradient(160deg,rgba(246,244,239,.86),rgba(236,233,226,.78));-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);border:1px solid rgba(255,255,255,.8);box-shadow:0 30px 60px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.95)}
.satc{background:linear-gradient(160deg,rgba(28,28,28,.86),rgba(14,14,14,.9));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 36px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14)}
.pdp-i{position:relative}
@media (min-width:900px){.pdp-i{padding:26px;border-radius:28px;background:linear-gradient(155deg,rgba(255,255,255,.62),rgba(255,255,255,.24));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.8);box-shadow:0 20px 50px rgba(40,36,28,.08),inset 0 1px 0 rgba(255,255,255,.9)}}
.hdr.glass::after,.sum::after,.step::after,.rv::after,.pdp-i::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
/* grain overlay */
.grain{position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-37px 23px}40%{background-position:41px -29px}60%{background-position:-19px -47px}80%{background-position:53px 31px}}
/* progress + to top */
.prog{position:fixed;left:0;top:0;right:0;height:2px;background:var(--acc);transform-origin:0 50%;transform:scaleX(0);z-index:120;pointer-events:none}
.totop{position:fixed;right:14px;bottom:calc(52px + env(safe-area-inset-bottom));z-index:43;width:44px;height:44px;border-radius:50%;font-size:18px;font-weight:700;opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
body[data-route="product"] .totop{bottom:calc(92px + env(safe-area-inset-bottom))}
body.not-home:not([data-route="product"]) .totop{bottom:calc(18px + env(safe-area-inset-bottom))}
/* reveals */
.rv-o{opacity:0;transform:translate3d(0,28px,0) scale(.985);transition:opacity .8s cubic-bezier(.2,.9,.25,1) var(--d,0ms),transform 1s cubic-bezier(.2,.9,.25,1) var(--d,0ms)}
.rv-o.rv-in{opacity:1;transform:none}
.tilt.rv-o.rv-in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
/* tilt + glare */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.9,.25,1.15)}
.tilt.tilting{transition:transform .12s linear}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),rgba(255,255,255,0) 55%);opacity:0;transition:opacity .4s;mix-blend-mode:soft-light;z-index:3}
.tilt.tilting .glare{opacity:1}
.pc-box{border-radius:18px}
.pc-box .pc-ph{transform:translateZ(0)}
.pc-box .pc-ph img{transform:translateZ(30px)}
.pc-box.tilting .pc-ph img.f{transform:translateZ(40px) scale(1.04)}
.pc-tag,.pc-wish{transform:translateZ(40px)}
/* skeleton */
.sk{background:linear-gradient(100deg,#e4e1da 30%,#f2f0eb 50%,#e4e1da 70%) !important;background-size:300% 100% !important;animation:skel 1.3s ease-in-out infinite}
.sk img{opacity:0}
.ld img{animation:imgin .7s ease}
@keyframes skel{from{background-position:100% 0}to{background-position:0 0}}
@keyframes imgin{from{opacity:0}}
/* draw-in underlines */
.lnk,.f-col a,.h-nav a,.menu-sub a,.crumb a,.pol-b a,.lead a{background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;background-size:0% 1.5px;background-position:0 100%;transition:background-size .45s cubic-bezier(.2,.9,.25,1),color .2s;text-decoration:none}
.lnk{border-bottom:1.5px solid rgba(20,20,20,.18);background-size:0% 1.5px;background-position:0 calc(100% + 1.5px);padding-bottom:3px}
.lnk:hover,.f-col a:hover,.h-nav a:hover,.menu-sub a:hover,.crumb a:hover,.pol-b a:hover,.lead a:hover{background-size:100% 1.5px}
.lead a,.pol-b a{background-size:100% 1.5px;background-image:linear-gradient(rgba(255,90,31,.5),rgba(255,90,31,.5))}
.h-nav a{background-position:50% calc(100% - 4px)}
.h-nav a.on{box-shadow:none;background-size:60% 2px}
/* magnetic transitions */
.pill,.btn.buy,.ib,.bag-btn{transition:transform .35s cubic-bezier(.2,.9,.25,1.3),background .25s,color .25s}
/* ripple */
.rip{position:absolute;border-radius:50%;background:rgba(255,90,31,.35);transform:scale(0);animation:rip .65s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
/* bag bounce + tick */
.bag-btn.bnc{animation:bnc .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes bnc{30%{transform:translateY(-5px) rotate(-6deg)}60%{transform:translateY(1px) rotate(3deg)}}
.bag-btn b.tk{animation:tick .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes tick{0%{transform:translateY(-8px) scale(.6);opacity:0}100%{transform:none;opacity:1}}
.bag-btn b.z{display:none}
/* cursor */
.cur-d,.cur-r,.spot-c{display:none}
body.fine .cur-d,body.fine .cur-r{display:block;position:fixed;left:0;top:0;z-index:400;pointer-events:none;border-radius:50%}
body.fine .cur-d{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--acc)}
body.fine .cur-r{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(20,20,20,.5);transition:width .3s cubic-bezier(.2,.9,.25,1.3),height .3s cubic-bezier(.2,.9,.25,1.3),margin .3s,border-color .3s,background .3s}
body.fine .cur-r.big{width:62px;height:62px;margin:-31px 0 0 -31px;border-color:var(--acc);background:rgba(255,90,31,.08)}
body.fine .cur-r.txt{width:4px;height:28px;margin:-14px 0 0 -2px;border-radius:2px}
body.fine .cur-r.dn{width:24px;height:24px;margin:-12px 0 0 -12px}
body.fine .spot-c{display:block;position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(520px circle at var(--x,-999px) var(--y,-999px),rgba(255,255,255,.35),transparent 60%);mix-blend-mode:soft-light}
body.fine.not-home .spot-c{z-index:2}
/* 3D viewer */
.v3d-sl{position:relative;background:radial-gradient(75% 70% at 50% 40%,#fbfaf7,#e2dfd7) !important;perspective:1100px;overflow:hidden}
.v3d{position:absolute;inset:0;display:grid;place-items:center;cursor:grab;touch-action:pan-y;perspective:1100px}
.v3d:active{cursor:grabbing}
.v3d-card{position:relative;width:86%;aspect-ratio:1000/855;transform-style:preserve-3d;will-change:transform}
.v3d-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-backface-visibility:hidden;backface-visibility:hidden;filter:drop-shadow(0 22px 22px rgba(40,36,28,.25));pointer-events:none;-webkit-user-drag:none}
.v3d-b{transform:rotateY(180deg)}
.v3d-gl{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent calc(var(--gl,50%) - 18%),rgba(255,255,255,.28) var(--gl,50%),transparent calc(var(--gl,50%) + 18%));-webkit-mask:url(/img/void-box-black.webp) center/contain no-repeat;mask:url(/img/void-box-black.webp) center/contain no-repeat;mix-blend-mode:screen;transform:translateZ(1px)}
.v3d-sh{position:absolute;left:22%;right:22%;bottom:8%;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(40,36,28,.28),transparent);filter:blur(4px)}
.v3d-hint{position:absolute;left:14px;top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);background:rgba(255,255,255,.6);padding:6px 10px;border-radius:99px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.8)}
.v3d-btns{position:absolute;right:12px;bottom:12px;display:flex;gap:4px;padding:4px;border-radius:99px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.85)}
.v3d-btns button{font-size:11.5px;font-weight:700;padding:7px 12px;border-radius:99px;transition:.25s}
.v3d-btns button.on{background:var(--ink);color:#fff}
.g-th{position:relative}
.g-th b{position:absolute;right:4px;bottom:4px;font-family:var(--mono);font-size:9px;background:var(--acc);color:#141414;padding:2px 5px;border-radius:6px}
@media (min-width:900px){.v3d-sl{grid-column:1/-1;aspect-ratio:1/1}}
/* 404 floating tee */
.nf-3d{position:relative;perspective:900px;margin:20px 0 10px;width:min(70vw,380px)}
.nf-card{position:relative;transform-style:preserve-3d;animation:nffloat 6s ease-in-out infinite;transform:rotateX(var(--py,0deg)) rotateY(var(--px,0deg))}
.nf-card .nf-tee{width:100%;margin:0;animation:none;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.nf-card .nf-tee.bk{position:absolute;inset:0;transform:rotateY(180deg)}
.nf-sh{width:60%;height:20px;margin:16px auto 0;border-radius:50%;background:radial-gradient(closest-side,rgba(40,36,28,.3),transparent);animation:nfsh 6s ease-in-out infinite}
@keyframes nffloat{0%,100%{transform:translateY(0) rotateY(-18deg) rotateX(4deg)}50%{transform:translateY(-22px) rotateY(18deg) rotateX(-4deg)}}
@keyframes nfsh{50%{transform:scale(.75);opacity:.6}}
/* lookbook perspective */
.lk-duo{perspective:1400px}
.lk-c{transform-origin:50% 50%;will-change:transform}
.lb-hero h1 span{display:inline-block;animation:lbin 1.2s cubic-bezier(.2,.9,.25,1) .2s both}
@keyframes lbin{from{transform:translateY(40px) rotateX(60deg);opacity:0}}
/* hero-wrap transitions keep 3D clean */
.hero-wrap.in{animation:none}
@media (prefers-reduced-motion:reduce){.grain{animation:none}.rv-o{opacity:1;transform:none}.nf-card,.nf-sh,.ann-in,.strip-run span{animation:none}}

html{overflow-x:clip}