/* ============================================================
   SPINBOT — glass mousepads
   Visual language after wallhack.com: near-white ground,
   hairline rules, technical monospace labels, oversized ghost
   type, a single dark commit bar.
   ============================================================ */

:root{
  --bg:#f8f8f8;
  --ink:#0e0e0e;
  --ink-soft:#6b6b6b;
  --ink-faint:#a8a8a8;
  --line:#d9d9d9;
  --line-strong:#0e0e0e;
  --paper:#ffffff;
  --accent:#1b1bff;
  --nav-h:64px;
  --pad:28px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --disp:"Chakra Petch","Inter",system-ui,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
[hidden]{display:none!important}

.mono{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10px;
  font-weight:500;
}

/* ------------------------------------------------ scaffold */
#app{height:100%}
.shell{
  height:100%;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* ------------------------------------------------ nav */
.nav{
  height:var(--nav-h);
  flex:0 0 auto;
  display:flex;
  align-items:stretch;
  padding:0 0 0 var(--pad);
  border-bottom:1px solid var(--line);
  background:var(--bg);
  z-index:40;
}
.brand{
  display:flex;align-items:center;
  flex:0 0 auto;
  padding-right:22px;
  border-right:1px solid var(--line);
}
.brand b{
  font-family:var(--disp);
  font-weight:700;
  letter-spacing:.16em;
  font-size:15px;
}
.nav-cats,.nav-utils{
  display:flex;
  align-items:center;
  gap:22px;
}
.nav-cats{flex:1 1 auto;padding:0 22px}
.nav-utils{flex:0 0 auto;gap:20px;padding:0 22px;border-left:1px solid var(--line)}
.nav a.link,.nav button.link{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10.5px;
  font-weight:500;
  color:var(--ink-soft);
  transition:color .15s;
  white-space:nowrap;
  position:relative;
}
.nav a.link:hover,.nav button.link:hover{color:var(--ink)}
.nav a.link.active{color:var(--ink)}
.nav a.link.active::before{
  content:"";
  display:inline-block;
  width:5px;height:5px;
  margin-right:8px;
  vertical-align:middle;
  background:var(--ink);
}
.cart-pill{
  align-self:stretch;
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--ink);
  color:#fff;
  padding:0 22px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
}
.cart-pill .ct{color:#9a9a9a}
.cart-pill:hover{background:var(--accent)}
.cart-pill:hover .ct{color:#cfcfff}

/* ------------------------------------------------ stage */
.stage{
  position:relative;
  flex:1 1 auto;
  overflow:hidden;
}
.nav{view-transition-name:nav}
.footstrip{view-transition-name:foot}

/* ghost product code */
.ghost{
  position:absolute;
  right:2vw;
  bottom:3vh;
  font-family:var(--disp);
  font-weight:700;
  font-size:clamp(90px,16vw,220px);
  line-height:.8;
  letter-spacing:.02em;
  color:transparent;
  -webkit-text-stroke:1px var(--line-strong);
  text-stroke:1px var(--line-strong);
  pointer-events:none;
  user-select:none;
  z-index:1;
  opacity:.18;
  view-transition-name:ghost;
}

/* next-up peek card — a sliver of the next pad, tucked into the top-right */
.peek{
  position:absolute;
  top:-90px;
  right:-90px;
  width:300px;
  transform:rotate(10deg);
  opacity:.42;
  z-index:0;
  pointer-events:none;
}
.peek .slab-wrap{width:100%;perspective:900px;filter:grayscale(.25)}
.peek .slab{transform:rotateX(50deg) rotateZ(-36deg)}
.peek .slab::before{display:none}

/* product image — glass slab */
.hero{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-right:300px;
  z-index:2;
}
.slab-wrap{
  position:relative;
  width:min(52vw,620px);
  perspective:1700px;
}
.slab{
  position:relative;
  aspect-ratio:1 / 1;
  --rx:52deg;
  --rz:-38deg;
  transform:rotateX(var(--rx)) rotateZ(var(--rz));
  transform-style:preserve-3d;
  transition:transform .12s linear;
  cursor:grab;
  touch-action:none;
}
.slab.dragging{transition:none;cursor:grabbing;animation:none!important}
.slab.settle{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#slab{view-transition-name:slab}
.spin-hint{
  position:absolute;
  left:50%;top:14px;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
  z-index:4;
  pointer-events:none;
  transition:opacity .3s;
}
.slab .face{
  position:absolute;inset:0;
  overflow:hidden;
  border-radius:18px;
  background:#111;
  /* stacked offset shadows fake the glass thickness and, because
     box-shadow follows border-radius, the extruded edge keeps the
     same rounded corners as the artwork */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.30),
    0 1px 0 rgba(255,255,255,.45) inset,
    3px 5px 0 #c6ced3,
    6px 10px 0 #b0bac0,
    9px 15px 0 #97a1a8,
    11px 18px 24px rgba(0,0,0,.30);
}
.slab .face img{
  width:100%;height:100%;
  object-fit:fill;
  filter:saturate(1.02) contrast(1.02);
}
/* glass sheen */
.slab .face::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.06) 22%,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,0) 64%,
      rgba(255,255,255,.14) 82%,
      rgba(255,255,255,.34) 100%);
  mix-blend-mode:screen;
  pointer-events:none;
}
/* contact shadow on the ground */
.slab::before{
  content:"";
  position:absolute;
  left:-6%;right:-6%;
  bottom:-9%;
  height:22%;
  background:radial-gradient(50% 60% at 50% 50%,rgba(0,0,0,.28),rgba(0,0,0,0) 70%);
  transform:translateZ(-30px);
  filter:blur(6px);
}

