/* ============================================================
   AUTOMAT — the automat protocol
   Fusion of stonkatm.xyz (thermal receipt honesty) and
   atmprotocol.io (volt long-scroll, clip-card, CRT)
   ============================================================ */

:root{
  --ink:#0a0a09; --panel:#171918; --panel2:#121412; --edge:#2c302d; --slot:#050605;
  --paper:#e9e5d8; --paperink:#16170f;
  --text:#dcd9d0; --dim:#8f938c; --volt:#c8fa3d; --voltdim:rgba(200,250,61,.14);
  --amber:#ffb000;
  --sans:"Archivo",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
em{font-style:normal;color:var(--volt)}

/* ---- global atmosphere: grain + CRT sweep.
   The sweep is the page's pulse; the grain keeps flat fills from looking like plastic. ---- */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.55;mix-blend-mode:overlay;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
.sweep{position:fixed;left:0;right:0;top:0;height:1px;z-index:61;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(200,250,61,.18),transparent);
  animation:sweepDown 9s linear infinite}
@keyframes sweepDown{0%{top:-1px}100%{top:100vh}}

.wrap{max-width:1120px;margin:0 auto;padding:28px 20px 72px;position:relative;z-index:10}

/* ---- masthead ---- */
.top{display:flex;align-items:center;gap:14px;padding-bottom:22px;border-bottom:1px solid var(--edge)}
.mark{flex:none}
.brand{font-weight:800;font-size:19px;letter-spacing:.14em;text-transform:uppercase}
.brand span{color:var(--volt)}
.chip{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--dim);
  border:1px solid var(--edge);padding:5px 9px;letter-spacing:.06em;white-space:nowrap}
.chip + a.chip{margin-left:8px}
a.chip{text-decoration:none}
a.chip:hover{color:var(--volt);border-color:var(--volt)}
@media(max-width:520px){
  .top{gap:10px}
  .chip{font-size:10px;padding:4px 7px;letter-spacing:.02em}
  .brand{font-size:17px;letter-spacing:.1em}
  .wrap{padding:22px 16px 56px}
}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding:64px 0 36px}
.kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--dim);margin-bottom:16px}
.hero h1{font-size:clamp(38px,5.8vw,62px);line-height:1.03;font-weight:900;letter-spacing:-.024em;max-width:13ch}
.hero .sub{margin-top:22px;font-size:clamp(16px,1.9vw,18.5px);color:var(--dim);max-width:48ch;text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.buy{display:inline-block;background:var(--volt);color:#0a0a09;font-weight:800;
  font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding:15px 28px;text-decoration:none}
.buy:hover{background:#d5ff6e}
.buy.ghost{background:transparent;color:var(--volt);border:1px solid var(--edge)}
.buy.ghost:hover{border-color:var(--volt)}

/* The machine. Screen bar is the only moving part — it is the proof of life. */
.hero-art{position:relative}
.machine{width:100%;max-width:420px;margin:0 auto;display:block;filter:drop-shadow(0 24px 60px rgba(0,0,0,.6))}
.scr{animation:scrBoot 3.2s ease-out 1 both}
@keyframes scrBoot{0%{opacity:0}12%{opacity:1}20%{opacity:.3}34%{opacity:1}100%{opacity:1}}
.scr-bar{animation:scrFill 4s ease-in-out infinite alternate;transform-origin:left}
@keyframes scrFill{from{transform:scaleX(.22)}to{transform:scaleX(.92)}}
.scr-lamp{animation:lampGo 2.4s ease-in-out infinite}
.scr-card{animation:cardIn 6s ease-in-out infinite}
@keyframes cardIn{0%,62%,100%{transform:translateY(0)}70%,90%{transform:translateY(14px)}}
.scr-paper{animation:paperOut 6s ease-in-out infinite}
@keyframes paperOut{0%,70%,100%{transform:scaleX(1)}78%,88%{transform:scaleX(1.45)}}
@media(max-width:920px){.hero{grid-template-columns:1fr;gap:30px;padding-top:44px}}

.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:26px;
  background:var(--edge);border:1px solid var(--edge)}
.hstat{background:var(--panel);padding:17px 16px}
.hstat b{font-family:var(--mono);font-size:clamp(20px,2.8vw,26px);font-weight:500;color:var(--volt);display:block}
.hstat span{font-size:12px;color:var(--dim);display:block;margin-top:4px}
@media(max-width:760px){.hero-stats{grid-template-columns:1fr 1fr}}

/* ---- chapters ---- */
.chap{padding:64px 0 8px}
.chap-hd{display:flex;align-items:baseline;gap:18px}
.num{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--dim);
  border:1px solid var(--edge);padding:4px 8px;flex:none}
