/* ==== RXSFA — all-black, minimal ==== */
:root{
  --bg:#000; --fg:#f2f2f2; --dim:#8a8a8a; --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.24);
  --display:'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --sans:'Inter Tight', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --pad:clamp(22px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000;color:var(--fg);-webkit-font-smoothing:antialiased;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--sans);font-weight:400;line-height:1.5;overflow-x:hidden;background:#000}
body.is-loading{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:#fff;color:#000}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.01em;font-size:clamp(44px,7vw,110px)}
.arrow{display:inline-block;transition:transform .5s var(--ease)}
@media (hover:hover) and (pointer:fine){ *{cursor:none!important} }

/* ===== loader ===== */
#loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;pointer-events:none}
.loader-bg{position:absolute;inset:0;background:#000;transition:opacity .75s cubic-bezier(.65,0,.35,1)}
.loader-inner{position:relative;width:min(420px,72vw)}
.loader-logo{width:100%;transform-origin:0 0;will-change:transform,opacity;filter:drop-shadow(0 0 14px rgba(255,255,255,.22))}
.loader-ui{transition:opacity .35s ease,transform .5s var(--ease)}
.loader-bar{position:relative;height:14px;margin-top:30px}
#mercury{position:absolute;left:-14px;top:-14px;width:calc(100% + 28px);height:42px;display:block}
.loader-meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:#e6e6e6;text-shadow:0 0 10px rgba(255,255,255,.25)}
#loader-pct{font-weight:500;font-size:13px;background:linear-gradient(100deg,#8a8a8a 0%,#fff 22%,#b5b5b5 40%,#fafafa 55%,#7d7d7d 72%,#fff 90%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 6px rgba(255,255,255,.35));animation:chrome 2.2s linear infinite;font-variant-numeric:tabular-nums}
@keyframes chrome{to{background-position:-250% 0}}
#loader.handoff .loader-bg{opacity:0}
#loader.handoff .loader-ui{opacity:0;transform:translateY(10px)}
#loader.handoff .loader-logo{filter:none}
#loader.done{display:none}
#loader.fade{transition:opacity .7s ease;opacity:0}

/* ===== overlays ===== */
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:89;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 60%,rgba(0,0,0,.6))}

/* ===== cursor (desktop / fine pointers only) ===== */
#cursor{position:fixed;left:0;top:0;z-index:120;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
#cursor.on{opacity:1}
.cursor-dot{position:fixed;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:#fff;border-radius:50%;box-shadow:0 0 10px 2px rgba(255,255,255,.9)}
.cursor-ring{position:fixed;width:46px;height:46px;margin:-23px 0 0 -23px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 14px rgba(255,255,255,.55),inset 0 0 10px rgba(255,255,255,.25);transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .3s,border-width .3s}
.cursor-label{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;color:#000;opacity:0;transition:opacity .2s}
#cursor.hover .cursor-ring{width:68px;height:68px;margin:-34px 0 0 -34px;background:#fff}
#cursor.label .cursor-ring{width:84px;height:84px;margin:-42px 0 0 -42px;background:#fff}
#cursor.label .cursor-label{opacity:1}
#cursor.down .cursor-ring{transform:scale(.82)}
@media (hover:none),(pointer:coarse){#cursor{display:none}}

/* ===== nav ===== */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px var(--pad);transition:background .5s,padding .5s var(--ease),transform .6s var(--ease),opacity .8s ease}
body.is-loading #nav{opacity:0}
#nav.scrolled{background:rgba(0,0,0,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:12px;padding-bottom:12px}
#nav.hidden{transform:translateY(-110%)}
.nav-logo img{height:32px;width:auto}
.nav-links{display:flex;gap:40px}
.nav-links a,.nav-cta{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;position:relative;padding:6px 0}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{border:1px solid var(--line2);padding:9px 16px;transition:background .3s,color .3s}
.nav-cta:hover{background:#fff;color:#000}
.nav-burger{display:none;background:none;border:0;width:34px;height:34px;position:relative}
.nav-burger span{position:absolute;left:5px;right:5px;height:1px;background:#fff;transition:transform .4s var(--ease)}
.nav-burger span:first-child{top:13px}.nav-burger span:last-child{top:21px}
.nav-burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
#mobile-menu{position:fixed;inset:0;z-index:45;background:#000;display:flex;flex-direction:column;justify-content:center;padding:var(--pad);gap:14px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
#mobile-menu.open{clip-path:inset(0 0 0 0)}
#mobile-menu a{font-family:var(--display);font-size:clamp(40px,12vw,72px);text-transform:uppercase;line-height:1}

/* ===== hero ===== */
#hero-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;touch-action:pan-y}
main,footer{position:relative;z-index:1}
#hero{height:100svh;min-height:540px;position:relative;pointer-events:none}
#hero a{pointer-events:auto}

/* buttons */
.btn{border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--line2);padding:16px 30px;position:relative;overflow:hidden;color:#fff;isolation:isolate;transition:color .45s var(--ease),border-color .3s}
.btn::before{content:'';position:absolute;inset:0;background:#fff;transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn:hover{color:#000;border-color:#fff}
.btn:hover::before{transform:translateY(0)}
.btn-solid{background:#fff;color:#000;border-color:#fff}
.btn-solid::before{background:#000}
.btn-solid:hover{color:#fff}

/* ===== panels ===== */
.panel{position:relative;background:#000;padding:clamp(100px,14vw,200px) var(--pad)}
#collection::before{content:'';position:absolute;left:0;right:0;top:-140px;height:140px;background:linear-gradient(transparent,#000);pointer-events:none}

/* collection */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(40px,6vw,80px)}
.link-under{border-bottom:1px solid var(--line2);padding-bottom:6px;transition:border-color .3s;color:#bbb;white-space:nowrap}
.link-under:hover{border-color:#fff}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2vw,32px)}
.card{grid-column:span 2;perspective:1100px;opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.card:nth-child(4),.card:nth-child(5){grid-column:span 3}
.card.in{opacity:1;transform:none}
/* products float on the page: no boxes, soft floor glow, staggered bob, lift + glow on hover */
.card-inner{position:relative;display:block}
.card-media{position:relative;aspect-ratio:3/4}
.card-media::after{content:'';position:absolute;left:18%;right:18%;bottom:3%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.09),rgba(255,255,255,.025) 55%,rgba(255,255,255,0));filter:blur(6px);animation:floorPulse 5.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.1s);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.card-float{position:absolute;inset:4% 8% 12%;animation:bob 5.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.1s)}
.card-media img{width:100%;height:100%;object-fit:contain;transition:transform .7s var(--ease),filter .7s var(--ease);filter:none}
.card:hover .card-media img{transform:translateY(-14px) scale(1.04);filter:drop-shadow(0 0 16px rgba(255,255,255,.10))}
.card:hover .card-media::after{opacity:.55;transform:scaleX(.82)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes floorPulse{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.88);opacity:.7}}
.card-tag{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--dim);margin-left:10px;vertical-align:middle}
.card-tag.sale{color:#fff}
.card.soldout img{filter:grayscale(1) brightness(.5)}
.card:nth-child(4) .card-media,.card:nth-child(5) .card-media{aspect-ratio:4/3.4}
.card-info{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 4px 0}
.card-title{font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:.02em}
.price{font-family:var(--mono);font-size:13px;letter-spacing:.04em;white-space:nowrap}
.price s{color:var(--dim);margin-right:8px}

/* featured */
#featured{background:#000}
.featured-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(36px,6vw,100px);align-items:center}
.viewer{position:relative;aspect-ratio:1/1;touch-action:pan-y}
#viewer-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.viewer-hud{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:var(--dim);pointer-events:none;font-size:10px}
.featured-info{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.featured-info .display{font-size:clamp(40px,5vw,80px)}
.feat-price{font-family:var(--mono);font-size:18px;letter-spacing:.05em;display:flex;gap:14px;align-items:center}
.feat-price s{color:var(--dim)}
.feat-price .badge{font-size:10px;letter-spacing:.2em;color:#fff}

/* footer */
#footer{background:#000;padding:clamp(80px,10vw,140px) var(--pad) 40px;display:flex;flex-direction:column;align-items:center;gap:40px}
.footer-logo{width:min(320px,60%);opacity:.9}
.socials{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.socials a{width:44px;height:44px;border:1px solid var(--line2);border-radius:50%;display:grid;place-items:center;transition:background .3s,color .3s}
.socials a svg{width:17px;height:17px;fill:currentColor}
.socials a:hover{background:#fff;color:#000}
.footer-bottom{color:var(--dim);font-size:10px}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
.reveal.in{opacity:1;transform:none}
#hero .reveal{transition-delay:.15s}

/* ===== responsive ===== */
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:block}
  .grid{grid-template-columns:repeat(2,1fr)}
  .card,.card:nth-child(4),.card:nth-child(5){grid-column:span 1}
  .card:nth-child(5){grid-column:span 2}
  .card:nth-child(5) .card-media{aspect-ratio:4/3}
  .featured-wrap{grid-template-columns:1fr}
}
@media (max-width:520px){
  .card-info{flex-direction:column;gap:4px}
  .card-title{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .grain,.marquee-track,#loader-pct,.card-float,.card-media::after{animation:none}
  .reveal,.card{transition:none;opacity:1;transform:none}
}

/* ---------------- big sound (mute) button ---------------- */
.sound-btn{position:fixed;z-index:110;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px;padding:0;background:transparent;border:0;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .8s ease}
.sound-btn::before{content:'';position:absolute;left:0;top:0;width:68px;height:68px;border-radius:50%;background:#000;border:2px solid #fff;box-shadow:0 0 18px rgba(255,255,255,.28);transition:transform .35s var(--ease),box-shadow .35s}
.sound-btn:hover::before{transform:scale(1.06);box-shadow:0 0 26px rgba(255,255,255,.45)}
.sound-btn:active::before{transform:scale(.94)}
.sound-btn:focus-visible::before{outline:2px solid #fff;outline-offset:4px}
.sound-bars{position:relative;width:68px;height:68px;display:flex;align-items:center;justify-content:center;gap:4px}
.sound-bars i{display:block;width:4px;height:8px;border-radius:2px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.6);transform-origin:50% 50%;transition:height .3s ease,opacity .3s}
.sound-bars i:nth-child(2),.sound-bars i:nth-child(4){height:14px}
.sound-bars i:nth-child(3){height:20px}
.sound-btn.is-playing .sound-bars i{animation:soundBar .9s ease-in-out infinite alternate}
.sound-btn.is-playing .sound-bars i:nth-child(1){animation-duration:.72s}
.sound-btn.is-playing .sound-bars i:nth-child(2){animation-duration:.95s;animation-delay:-.3s}
.sound-btn.is-playing .sound-bars i:nth-child(3){animation-duration:.6s;animation-delay:-.15s}
.sound-btn.is-playing .sound-bars i:nth-child(4){animation-duration:.84s;animation-delay:-.45s}
.sound-btn.is-playing .sound-bars i:nth-child(5){animation-duration:1.05s;animation-delay:-.2s}
@keyframes soundBar{0%{height:5px}100%{height:28px}}
.sound-btn.is-muted .sound-bars i{height:4px;opacity:.5}
.sound-x{position:absolute;left:0;top:0;width:68px;height:68px;pointer-events:none;opacity:0;transition:opacity .25s}
.sound-x::before{content:'';position:absolute;left:50%;top:50%;width:46px;height:2.5px;margin:-1.25px 0 0 -23px;background:#fff;border-radius:2px;box-shadow:0 0 0 2px #000,0 0 8px rgba(255,255,255,.6);transform:rotate(-45deg)}
.sound-btn.is-muted .sound-x{opacity:1}
.sound-label{position:relative;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.35)}
.sound-btn.is-idle:not(.is-muted)::before{animation:soundInvite 1.8s ease-in-out infinite}
@keyframes soundInvite{0%,100%{box-shadow:0 0 14px rgba(255,255,255,.22)}50%{box-shadow:0 0 30px rgba(255,255,255,.6)}}
@media (max-width:700px){.sound-label{display:none}}

.footer-credit{margin-top:-22px;text-align:center;max-width:560px;font-size:9px;line-height:1.7;letter-spacing:.12em;color:var(--dim)}
.footer-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.sound-btn.is-playing .sound-bars i,.sound-btn.is-idle::before{animation:none}}
@media (max-width:700px){#footer{padding-bottom:110px}}