/* ------------------------------------------------ spec panel */
.panel{
  position:absolute;
  right:var(--pad);
  top:90px;
  width:330px;
  z-index:3;
}
.panel::before{
  content:"";
  position:absolute;
  inset:-24px -30px -24px -46px;
  background:linear-gradient(90deg,
    rgba(248,248,248,0),
    rgba(248,248,248,.86) 26%,
    rgba(248,248,248,.96));
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  z-index:-1;
  pointer-events:none;
}
.panel .code{
  font-family:var(--disp);
  font-weight:700;
  font-size:44px;
  line-height:1;
  letter-spacing:.01em;
  view-transition-name:pcode;
}
.panel .sub{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:10px;
  color:var(--ink-faint);
  margin-top:6px;
}
.specs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:20px 0 16px;
}
.spec{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.spec svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.4}
.spec span{
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.35;
  color:var(--ink-soft);
}
.profile{
  display:flex;align-items:center;gap:8px;
  padding:8px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.profile .badge{
  background:var(--ink);color:#fff;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  padding:4px 8px;
}
.profile svg{width:18px;height:18px;stroke:var(--ink-soft);fill:none;stroke-width:1.4}
.tags{display:flex;gap:8px;margin:14px 0 12px;flex-wrap:wrap}
.tag{
  border:1px solid var(--line);
  padding:5px 10px;
  font-family:var(--mono);
  font-size:9px;letter-spacing:.1em;text-transform:lowercase;
  color:var(--ink-soft);
}
.desc{
  font-size:12.5px;
  line-height:1.55;
  color:var(--ink);
  font-weight:300;
}
.desc .more{margin-top:10px;color:var(--ink-soft);animation:rise .3s both}
.seemore{
  margin-top:12px;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
}
.seemore:hover{color:var(--ink);border-color:var(--ink)}

/* commit / add bar */
.commit{
  position:absolute;
  right:0;bottom:0;
  width:min(38vw,430px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--ink);
  color:#fff;
  padding:18px 22px;
  z-index:5;
  view-transition-name:commit;
  transition:background .2s;
}
.commit .add{
  font-family:var(--mono);
  letter-spacing:.16em;
  font-size:11px;
  text-transform:uppercase;
}
.commit .price{
  font-family:var(--disp);
  font-weight:600;
  font-size:18px;
}
.commit:hover{background:#1b1bff}
.commit.done .add::after{content:" ✓"}

/* carousel controls */
.pager{
  position:absolute;
  left:50%;bottom:18px;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:16px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--ink-soft);
  z-index:5;
}
.pager button{padding:4px 8px;color:var(--ink-soft)}
.pager button:hover{color:var(--ink)}

.arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:18px;color:var(--ink-faint);
  z-index:5;
}
.arrow:hover{color:var(--ink)}
.arrow.prev{left:6px}
.arrow.next{right:calc(min(38vw,430px) + 8px)}

/* fixed corner bits */
.contact{
  position:absolute;left:18px;bottom:64px;
  display:flex;align-items:center;gap:8px;
  background:var(--paper);
  border:1px solid var(--line);
  padding:8px 14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);
  z-index:20;
}
.contact:hover{color:var(--ink)}
.corner-btn{
  position:absolute;left:18px;bottom:16px;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  z-index:20;
}
.corner-btn svg{width:16px;height:16px;stroke:var(--ink-soft);fill:none;stroke-width:1.5}