.chap h2{font-size:clamp(28px,4.2vw,44px);font-weight:900;letter-spacing:-.02em;line-height:1.08}
.chap-sub{margin-top:14px;color:var(--dim);font-size:clamp(15px,1.7vw,17.5px);max-width:56ch}

/* 01 loop */
.loop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:30px;
  background:var(--edge);border:1px solid var(--edge)}
.loop-card{background:var(--panel);padding:24px 20px}
.loop-n{font-family:var(--mono);font-size:13px;color:var(--volt);letter-spacing:.12em;margin-bottom:14px}
.loop-card h3{font-size:19px;font-weight:800;margin-bottom:9px}
.loop-card p{font-size:13.5px;color:var(--dim)}
@media(max-width:820px){.loop-grid{grid-template-columns:1fr 1fr}}

/* 02 rule — same shape for both halves so they read as counterparts */
.rule{margin-top:30px;border:1px solid var(--edge);background:var(--panel)}
.rule+.rule{margin-top:18px}
.rule-hd{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--dim);
  padding:11px 16px;border-bottom:1px solid var(--edge)}
.row{display:flex;align-items:baseline;gap:14px;padding:15px 16px;border-bottom:1px solid var(--edge)}
.row:last-child{border-bottom:0}
.row b{font-family:var(--mono);font-size:22px;font-weight:500;color:var(--volt);min-width:3.6ch}
.row span{font-size:14.5px;color:var(--text);text-wrap:pretty}
.row i{font-style:normal;color:var(--dim);font-size:14.5px}
.you .row b{font-size:14px;letter-spacing:.04em;min-width:11.5ch;color:var(--text)}
.you .row b.no{color:var(--amber)}

/* 03 fleet — the clip-card is this site's signature shape (atmprotocol device) */
.fleet{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:30px}
.clip-card{position:relative;background:var(--panel2);border:1px solid var(--edge);
  padding:22px 18px 24px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.clip-card:hover{border-color:var(--volt)}
.tier-tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--dim)}
.tier-v{font-family:var(--mono);font-size:clamp(30px,4vw,42px);font-weight:500;color:var(--volt);
  margin:12px 0 6px;font-variant-numeric:tabular-nums}
.tier-k{font-size:12px;color:var(--dim)}
@media(max-width:900px){.fleet{grid-template-columns:repeat(2,1fr)}}
.fleet-note{margin-top:18px;font-size:13px;color:var(--dim)}

/* 04 receipt — the machine panel + thermal paper */
.machine-panel{border:1px solid var(--edge);background:var(--panel);padding:20px 20px 0;margin-top:30px}
.readout{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;color:var(--volt);
  display:flex;align-items:center;gap:9px;padding-bottom:16px}
.led{width:7px;height:7px;background:var(--volt);flex:none;border-radius:50%}
.led.off{background:#4a4d48}
@media (prefers-reduced-motion:no-preference){
  .led{animation:blip 2.6s steps(1,end) infinite}
  @keyframes blip{0%,72%{opacity:1}73%,100%{opacity:.28}}
}
.mouth{height:14px;background:var(--slot);border-top:1px solid #000;border-bottom:1px solid #3a3f3b}
.loaded{padding-bottom:18px}
.loaded-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--dim);
  padding-bottom:10px;border-bottom:1px solid var(--edge)}
.loaded-l{list-style:none}
.loaded-l li{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:13px;padding:9px 0;border-bottom:1px solid var(--edge)}
.loaded-l li small{color:var(--dim);font-size:11px;letter-spacing:.05em}
.loaded-n{margin-top:13px;font-size:13px;line-height:1.5;color:var(--dim)}

