/* ===== PUMP CYCLE THEORY — style.css =====
   ✏️ EDIT COLORS here: --g is the neon green. */
:root{
  --bg:#020403; --fg:#fff; --g:#1dff7f; --dim:rgba(255,255,255,.5); --line:rgba(255,255,255,.09);
  --h:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --m:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --pad:clamp(1.1rem,5vw,4rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:400 .85rem/1.6 var(--m);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 35%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 35%,#000 15%,transparent 75%)}
h1,h2,.big,.line,.const,.ticker,.foot,.num,.den,.res{font-family:var(--h);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.01em}
em{font-style:normal;color:var(--g)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--g);outline-offset:3px}

/* cursor glow (desktop only, set by JS) */
.glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(circle,rgba(29,255,127,.13),transparent 65%);transition:opacity .4s;will-change:transform}

/* top bar: brand, buy/social buttons, contract address */
.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:.8rem 1.2rem;
  padding:.7rem var(--pad);font-size:.68rem;letter-spacing:.16em;background:rgba(2,4,3,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar b{color:var(--fg)}
.brand{display:flex;align-items:center;gap:.6rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--g);animation:blink 1.2s steps(2) infinite}
.links{display:flex;gap:.5rem}
.bar .btn{padding:.6rem 1rem;font-size:.68rem}
.bar .ca{font-size:.68rem}
.bar .ca span,.bar .ca code{padding:.55rem .8rem}
.bar .ca code{max-width:18ch;overflow:hidden;text-overflow:ellipsis}
.bar .ca button{padding:0 .9rem}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:1px}
.progress i{display:block;height:100%;width:0;background:var(--g)}
@keyframes blink{50%{opacity:.15}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.7rem;border:1px solid var(--g);color:var(--g);background:transparent;
  font:700 .8rem var(--m);letter-spacing:.18em;text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s,color .25s}
