/* ============================================================
   MoonBite ($MBITE) — styles.css
   Palette is strict. Every value derives from the 4 tokens.
   ============================================================ */
:root{
  --void:#07070B;
  --moonmilk:#F2EDE4;
  --cheddar:#FFC94A;
  --bite:#FF3D2E;

  --milk-dim: rgba(242,237,228,.55);
  --milk-faint: rgba(242,237,228,.12);

  --f-display:"Bricolage Grotesque", system-ui, sans-serif;
  --f-serif:"Instrument Serif", Georgia, serif;
  --f-mono:"Space Mono", ui-monospace, monospace;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:160px;
  --ease-expo:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:var(--cheddar) var(--void)}
html,body{background:var(--void);color:var(--moonmilk)}
body{
  font-family:var(--f-mono);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:none;
  min-height:100vh;
}
@media (pointer:coarse){ body{cursor:auto} }

::selection{background:var(--cheddar);color:var(--void)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--cheddar);border-radius:8px}

a{color:inherit;text-decoration:none}
em{font-style:normal}

/* ---------- eyebrow labels ---------- */
.eyebrow{
  position:absolute; top:var(--s4); left:var(--s4);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cheddar); z-index:6;
}
@media (max-width:640px){ .eyebrow{top:var(--s3); left:var(--s3); font-size:10px} }

/* ---------- grain + vignette + stars ---------- */
.grain{
  position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.05;
  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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-6%,3%)}
  50%{transform:translate(4%,-5%)} 75%{transform:translate(-3%,6%)} 100%{transform:translate(5%,-2%)}
}
.vignette{
  position:fixed; inset:0; z-index:58; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.stars{position:fixed; inset:0; z-index:1; pointer-events:none}
.crumbs{position:fixed; inset:0; z-index:5; pointer-events:none}

/* stacking model: stars(1) < word-back(2) < moon(3) < crumbs/content(5) < header(40) */

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; width:40px; height:40px; z-index:70;
  transform:translate(-50%,-50%); pointer-events:none;
  mix-blend-mode:difference; transition:transform .12s var(--ease-expo);
}
.cursor svg{width:100%;height:100%;overflow:visible}
.cursor .dot{fill:var(--moonmilk);transition:opacity .15s}
.cursor .jaw{fill:none;stroke:var(--bite);stroke-width:3;stroke-linecap:round;opacity:0;transition:opacity .15s, transform .18s var(--ease-expo)}
.cursor.hot .dot{opacity:0}
.cursor.hot .jaw{opacity:1}
.cursor.hot .jaw-top{transform:translateY(3px)}
.cursor.hot .jaw-bot{transform:translateY(-3px)}
.cursor.bite .jaw-top{transform:translateY(7px)}
.cursor.bite .jaw-bot{transform:translateY(-7px)}
@media (pointer:coarse){ .cursor{display:none} }

/* ---------- sound toggle ---------- */
.sound-toggle{
  position:fixed; bottom:var(--s3); right:var(--s3); z-index:65;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em;
  color:var(--milk-dim); background:transparent; border:1px solid var(--milk-faint);
  padding:8px 14px; border-radius:999px; cursor:none; transition:.2s;
}
.sound-toggle:hover,.sound-toggle:focus-visible{color:var(--cheddar);border-color:var(--cheddar)}
@media (pointer:coarse){ .sound-toggle{cursor:pointer} }

/* ================= PRELOADER ================= */
.preloader{
  position:fixed; inset:0; z-index:100; background:var(--void);
  display:grid; place-items:center; overflow:hidden;
}
.pre-curtain{position:absolute; top:0; width:50%; height:100%; background:var(--void); z-index:2}
.pre-curtain-l{left:0} .pre-curtain-r{right:0}
.pre-core{position:relative; z-index:1; display:grid; place-items:center; gap:var(--s3)}
.pre-moon{filter:drop-shadow(0 0 40px rgba(255,201,74,.25))}
.pre-count{font-family:var(--f-display); font-weight:800; font-size:clamp(40px,8vw,88px); line-height:1; color:var(--moonmilk)}
.pre-pct{color:var(--cheddar); font-size:.5em; vertical-align:super; margin-left:4px}
.pre-label{font-family:var(--f-mono); font-size:11px; letter-spacing:.3em; color:var(--milk-dim); text-transform:uppercase}
body.loaded .preloader{display:none}