/* The receipt is paper — the one light surface on the page, so it lands like a printed thing. */
.receipt{background:var(--paper);color:var(--paperink);font-family:var(--mono);font-size:12.5px;
  line-height:1.72;padding:22px 20px 30px;position:relative;margin-top:26px;
  clip-path:polygon(0% 0%,100% 0%,100% calc(100% - 9px),97.83% 100%,95.65% calc(100% - 9px),93.48% 100%,91.30% calc(100% - 9px),89.13% 100%,86.96% calc(100% - 9px),84.78% 100%,82.61% calc(100% - 9px),80.43% 100%,78.26% calc(100% - 9px),76.09% 100%,73.91% calc(100% - 9px),71.74% 100%,69.57% calc(100% - 9px),67.39% 100%,65.22% calc(100% - 9px),63.04% 100%,60.87% calc(100% - 9px),58.70% 100%,56.52% calc(100% - 9px),54.35% 100%,52.17% calc(100% - 9px),50.00% 100%,47.83% calc(100% - 9px),45.65% 100%,43.48% calc(100% - 9px),41.30% 100%,39.13% calc(100% - 9px),36.96% 100%,34.78% calc(100% - 9px),32.61% 100%,30.43% calc(100% - 9px),28.26% 100%,26.09% calc(100% - 9px),23.91% 100%,21.74% calc(100% - 9px),19.57% 100%,17.39% calc(100% - 9px),15.22% 100%,13.04% calc(100% - 9px),10.87% 100%,8.70% calc(100% - 9px),6.52% 100%,4.35% calc(100% - 9px),2.17% 100%,0.00% calc(100% - 9px),0% calc(100% - 9px))}
