/* ══ tokens ═══════════════════════════════════════════════ */
:root{
  --void:#1a0e22;
  --grape:#2a1438;
  --grape-2:#3a1d4e;
  --lilac:#a96cff;
  --acid:#e8ff3a;
  --mist:#f2ecff;
  --mist-dim:#b9a8cf;

  --face:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --pad:clamp(20px,5vw,80px);
  --bay:clamp(78px,11vh,140px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--void);
  color:var(--mist);
  font:400 clamp(15.5px,1.05vw,17.5px)/1.62 var(--face);
  overflow-x:hidden;
}
h1,h2,h3,p,dl,dt,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--acid);color:var(--void)}
:focus-visible{outline:2px solid var(--acid);outline-offset:4px}

/* ══ the drawing board ════════════════════════════════════ */
.mesh{
  position:fixed;inset:-10%;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(60deg,rgba(169,108,255,.09) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(-60deg,rgba(169,108,255,.09) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(0deg,rgba(169,108,255,.055) 0 1px,transparent 1px 74px);
  animation:board 40s linear infinite;
}
@keyframes board{to{transform:translate3d(74px,128px,0)}}

main{position:relative;z-index:1}

/* ══ the opening ══════════════════════════════════════════ */
.open{
  position:relative;
  min-height:92svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(90px,14vh,150px) var(--pad) clamp(70px,10vh,120px);
  max-width:1320px;margin:0 auto;
}
.corner{
  position:absolute;
  width:clamp(30px,4vw,58px);height:clamp(30px,4vw,58px);
  pointer-events:none;
}
.corner--tl{
  top:clamp(26px,4vh,52px);left:var(--pad);
  border-top:2px solid var(--acid);border-left:2px solid var(--acid);
}
.corner--br{
  bottom:clamp(26px,4vh,52px);right:var(--pad);
  border-bottom:2px solid var(--lilac);border-right:2px solid var(--lilac);
}

.kicker{
  display:flex;align-items:center;gap:12px;
  font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--acid);
  margin-bottom:clamp(18px,2.6vh,28px);
}
.kicker::before{content:"";width:34px;height:2px;background:var(--acid)}

.mark{
  font-size:clamp(2.6rem,10.4vw,8rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.03em;
  margin-bottom:clamp(24px,3.6vh,42px);
  perspective:900px;
}
/* parts arriving from depth and snapping into line */
.mark .pc{
  display:inline-block;
  opacity:0;
  transform:translate3d(var(--dx),var(--dy),-420px) rotateX(var(--rx)) rotateZ(var(--rz));
  transition:transform .95s cubic-bezier(.16,.86,.28,1),opacity .55s ease;
}
.mark.is-set .pc{opacity:1;transform:none}

.lede{
  max-width:52ch;
  font-size:clamp(1.02rem,1.5vw,1.28rem);
  color:#d5c9ea;
  padding-left:clamp(14px,1.8vw,22px);
  border-left:2px solid var(--lilac);
}
.chips{
  display:flex;flex-wrap:wrap;gap:clamp(10px,2vw,26px);
  margin-top:clamp(24px,3.6vh,38px);
  font-size:.82rem;
}
.chips li{display:inline-flex;align-items:center;gap:9px;color:#cfc0e6}
.chips li::before{
  content:"";width:10px;height:10px;
  border:2px solid var(--acid);
  transform:rotate(45deg);
}
.chips li:nth-child(2)::before{border-color:var(--lilac)}
.chips li:nth-child(3)::before{border-color:var(--mist)}

/* ══ bays ═════════════════════════════════════════════════ */
.bay{
  position:relative;
  max-width:1320px;margin:0 auto;
  padding:var(--bay) var(--pad);
  border-top:1px solid rgba(169,108,255,.26);
}
.h2{
  display:flex;align-items:baseline;gap:.35em;
  font-size:clamp(1.5rem,3.2vw,2.4rem);
  font-weight:500;
  letter-spacing:-.02em;
  margin-bottom:clamp(26px,4vh,46px);
}
.h2 i{font-style:normal;color:var(--lilac);font-weight:300}

.bay--split{display:grid;gap:clamp(24px,4vw,64px)}
@media (min-width:960px){
  .bay--split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
  .bay--split .h2{margin-bottom:0}
}
.copy{display:grid;gap:1.1em;max-width:58ch;color:#cbbde3;font-size:clamp(1rem,1.3vw,1.14rem)}
.copy p:last-child{color:var(--acid)}

/* ══ the exploded stack ═══════════════════════════════════ */
.rig{display:grid;gap:clamp(30px,5vw,70px);align-items:center}
@media (min-width:1000px){.rig{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}}

.stage{
  perspective:1400px;
  perspective-origin:50% 44%;
  display:grid;place-items:center;
  min-height:clamp(320px,46vw,560px);
}
.stack{
  position:relative;
  width:min(370px,74vw);
  aspect-ratio:1;
  transform-style:preserve-3d;
  transform:
    rotateX(calc(57deg + var(--tx,0deg)))
    rotateZ(calc(-38deg + var(--tz,0deg)));
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
/* the axis the parts are threaded on */
.spindle{
  position:absolute;
  left:50%;top:50%;
  width:2px;height:520px;
  margin:-260px 0 0 -1px;
  background:linear-gradient(180deg,rgba(232,255,58,0),var(--acid),rgba(232,255,58,0));
  transform:rotateX(90deg);
  opacity:.5;
}
.plate{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:translateZ(calc(var(--i) * var(--gap,10px)));
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.plate__face{
  position:absolute;inset:0;
  border:2px solid rgba(169,108,255,.6);
  background:rgba(42,20,56,.72);
  box-shadow:0 0 0 1px rgba(26,14,34,.9),0 26px 44px -30px rgba(0,0,0,.9);
  transition:border-color .4s ease,box-shadow .4s ease,background .4s ease;
}
/* every plate machined differently */
.plate__face--grid{
  background-image:
    repeating-linear-gradient(0deg,rgba(169,108,255,.4) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(169,108,255,.4) 0 1px,transparent 1px 26px);
}
.plate__face--dots{
  background-image:radial-gradient(rgba(232,255,58,.55) 1.7px,transparent 1.8px);
  background-size:24px 24px;
}
.plate__face--rings{
  background-image:repeating-radial-gradient(circle at 50% 50%,
    rgba(169,108,255,.5) 0 1px,transparent 1px 22px);
}
.plate__face--hatch{
  background-image:repeating-linear-gradient(45deg,
    rgba(242,236,255,.35) 0 1px,transparent 1px 14px);
}
.plate__face--weld{
  background-image:
    repeating-linear-gradient(90deg,rgba(232,255,58,.5) 0 8px,transparent 8px 20px),
    repeating-linear-gradient(0deg,rgba(169,108,255,.3) 0 1px,transparent 1px 44px);
}
.plate__face--solid{
  background:linear-gradient(140deg,rgba(169,108,255,.4),rgba(42,20,56,.9));
}
/* the plate answering the part under the pointer */
.plate.is-hot{transform:translateZ(calc(var(--i) * var(--gap,10px) + 34px))}

/* a phone sees the assembly from further away, so it stays inside the screen */
@media (max-width:800px){
  .stage{perspective:2400px;min-height:clamp(300px,74vw,480px)}
  .stack{width:min(238px,58vw)}
  .spindle{height:380px;margin-top:-190px}
}
.plate.is-hot .plate__face{
  border-color:var(--acid);
  background:rgba(58,29,78,.9);
  box-shadow:0 0 0 1px var(--acid),0 0 34px rgba(232,255,58,.35),0 30px 50px -28px #000;
}

/* ── the parts list ── */
.parts{display:grid}
.part{
  position:relative;
  padding:clamp(15px,2vh,21px) 0 clamp(15px,2vh,21px) clamp(30px,3vw,46px);
  border-top:1px solid rgba(169,108,255,.26);
  transition:background .3s ease;
}
.part:last-child{border-bottom:1px solid rgba(169,108,255,.26)}
/* the part number, in drawing-office style */
.part::before{
  counter-increment:none;
  content:attr(data-for);
  position:absolute;left:0;top:calc(clamp(15px,2vh,21px) + .1em);
  font-size:.74rem;letter-spacing:.1em;
  color:var(--lilac);
  border:1px solid rgba(169,108,255,.5);
  border-radius:50%;
  width:22px;height:22px;
  display:grid;place-items:center;
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.part:hover{background:rgba(169,108,255,.08)}
.part:hover::before{color:var(--void);background:var(--acid);border-color:var(--acid)}
.part h3{
  font-size:clamp(1.02rem,1.45vw,1.2rem);
  font-weight:600;letter-spacing:-.012em;
  margin-bottom:6px;
}
.part p{color:var(--mist-dim);font-size:.94rem;max-width:46ch}

/* ══ in motion ════════════════════════════════════════════ */
.cells{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,24px);
}
@media (max-width:980px){.cells{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cells{grid-template-columns:1fr}}
.cell{
  position:relative;
  padding:clamp(20px,2.4vw,30px);
  background:linear-gradient(160deg,rgba(58,29,78,.6),rgba(26,14,34,.6));
  border:1px solid rgba(169,108,255,.3);
  transition:border-color .4s ease,transform .4s cubic-bezier(.2,.8,.2,1);
}
.cell::before{
  content:"";
  position:absolute;left:-1px;top:-1px;
  width:16px;height:16px;
  border-top:2px solid var(--acid);border-left:2px solid var(--acid);
}
.cell:hover{border-color:var(--lilac);transform:translateY(-4px)}
.cell h3{font-size:clamp(1rem,1.4vw,1.14rem);font-weight:600;margin-bottom:9px}
.cell p{color:var(--mist-dim);font-size:.93rem}

/* ══ contact ══════════════════════════════════════════════ */
.entity{
  font-size:clamp(1.4rem,3.4vw,2.5rem);
  font-weight:600;letter-spacing:-.028em;
  color:var(--acid);
  margin-bottom:clamp(22px,3.6vh,38px);
}
.spec{display:grid;border-top:1px solid rgba(169,108,255,.3);max-width:1120px}
.spec > div{
  display:grid;gap:4px clamp(20px,3vw,50px);
  padding-block:clamp(13px,2vh,19px);
  border-bottom:1px solid rgba(169,108,255,.3);
}
@media (min-width:720px){.spec > div{grid-template-columns:120px 1fr;align-items:baseline}}
.spec dt{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lilac);
}
.spec dd{
  margin:0;font-size:clamp(.98rem,1.2vw,1.1rem);font-weight:500;
  overflow-wrap:anywhere;
}
.fine{margin-top:clamp(22px,3.4vh,34px);font-size:.77rem;color:#8e7fa8}

/* ══ reveal + motion prefs ════════════════════════════════ */
.lift{opacity:0;transform:translateY(14px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.2,1)}
.lift.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mesh{animation:none}
  .mark .pc{opacity:1!important;transform:none!important;transition:none}
  .stack,.plate{transition:none}
  .lift{opacity:1;transform:none;transition:none}
}