/* ================= FIXED MOON STAGE ================= */
.moon-stage{
  position:fixed; inset:0; z-index:3; display:grid; place-items:center; pointer-events:none;
  opacity:0; /* revealed after preloader */
}
.moon-shaker{will-change:transform}
.moon-svg{
  width:min(78vmin,760px); height:min(78vmin,760px);
  filter:drop-shadow(0 0 60px rgba(255,201,74,.14));
}
.bite-edge{filter:drop-shadow(0 0 10px var(--bite))}

/* ================= HEAD ================= */
.site-head{
  position:fixed; top:0; left:0; width:100%; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s3) var(--s4);
  mix-blend-mode:difference;
}
.brandmark{display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:13px; letter-spacing:.2em}
.head-nav{display:flex; gap:var(--s3); font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--milk-dim)}
.head-nav a:hover{color:var(--cheddar)}
@media (max-width:640px){ .head-nav{display:none} .site-head{padding:var(--s2) var(--s3)} }

/* ================= HERO ================= */
main{position:relative}
section{position:relative}
.hero{
  min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:var(--s6) var(--s3) var(--s4);
}
.hero-lockup{position:relative; width:100%}
.wordmark{
  font-family:var(--f-display); font-weight:800; line-height:.82;
  letter-spacing:-.03em; font-size:clamp(84px,16vw,320px);
  display:flex; flex-direction:column; align-items:center;
}
.wordmark .word{display:block}
.word-back{color:var(--moonmilk); position:relative; z-index:2}
.word-front{color:var(--moonmilk); position:relative; z-index:5; mix-blend-mode:normal}
/* moon sits between the two words: raise front word above the fixed moon (z2) */
.hero .word-front{z-index:5}
.hero .word-back{opacity:.96}

.hero-sub{
  margin-top:var(--s3); font-family:var(--f-mono); font-size:clamp(11px,1.4vw,14px);
  letter-spacing:.28em; color:var(--cheddar); z-index:6; position:relative;
}
.scrollcue{
  position:absolute; bottom:var(--s5); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.28em; color:var(--milk-dim); z-index:6;
}
.scrollcue i{width:1px; height:34px; background:linear-gradient(var(--cheddar),transparent); animation:cue 1.8s var(--ease-expo) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* marquee */
.marquee{position:absolute; bottom:0; left:0; width:100%; overflow:hidden; border-top:1px solid var(--milk-faint); padding:14px 0; z-index:6; background:linear-gradient(transparent, rgba(7,7,11,.6))}
.marquee-track{display:flex; width:max-content; will-change:transform}
.marquee-track span{font-family:var(--f-display); font-weight:700; font-size:clamp(16px,2vw,26px); letter-spacing:.02em; color:var(--moonmilk); white-space:nowrap}

/* ================= STORY ================= */
.story{padding:var(--s7) 0; display:flex; flex-direction:column; gap:38vh; z-index:5}
.beat{width:min(560px,84vw); padding:0 var(--s4)}
.beat-l{align-self:flex-start; text-align:left}
.beat-r{align-self:flex-end; text-align:right}
.beat-line{font-family:var(--f-display); font-weight:800; line-height:.98; letter-spacing:-.02em; font-size:clamp(40px,6.4vw,104px)}
.beat-line em{font-family:var(--f-serif); font-style:italic; color:var(--cheddar); font-weight:400}
.beat-line .ln{display:block; overflow:hidden}

/* ================= TOKENOMICS ================= */
.tokenomics{min-height:100svh; display:grid; place-items:center; padding:var(--s7) var(--s3); z-index:5}
.tk-inner{width:min(640px,92vw); margin-left:auto; margin-right:6vw}
@media (max-width:900px){ .tk-inner{margin:0 auto} }
.tk-title{font-family:var(--f-display); font-weight:800; letter-spacing:-.02em; font-size:clamp(40px,6vw,78px); line-height:.95}
.tk-note{font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--milk-dim); margin-top:var(--s2); margin-bottom:var(--s4)}
.tk-note em{color:var(--cheddar)}
.tk-list{list-style:none; display:flex; flex-direction:column}
.tk-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) 0; border-top:1px solid var(--milk-faint);
  opacity:.4; transition:opacity .5s var(--ease-expo);
}
.tk-row:last-child{border-bottom:1px solid var(--milk-faint)}
.tk-row.lit{opacity:1}
.tk-k{font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; color:var(--milk-dim)}
.tk-row.lit .tk-k{color:var(--moonmilk)}
.tk-v{font-family:var(--f-mono); font-weight:700; font-size:clamp(15px,2vw,20px); text-align:right; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:10px; justify-content:flex-end}
.tk-row.lit .tk-v .count{color:var(--cheddar)}
.tk-burn{color:var(--cheddar)}
.ph{color:var(--bite); font-weight:400; font-size:.7em; opacity:.85}
.tk-note-inline{color:var(--milk-dim); font-weight:400; font-size:.62em; letter-spacing:.04em; opacity:.85}
.ico-flame,.ico-lock{vertical-align:middle}