.r-head{display:flex;align-items:center;justify-content:center;gap:14px}
.r-head-t{display:flex;flex-direction:column;align-items:center}
.r-hd{text-align:center;letter-spacing:.2em;font-weight:500}
.r-sep{border-top:1px dashed #9c9a8c;margin:13px 0}
/* THE LAMPS. Green = filling (go). Amber = paying out (already set). Never red.
   Colour carries state; the pulse is decoration and goes under reduced motion. */
.lamp{width:9px;height:9px;border-radius:50%;flex:none;background:#1faa4b;
  animation:lampGo 2.4s ease-in-out infinite}
@keyframes lampGo{
  0%   {box-shadow:0 0 0 0   rgba(31,170,75,.6); filter:brightness(1)}
  55%  {box-shadow:0 0 0 8px rgba(31,170,75,0);  filter:brightness(1.4)}
  100% {box-shadow:0 0 0 0   rgba(31,170,75,0);  filter:brightness(1)}
}
.lamp.paying{background:#c9a227;animation:lampTurn 1.15s ease-in-out infinite}
@keyframes lampTurn{
  0%   {box-shadow:0 0 0 0   rgba(201,162,39,.55); filter:brightness(1)}
  55%  {box-shadow:0 0 0 7px rgba(201,162,39,0);   filter:brightness(1.35)}
  100% {box-shadow:0 0 0 0   rgba(201,162,39,0);   filter:brightness(1)}
}
@media (prefers-reduced-motion:reduce){ .lamp{animation:none} }
.lamp-say{text-align:center;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:#8a8271;margin-top:5px;min-height:12px}
.lamp-say b{font-weight:600;color:#6b6355}

.r-sum-h{text-align:center;letter-spacing:.16em;font-size:11px;color:#5f5e52;margin-bottom:7px}
.r-tot{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums;
  font-weight:600}
.r-bar{margin-top:8px;height:11px;background:#d5d1c2;border:1px solid #9c9a8c;overflow:hidden}
.r-bar i{display:block;height:100%;background:var(--paperink);transition:width .6s ease}
.r-barl{display:flex;justify-content:space-between;gap:10px;margin-top:5px;font-size:11px;
  color:#5f5e52;font-variant-numeric:tabular-nums}
.r-line{display:flex;justify-content:space-between;gap:12px}
.r-line b{font-weight:500}
.r-empty{text-align:center;padding:26px 0;letter-spacing:.1em}
.r-empty small{display:block;margin-top:9px;letter-spacing:.02em;color:#5f5e52;text-transform:none;font-size:11.5px}

/* 05 check */
.look{margin-top:30px;background:var(--panel);border:1px solid var(--edge)}
.look-f{display:flex;gap:8px;padding:16px}
.look-f input{flex:1;min-width:0;background:var(--slot);border:1px solid var(--edge);color:var(--text);
  font-family:var(--mono);font-size:12.5px;padding:10px 11px;border-radius:0}
.look-f input::placeholder{color:#5a605b}
.look-f input:focus{outline:none;border-color:var(--volt)}
.look-f button{background:var(--volt);color:#0a0a09;border:0;font-family:var(--mono);font-weight:500;
  font-size:12px;letter-spacing:.12em;padding:10px 16px;cursor:pointer}
.look-f button:disabled{opacity:.5;cursor:default}
.look-out{padding:0 16px 16px}
.look-msg{font-family:var(--mono);font-size:12.5px;color:var(--dim);line-height:1.6}
.look-msg b{color:var(--text);font-weight:500}

/* footer */
footer{margin-top:72px;padding-top:22px;border-top:1px solid var(--edge);
  font-family:var(--mono);font-size:11.5px;color:var(--dim);display:flex;flex-wrap:wrap;gap:8px 22px}
footer a{color:var(--text);border-bottom:1px solid var(--edge);text-decoration:none}
footer a:hover{color:var(--volt);border-bottom-color:var(--volt)}

/* ---- reveal on scroll. Content fades up once; motion-free users get everything at once. ---- */
.chap,.hero-stats{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.chap.on,.hero-stats.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .chap,.hero-stats{opacity:1;transform:none;transition:none}
  .sweep,.scr,.scr-bar,.scr-lamp,.scr-card,.scr-paper{animation:none !important}
}

/* ---- hero 3D machine ---- */
.machine-3d{width:100%;max-width:420px;aspect-ratio:420/480;display:block;margin:0 auto;outline:none;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.6))}
.machine-3d:focus-visible{outline:2px solid var(--volt);outline-offset:4px}
.machine-hint{margin-top:14px;text-align:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.22em;color:var(--volt);animation:hintPulse 3s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.machine-hint{animation:none}}

/* ============================================================
   MECHANISM MOTION
   Every animation below expresses a mechanism, never decorates.
   ============================================================ */

/* ---- loop pipeline (01): the fee travels A→B→C→D.
   Dashes are the flow; the moving dot is the crank turning. ---- */
.loop-grid{display:flex;align-items:stretch;gap:0;margin-top:30px}
.loop-card{flex:1;background:var(--panel);border:1px solid var(--edge);padding:24px 20px}
.loop-card+.flow+.loop-card{border-left:0}
.flow{flex:none;width:44px;display:flex;align-items:center;gap:5px;background:var(--panel);
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);justify-content:center}
.flow i{width:100%;height:1.5px;background:repeating-linear-gradient(90deg,var(--volt) 0 5px,transparent 5px 9px);
  animation:flowDashes .8s linear infinite}
.flow i:nth-child(2){animation-delay:.27s}
.flow i:nth-child(3){animation-delay:.54s}
@keyframes flowDashes{from{transform:translateX(-9px)}to{transform:translateX(0)}}
@media(max-width:820px){
  .loop-grid{flex-direction:column}
  .flow{width:100%;height:34px;border:1px solid var(--edge);border-top:0;border-bottom:0}
  .flow i{width:1.5px;height:100%;
    background:repeating-linear-gradient(180deg,var(--volt) 0 5px,transparent 5px 9px);
    animation:flowDashesV .8s linear infinite}
  @keyframes flowDashesV{from{transform:translateY(-9px)}to{transform:translateY(0)}}
}

/* ---- fee pipeline (02): the machine's 2% splitting into its legs.
   The widths ARE the rule; the reveal is the rule being read.
   op 45% / stock 41.25% / burn 13.75% — of the 2% tax (the 1% pool
   fee runs outside this bar). The 1% crank bounty rides inside the
   stock leg. ---- */
.fee-pipe{display:flex;margin:18px 16px 20px;height:44px;border:1px solid var(--edge);background:var(--slot)}
.fp-seg{display:flex;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:#0a0a09;transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.3,1) var(--d,0s)}
.chap.on .fp-seg{transform:scaleX(1)}
.fp-seg span{white-space:nowrap;overflow:hidden;padding:0 12px}
.fp-seg.op{flex:0 0 45%;background:var(--paper);color:var(--paperink)}
.fp-seg.stock{flex:0 0 41.25%;background:var(--volt)}
.fp-seg.burn{flex:0 0 13.75%;background:var(--amber)}

/* ---- loaded-slot ticker (04): the machine's magazine, walking past ---- */
.tape{margin-top:26px;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  overflow:hidden;background:var(--slot);padding:9px 0}
.tape-in{display:flex;gap:0;width:max-content;animation:tapeWalk 22s linear infinite}
.tape-in span{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--dim);
  padding:0 26px;border-right:1px solid var(--edge);white-space:nowrap}
.tape-in span:nth-child(8n+1),.tape-in span:nth-child(8n+2){color:var(--volt)}
@keyframes tapeWalk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tape-in{animation:none}}

/* ---- machine lab (SIM): the dispense loop, playable ---- */
.lab{margin-top:30px;border:1px solid var(--edge);background:var(--panel);padding:22px}
.lab-stage{border:1px solid var(--edge);background:var(--slot);padding:22px 22px 16px}
.lab-bar{height:14px;background:#171918;border:1px solid #3a3f3b;overflow:hidden}
.lab-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#9ad11a,var(--volt));
  transition:width 2.4s cubic-bezier(.3,.1,.2,1)}
.lab-readout{display:flex;align-items:center;gap:10px;margin-top:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--dim)}
.lab-lamp{animation:none;background:#4a4d48}
.lab-lamp.go{background:#1faa4b;animation:lampGo 2.4s ease-in-out infinite}
.lab-lamp.pay{background:#c9a227;animation:lampTurn 1.15s ease-in-out infinite}
.lab-tray{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;min-height:64px;align-items:flex-end;
  border-top:1px dashed #3a3f3b;padding-top:14px}
/* Stock slips drop out of the mouth and land in the tray. */
.slipchip{background:var(--paper);color:var(--paperink);font-family:var(--mono);font-size:11px;
  padding:7px 10px;line-height:1.35;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),92% 100%,84% calc(100% - 5px),76% 100%,68% calc(100% - 5px),60% 100%,52% calc(100% - 5px),44% 100%,36% calc(100% - 5px),28% 100%,20% calc(100% - 5px),12% 100%,4% calc(100% - 5px),0 100%);
  animation:chipDrop .55s cubic-bezier(.2,.9,.3,1.3) both}
.slipchip b{display:block;font-size:13px}
.slipchip small{color:#5f5e52}
@keyframes chipDrop{from{opacity:0;transform:translateY(-26px) rotate(-4deg)}to{opacity:1;transform:none}}
.lab-ctl{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;flex-wrap:wrap}
.lab-stats{display:flex;gap:20px;flex-wrap:wrap}
.lab-burn{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--dim);text-align:right}
.lab-burn b{display:block;font-size:26px;font-weight:500;color:var(--amber);font-variant-numeric:tabular-nums;margin-top:2px}
.lab-burn.op b{color:var(--paper)}
.lab-out{margin-top:18px;font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--dim);
  border-top:1px dashed var(--edge);padding-top:14px;max-height:140px;overflow-y:auto}
.lab-out div{display:flex;justify-content:space-between;gap:12px}
.lab-out div b{font-weight:500;color:var(--text)}
.lab-out .fresh{color:var(--volt)}

/* ---- fleet tiers land one by one (03) ---- */
.fleet .tier{opacity:0;transform:translateY(16px)}
.chap.on .fleet .tier{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
.chap.on .fleet .tier:nth-child(1){transition-delay:.05s}
.chap.on .fleet .tier:nth-child(2){transition-delay:.15s}
.chap.on .fleet .tier:nth-child(3){transition-delay:.25s}
.chap.on .fleet .tier:nth-child(4){transition-delay:.35s}
.chap.on .fleet .tier:nth-child(5){transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
  .fleet .tier{opacity:1;transform:none;transition:none}
  .flow i{animation:none}
  .fp-seg{transform:scaleX(1);transition:none}
  .slipchip{animation:none}
  .lab-bar i{transition:none}
}