.btn.solid{background:var(--g);color:#000}
.btn:hover{transform:translateY(-3px);box-shadow:0 0 34px rgba(29,255,127,.45)}
.btn:not(.solid):hover{background:rgba(29,255,127,.1)}

/* reveal */
.js .rv{opacity:0;transform:translateY(46px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* ===== HERO ===== */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;gap:1.4rem;padding:6rem var(--pad) 2.5rem}
.hero h1{display:grid;grid-template-columns:1fr 1fr;width:100%;font-size:clamp(2.3rem,5.6vw,5.8rem)}
.hero h1 span+span{border-left:1px solid rgba(255,255,255,.3);padding-left:3vw}
.cycle-wrap{position:relative;width:100%;flex:1;display:flex;align-items:center;justify-content:center;min-height:300px}
.cycle{position:relative;width:min(48vh,86vw);min-width:270px;aspect-ratio:1}
.layer{position:absolute;inset:0;width:100%;height:100%}
.ring{animation:spin 28s linear infinite}
.ring2{animation:spin 70s linear infinite reverse}
.pill{animation:bob 5s ease-in-out infinite}
.halo{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(29,255,127,.55),transparent 68%);animation:halo 4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes halo{50%{opacity:.5;transform:scale(1.18)}}
.note{position:absolute;top:50%;font-size:.68rem;letter-spacing:.2em;color:var(--dim);line-height:1.9;transform:translateY(-50%)}
.note.l{left:0;border-left:1px solid var(--line);padding-left:1rem}
.note.r{right:0;text-align:right}
.note b{color:var(--g);font-weight:400}
.stages{font-size:clamp(.58rem,1.15vw,.85rem);letter-spacing:.18em;color:var(--dim);text-align:center;line-height:2.1}
.stg{transition:color .4s,text-shadow .4s}
.stg.on{color:var(--g);text-shadow:0 0 14px rgba(29,255,127,.8)}
.spin-i{display:inline-block;color:var(--g);animation:spin 6s linear infinite}

/* ===== THEORY ===== */
.intro{padding:22vh var(--pad) 10vh}
.intro h2,.here h2,.eq h2{font-size:clamp(2.4rem,8.2vw,8.5rem)}
.track{height:560vh;position:relative}
.sticky{position:sticky;top:0;height:100svh;padding:5.4rem var(--pad) 1.4rem;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:.8rem}
.readout{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.lbl{font-size:.66rem;letter-spacing:.2em;color:var(--dim)}
.big{font-size:clamp(2.6rem,9vw,8rem);color:var(--g);text-shadow:0 0 40px rgba(29,255,127,.35)}
.big.pop{animation:pop .6s cubic-bezier(.2,.7,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(18px)}}
.desc{max-width:26ch;font-size:.78rem;color:var(--dim);text-align:right}
.chart{width:100%;height:100%;display:block;overflow:visible}
.gl line{stroke:var(--line);stroke-width:1}
.ghost{fill:none;stroke:rgba(255,255,255,.17);stroke-width:2;stroke-dasharray:3 7}
.live{fill:none;stroke:var(--g);stroke-width:4;stroke-linecap:round}
.glowline{fill:none;stroke:rgba(29,255,127,.22);stroke-width:16;stroke-linecap:round}
.loop{fill:none;stroke:var(--g);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;opacity:.8;transition:stroke-dashoffset 1.6s ease}
.chart.looped .loop{stroke-dashoffset:0;stroke-dasharray:.012 .012}
.axis{fill:var(--dim);font:10px var(--m);letter-spacing:.15em}
.ring{transform-box:fill-box;transform-origin:center}
.chart .ring{fill:none;stroke:var(--g);animation:ping 1.8s ease-out infinite}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(2.6);opacity:0}}
.dpt{fill:#000;stroke:rgba(255,255,255,.4);stroke-width:2;transition:fill .4s,stroke .4s}
.dpt.on{fill:var(--g);stroke:var(--g)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;font-size:.62rem;letter-spacing:.12em;color:var(--dim)}
.steps li{border-top:1px solid var(--line);padding-top:.5rem;transition:color .3s,border-color .3s}
.steps li.on{color:var(--g);border-top-color:var(--g)}

/* ===== YOU ARE HERE ===== */
.here{min-height:100svh;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;padding:14vh var(--pad)}
.here h2{font-size:clamp(3.4rem,14vw,13rem)}
.here .chart{width:min(1000px,100%);height:auto;margin:1rem 0}
.hmk{transition:transform 1s cubic-bezier(.6,0,.2,1)}
.hmk .blink{animation:blink 1s steps(2) infinite}
.tag{font-size:11px}
.probably{font:800 clamp(1.8rem,5vw,3.4rem) var(--h);text-transform:uppercase;font-style:italic}
.small{color:var(--dim);font-size:.72rem;min-height:1.6em}

/* ===== EQUATION ===== */
.eq{padding:16vh var(--pad)}
.eqbox{position:relative;margin-top:3rem;border:1px solid var(--line);padding:clamp(3.5rem,8vw,6.5rem) 1.2rem;overflow:hidden;
  background:linear-gradient(135deg,rgba(29,255,127,.04),transparent 50%)}
.eqmain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.2rem 2.4rem}
.frac{display:inline-flex;flex-direction:column;align-items:center}
.num,.den,.res{font-size:clamp(1.5rem,5vw,5rem)}
.num{padding-bottom:.3em;border-bottom:3px solid var(--fg);text-align:center}
.den{padding-top:.3em}
.tag{position:absolute;font-size:.6rem;letter-spacing:.16em;color:var(--dim)}
.tl{left:1rem;top:1rem}.tr{right:1rem;top:1rem;color:var(--g)}.bl{left:1rem;bottom:1rem}.br{right:1rem;bottom:1rem}
.scope{position:absolute;left:0;right:0;bottom:2.4rem;width:100%;height:30px;opacity:.5}
.scope path{fill:none;stroke:var(--g);stroke-width:1.5;stroke-dasharray:6 4;animation:dash 2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.notes{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;margin-top:1.6rem;font-size:.72rem;color:var(--dim)}
.notes li{border-left:1px solid var(--g);padding-left:.8rem}
.notes b{display:block;color:var(--fg);letter-spacing:.15em}

/* ===== PHILOSOPHY ===== */
.philo{padding:6vh var(--pad) 14vh;text-align:center}
.line{font-size:clamp(4.5rem,24vw,22rem);min-height:78svh;display:flex;align-items:center;justify-content:center;line-height:.84}
.const{font-size:clamp(2.2rem,7vw,7rem);margin-top:6vh}
.huge{font-size:clamp(3rem,8vw,6rem);margin-top:3rem}

/* ===== FINAL ===== */
.final{min-height:100svh;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.8rem;padding:14vh var(--pad) 3rem;border-top:1px solid var(--line)}
.final h2{font-size:clamp(3rem,11vw,11rem)}
.ticker{font-size:clamp(4rem,19vw,17rem);text-shadow:0 0 60px rgba(29,255,127,.3)}
.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.ca{display:flex;align-items:stretch;max-width:100%;border:1px solid var(--line);font-size:.78rem}
.ca span{padding:.8rem 1rem;color:var(--g);border-right:1px solid var(--line)}
.ca code{padding:.8rem 1rem;overflow-x:auto;white-space:nowrap;max-width:60vw;scrollbar-width:none}
.ca button{padding:0 1.2rem;border:0;border-left:1px solid var(--line);background:transparent;color:var(--fg);letter-spacing:.15em;transition:background .2s,color .2s}
.ca button:hover{background:var(--g);color:#000}
.art{width:min(260px,60vw);border:1px solid var(--line);margin-top:2rem;opacity:.9}
.foot{font-size:clamp(1.8rem,5vw,4rem);margin-top:3rem}
small{max-width:56ch;color:var(--dim);font-size:.64rem;margin-top:2rem}

/* ===== RESPONSIVE ===== */
@media (max-width:800px){
  .hide-sm{display:none}
  .hero h1{grid-template-columns:1fr;gap:.6rem;font-size:clamp(2.1rem,10.5vw,3.6rem)}
  .hero h1 span+span{border:0;padding:0}
  .readout{flex-direction:column;align-items:flex-start;gap:.5rem}
  .desc{text-align:left;max-width:none}
  .steps li span{display:none}
  .sticky{padding-top:7rem}
  .hero{padding-top:7.6rem}
  .bar{flex-wrap:wrap;padding:.6rem var(--pad)}
  .links{order:3;width:100%}
  .links .btn{flex:1;padding:.55rem .3rem;font-size:.6rem;letter-spacing:.1em}
  .bar .ca{margin-left:auto;max-width:62%}
  .bar .ca code{max-width:12ch}
  .eqbox .tag.bl,.eqbox .tag.br{display:none}
}
@media (max-width:480px){.final .btn{width:100%}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}