/* ================= ROADMAP ================= */
.roadmap{position:relative; z-index:5}
.rm-pin{height:100svh; overflow:hidden; display:flex; flex-direction:column}
.rm-head{display:flex; align-items:center; justify-content:space-between; padding:var(--s5) var(--s4) var(--s3)}
.rm-head .eyebrow{position:static}
.rm-progress svg{display:block}
.rm-track{display:flex; height:100%; align-items:center; will-change:transform; padding:0 8vw; gap:6vw}
.rm-panel{
  flex:0 0 auto; width:min(560px,80vw); padding:var(--s5);
  border:1px solid var(--milk-faint); border-radius:2px;
  background:linear-gradient(160deg, rgba(255,201,74,.03), transparent);
}
.rm-num{font-family:var(--f-mono); font-size:13px; letter-spacing:.3em; color:var(--cheddar)}
.rm-name{font-family:var(--f-display); font-weight:800; font-size:clamp(48px,7vw,96px); letter-spacing:-.02em; line-height:.92; margin:var(--s2) 0 var(--s4)}
.rm-panel ul{list-style:none; display:flex; flex-direction:column; gap:14px}
.rm-panel li{font-family:var(--f-mono); font-size:14px; line-height:1.5; color:var(--milk-dim); padding-left:22px; position:relative}
.rm-panel li::before{content:"◦"; position:absolute; left:0; color:var(--cheddar)}
.rm-final .rm-name{color:var(--cheddar)}

/* ================= BUY ================= */
.buy{min-height:100svh; padding:var(--s7) var(--s4); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; max-width:1100px; margin:0 auto; z-index:5}
.buy-title{font-family:var(--f-display); font-weight:800; font-size:clamp(44px,7vw,96px); letter-spacing:-.02em; margin-bottom:var(--s5)}
.steps{list-style:none; display:flex; flex-direction:column; gap:var(--s3); width:100%; margin-bottom:var(--s5)}
.step{display:flex; align-items:flex-start; gap:var(--s4); padding:var(--s3) 0; border-top:1px solid var(--milk-faint); clip-path:inset(0 100% 0 0); }
.step.in{clip-path:inset(0 0 0 0)}
.step-n{font-family:var(--f-display); font-weight:800; font-size:clamp(40px,5vw,64px); color:transparent; -webkit-text-stroke:1.5px var(--milk-dim); text-stroke:1.5px var(--milk-dim); line-height:1}
.step h3{font-family:var(--f-display); font-weight:700; font-size:clamp(22px,3vw,34px); letter-spacing:-.01em}
.step p{font-family:var(--f-mono); font-size:13px; color:var(--milk-dim); margin-top:6px}