/* ------------------------------------------------ overlays */
.overlay{
  position:absolute;inset:0;
  background:var(--bg);
  z-index:60;
  display:flex;flex-direction:column;
  animation:fade .18s ease;
  view-transition-name:overlay;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.overlay-top{
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  border-bottom:1px solid var(--line);
}
.overlay-close{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}
.overlay-close:hover{color:var(--ink)}
.overlay-body{flex:1;overflow:auto;padding:min(9vh,90px) var(--pad)}

/* menu */
.menu-links{display:flex;flex-direction:column;gap:4px;max-width:760px}
.menu-links a{
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(34px,6vw,68px);
  line-height:1.05;
  letter-spacing:.01em;
  color:var(--ink);
  display:flex;align-items:baseline;gap:16px;
}
.menu-links a .n{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-faint);
  letter-spacing:.1em;
}
.menu-links a:hover{color:var(--accent)}

/* museum grid */
.museum{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:2px;
  background:var(--line);
  border:1px solid var(--line);
}
.museum figure{background:var(--paper);padding:24px;display:flex;flex-direction:column;gap:14px}
.museum .m-img{aspect-ratio:1/1;overflow:hidden;background:#111;border-radius:8px}
.museum .m-img img{width:100%;height:100%;object-fit:fill}
.museum figcaption{display:flex;justify-content:space-between;align-items:baseline}
.museum .m-code{font-family:var(--disp);font-weight:700;font-size:20px}
.museum .m-price{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.museum .m-meta{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

/* terminal */
.terminal{
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink);
  max-width:820px;
}
.terminal .out{white-space:pre-wrap}
.terminal .row{display:flex;gap:8px}
.terminal .ps{color:var(--accent)}
.terminal input{
  font:inherit;color:inherit;background:none;border:none;outline:none;flex:1;
}
.terminal .dim{color:var(--ink-faint)}

/* cart drawer */
.drawer{
  position:absolute;top:0;right:0;bottom:0;
  width:min(90vw,380px);
  background:var(--paper);
  border-left:1px solid var(--line);
  z-index:70;
  display:flex;flex-direction:column;
  animation:slide .22s ease;
  view-transition-name:drawer;
}
@keyframes slide{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer h3{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:22px var(--pad);border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;
}
.drawer .items{flex:1;overflow:auto;padding:8px var(--pad)}
.drawer .ci{
  display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);
}
.drawer .ci img{width:56px;height:46px;object-fit:cover;background:#111}
.drawer .ci .ci-code{font-family:var(--disp);font-weight:600;font-size:14px}
.drawer .ci .ci-meta{font-family:var(--mono);font-size:9px;color:var(--ink-soft);letter-spacing:.1em}
.drawer .foot{padding:20px var(--pad);border-top:1px solid var(--line)}
.drawer .total{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.drawer .checkout{
  width:100%;background:var(--ink);color:#fff;padding:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.drawer .checkout:hover{background:var(--accent)}
.drawer .empty{padding:40px var(--pad);font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.1em;text-transform:uppercase}
.scrim{position:absolute;inset:0;background:rgba(14,14,14,.12);z-index:69;view-transition-name:scrim;animation:fade .2s ease}

/* footer strip */
.footstrip{
  height:26px;flex:0 0 auto;
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);
  background:var(--bg);
}

/* ------------------------------------------------ responsive */
@media (max-width:1024px){
  .panel{
    position:static;transform:none;width:auto;
    padding:16px var(--pad) 120px;
  }
  .panel::before{display:none}
  .stage{overflow:auto}
  .shell{overflow:auto}
  body{overflow:auto}
  .hero{position:relative;inset:auto;padding:34px 0 46px;min-height:40vh}
  .slab-wrap{width:min(84vw,460px)}
  .ghost{font-size:24vw;bottom:auto;top:6px;right:4vw;opacity:.14}
  .peek{display:none}
  .arrow{display:none}
  .spin-hint{top:6px}
  .commit{width:100%;position:fixed}
  .pager{
    position:static;transform:none;
    justify-content:center;
    padding:14px 0;
    margin-bottom:80px;
    border-top:1px solid var(--line);
  }
  .contact{display:none}
  .corner-btn{display:none}
}
@media (max-width:760px){
  .brand{padding-right:14px}
  .nav-cats{padding:0 14px}
  .nav-utils{gap:14px;padding:0 0 0 14px}
  .cart-pill{padding:0 14px}
  .nav a.link,.nav button.link{font-size:9.5px;letter-spacing:.1em}
}
@media (max-width:560px){
  .nav-cats{display:none}
  .specs{grid-template-columns:repeat(2,1fr)}
}

/* ================================================ animated transitions */

/* --- page / product change: the stage fades + slides in as a unit,
       then its contents rise in a stagger --- */
.stage-enter{animation:stageIn .4s cubic-bezier(.2,.7,.2,1) both}
.stage-enter[data-dir="fwd"]{animation-name:stageInFwd}
.stage-enter[data-dir="back"]{animation-name:stageInBack}
@keyframes stageIn{from{opacity:0}to{opacity:1}}
@keyframes stageInFwd{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes stageInBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

/* the glass slab spins in */
.stage-enter #slab{animation:slabIn .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes slabIn{
  from{opacity:0;transform:rotateX(var(--rx)) rotateZ(calc(var(--rz) - 22deg)) scale(.9)}
  to{opacity:1;transform:rotateX(var(--rx)) rotateZ(var(--rz)) scale(1)}
}

/* the ghost product code drifts up */
.stage-enter .ghost{animation:ghostIn .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes ghostIn{from{opacity:0;transform:translateY(24px)}to{opacity:.18;transform:none}}

/* spec panel contents rise in sequence */
.stage-enter .code{animation:rise .45s .04s both}
.stage-enter .sub{animation:rise .45s .09s both}
.stage-enter .specs .spec{animation:rise .45s both}
.stage-enter .specs .spec:nth-child(1){animation-delay:.12s}
.stage-enter .specs .spec:nth-child(2){animation-delay:.17s}
.stage-enter .specs .spec:nth-child(3){animation-delay:.22s}
.stage-enter .specs .spec:nth-child(4){animation-delay:.27s}
.stage-enter .profile{animation:rise .45s .30s both}
.stage-enter .tags .tag{animation:rise .45s both}
.stage-enter .tags .tag:nth-child(1){animation-delay:.33s}
.stage-enter .tags .tag:nth-child(2){animation-delay:.37s}
.stage-enter .desc{animation:rise .45s .40s both}
.stage-enter .seemore{animation:rise .45s .44s both}
.stage-enter .pager{animation:rise .45s .32s both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --- overlays: menu / museum / terminal --- */
.overlay{animation:ovIn .28s cubic-bezier(.2,.7,.2,1) both}
.overlay.overlay-out{animation:ovOut .22s ease-in both}
@keyframes ovIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes ovOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-14px)}}
.overlay .menu-links a,
.overlay .museum figure,
.overlay .terminal{animation:rise .4s both}
.overlay .menu-links a:nth-child(1){animation-delay:.05s}
.overlay .menu-links a:nth-child(2){animation-delay:.10s}
.overlay .menu-links a:nth-child(3){animation-delay:.15s}
.overlay .menu-links a:nth-child(4){animation-delay:.20s}
.overlay .museum figure:nth-child(1){animation-delay:.05s}
.overlay .museum figure:nth-child(2){animation-delay:.12s}
.overlay .museum figure:nth-child(3){animation-delay:.19s}

/* --- cart drawer --- */
.drawer{animation:drIn .3s cubic-bezier(.2,.7,.2,1) both}
.drawer.drawer-out{animation:drOut .26s ease-in both}
@keyframes drIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes drOut{from{transform:none}to{transform:translateX(100%)}}
.scrim.drawer-out{animation:fade .26s ease-in reverse both}
.drawer .ci{animation:rise .35s both}
.drawer .ci:nth-child(1){animation-delay:.04s}
.drawer .ci:nth-child(2){animation-delay:.09s}
.drawer .ci:nth-child(3){animation-delay:.14s}

/* --- ambient / hover motion --- */
.spec,.tag,.seemore,.contact,.corner-btn,.arrow,.pager button,
.museum figure,.menu-links a,.cart-pill,.commit,.nav .link{
  transition:color .18s,background .18s,border-color .18s,transform .18s,opacity .18s;
}
.museum figure:hover{transform:translateY(-3px)}
.tag:hover{border-color:var(--ink);color:var(--ink)}
.contact:hover,.corner-btn:hover{transform:translateY(-2px)}
.pager a:hover button{transform:scale(1.15)}
.spin-hint{animation:hintPulse 2.8s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.45}50%{opacity:.8}}
.cart-pill .ct{transition:color .18s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s!important;
    animation-delay:0s!important;
    transition-duration:.001s!important;
  }
}