.cta{
  display:inline-block; font-family:var(--f-display); font-weight:800;
  font-size:clamp(20px,2.6vw,30px); letter-spacing:.02em;
  color:var(--void); background:var(--bite); padding:18px 42px; border-radius:2px;
  will-change:transform; transition:transform .25s var(--ease-expo), box-shadow .25s;
  box-shadow:0 0 0 rgba(255,61,46,0);
}
.cta:hover{box-shadow:0 12px 50px rgba(255,61,46,.4)}

.contract{display:flex; align-items:center; gap:var(--s2); margin-top:var(--s4); flex-wrap:wrap; border:1px solid var(--milk-faint); padding:12px 16px; border-radius:2px; max-width:100%}
.contract-label{font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; color:var(--cheddar)}
.contract code{font-family:var(--f-mono); font-size:13px; color:var(--moonmilk); word-break:break-all}
.contract code .nibbled{color:var(--bite)}
.copy-btn{font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--void); background:var(--cheddar); border:0; padding:8px 14px; border-radius:2px; cursor:none}
.copy-btn.copied{background:var(--moonmilk)}
@media (pointer:coarse){ .copy-btn{cursor:pointer} }

/* ================= FOOTER ================= */
.footer{padding:var(--s7) var(--s4) var(--s5); text-align:center; position:relative; z-index:5}
.payoff{display:flex; flex-direction:column; align-items:center; gap:var(--s3); margin-bottom:var(--s6)}
.crescent-logo{cursor:none}
@media (pointer:coarse){ .crescent-logo{cursor:pointer} }
.payoff-line{font-family:var(--f-display); font-weight:800; font-size:clamp(30px,5vw,64px); line-height:1; letter-spacing:-.02em}
.payoff-line em{font-family:var(--f-serif); font-style:italic; color:var(--cheddar); font-weight:400}

.mega-links{display:flex; flex-direction:column; border-top:1px solid var(--milk-faint)}
.mega-links a{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--f-display); font-weight:800; font-size:clamp(34px,6vw,88px);
  letter-spacing:-.02em; padding:var(--s3) var(--s2); border-bottom:1px solid var(--milk-faint);
  color:var(--moonmilk); transition:color .3s, background .3s, transform .3s var(--ease-expo);
}
.mega-links a i{font-size:.5em; color:var(--cheddar)}
.mega-links a:hover{background:var(--cheddar); color:var(--void); transform:skewX(-6deg)}
.mega-links a:hover i{color:var(--void)}

.legal{font-family:var(--f-mono); font-size:11px; line-height:1.7; color:var(--milk-dim); max-width:640px; margin:var(--s6) auto var(--s3)}
.copy-year{font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; color:var(--milk-faint)}

/* focus-visible */
:focus-visible{outline:2px solid var(--cheddar); outline-offset:4px; border-radius:2px}

/* ============================================================
   REDUCED MOTION — static, readable, final crescent
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .scrollcue i{animation:none}
  .marquee-track{transform:none !important; flex-wrap:wrap; justify-content:center}
  .moon-stage{opacity:1}
  .sound-toggle{display:none}
  .tk-row{opacity:1}
  .step{clip-path:none}
  .rm-pin{height:auto; overflow:visible}
  .rm-track{flex-wrap:wrap; transform:none !important; height:auto; gap:var(--s4); padding:var(--s4) var(--s3)}
  .rm-panel{width:100%; max-width:560px; margin:0 auto}
  .preloader{display:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:640px){
  .story{gap:26vh; padding:var(--s6) 0}
  .beat{width:92vw; padding:0 var(--s3)}
  .buy{padding:var(--s6) var(--s3)}
  .step{gap:var(--s3)}
  .mega-links a{padding:var(--s3) var(--s1)}
  .site-head{mix-blend-mode:difference}
}