/* Mirage landing. The stage is fixed behind the page; --k (0..1, set from scroll) drives the progress bar. */
:root {
  --k: 0;
  /* flat palette taken from the hero: no gradients, no red */
  --lime: #c8ff3d;        /* the glow inside the strands and the bulb */
  --ink-night: 236, 241, 230;   /* #ecf1e6, text */
  --sage: #2e4234;        /* the lit face of the dune */
  --sky: #0b241c;         /* the deep green sky */
  --night: #06110d;       /* the dark end of the scroll */
  --muted: #7c8574;       /* secondary text, negative states */
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.22, 0.7, 0.18, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* light type throughout: on the render's mid grey it reads at about 7:1, dark type only about 2:1 */
body { margin: 0; background: var(--sky); color: rgb(var(--ink)); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  --ink: var(--ink-night); }
h1, h2, .lead { text-shadow: 0 1px 24px rgba(0, 0, 0, 0.18); }
a { color: inherit; text-decoration: none; }

/* stage */
.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--sky); }
.stage > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the loop videos are only sources for the canvas; they stay in the DOM so they keep decoding */
.stage .idle { opacity: 0; }
.grain { pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 28px; padding: 22px clamp(18px, 4vw, 56px); transition: color 0.4s; }
.brand { display: flex; align-items: center; gap: 10px; font: 600 15px var(--sans); letter-spacing: 0.22em; }
.mark { width: 26px; height: 26px; display: block; }
.nav nav { display: flex; gap: 26px; margin-left: auto; font: 500 13px var(--sans); }
.nav nav a { opacity: 0.72; transition: opacity 0.2s; }
.nav nav a:hover { opacity: 1; }

.social { display: flex; gap: 8px; }
.social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(var(--ink), 0.28); color: rgb(var(--ink)); transition: border-color 0.2s; }
.social a:hover { border-color: var(--lime); color: var(--lime); }
.social svg { width: 17px; height: 17px; }
.btn .ico { width: 17px; height: 17px; margin-right: 9px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: 999px; font: 600 14px var(--sans); transition: transform 0.2s var(--ease), background 0.3s, color 0.3s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-ink { background: var(--lime); color: #10140a; }
.btn-line { border: 1px solid rgba(var(--ink), 0.6); }

/* sections */
main { position: relative; z-index: 2; }
section { min-height: 100vh; padding: 0 clamp(18px, 6vw, 96px); }
.hero { position: relative; display: flex; align-items: center; padding-top: 88px; padding-bottom: 6vh; }
.hero-copy { width: min(600px, 100%); }
/* CA panel: flat, one line; the burn total wraps under it */
.hero-ca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: min(520px, 100%); margin: 0 0 22px; padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--night); border: 1px solid rgba(200, 255, 61, 0.22); }
.hero-ca[hidden], .hero-ca [hidden] { display: none; }
.ca-label { font: 500 11px var(--mono); letter-spacing: 0.12em; color: var(--muted); white-space: nowrap; }
.ca-label b { color: var(--lime); font-weight: 500; margin-left: 4px; }
.hero-ca code { flex: 1; min-width: 0; font: 500 13px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-btn { height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(var(--ink), 0.3); background: none; color: rgb(var(--ink)); font: 600 12px var(--sans); cursor: pointer; transition: border-color 0.2s; }
.ca-btn:hover { border-color: var(--lime); }
#ca-buy { background: var(--lime); border-color: var(--lime); color: #10140a; }
.ca-burn { flex-basis: 100%; padding-bottom: 4px; font: 400 12px var(--mono); color: var(--muted); }
.ca-burn b { color: var(--lime); font-weight: 500; }
.ca-burn a { text-decoration: underline; text-underline-offset: 3px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
/* hero terminal: a tall window playing a real CLI session */
.term { display: flex; flex-direction: column; width: min(560px, 100%); height: clamp(420px, calc(100vh - 290px), 680px); margin: 0 0 26px; border-radius: 16px; background: rgba(6, 17, 13, 0.94); border: 1px solid rgba(200, 255, 61, 0.18); overflow: hidden; }
.term-bar { flex: none; display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(var(--ink), 0.1); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--ink), 0.22); }
.term-bar i:first-child { background: var(--lime); }
.term-bar span { margin-left: 8px; font: 500 11px var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.term-body { flex: 1; display: flex; flex-direction: column; padding: 16px 20px 18px; overflow: hidden; font: 400 12.5px/1.75 var(--mono); }
.term-body .l { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.term-body .c { margin-top: 10px; color: rgb(var(--ink)); }
.term-body .o { padding-left: 2ch; color: rgba(var(--ink), 0.78); }
.term-body .o b { color: rgb(var(--ink)); font-weight: 600; }
.term-body .k { color: var(--muted); }
.term-body .ok { color: var(--lime); }
.term-body .hold { color: #10140a; background: #e8d48a; padding: 0 4px; font-weight: 600; }
.term .pr { color: var(--lime); }
h1.cm { font: 400 15px/1.6 var(--mono); color: rgba(var(--ink), 0.92); letter-spacing: 0; text-shadow: none; }
.term-body.play .l { display: none; }
.term-body.play .l.on { display: block; }
.cursor { display: inline-block; width: 0.6em; height: 1.1em; margin-left: 4px; vertical-align: -0.2em; background: var(--lime); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.scroll-cue { position: absolute; left: 50%; transform: translateX(-50%); bottom: 3vh; display: flex; align-items: center; gap: 12px; font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.scroll-cue i { width: 1px; height: 46px; background: rgba(var(--ink), 0.5); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: rgb(var(--ink)); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { to { top: 100%; } }

.panel { position: relative; display: flex; flex-direction: column; justify-content: center; max-width: 100%; }
.panel .copy { max-width: 440px; }
.panel.right { align-items: flex-end; text-align: left; }
.panel.right .copy { width: 440px; }
.panel.center { align-items: center; text-align: center; justify-content: flex-end; padding-bottom: 7vh; }
.num { margin: 0 0 10px; font: 500 13px var(--mono); color: rgba(var(--ink), 0.6); }
h2 { margin: 0 0 14px; font: 600 clamp(34px, 4vw, 58px)/1.02 var(--sans); letter-spacing: -0.03em; }
.panel p { opacity: 0.84; }
.panel .copy > *, .hero-copy > * { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.panel.in .copy > *, .hero-copy > * { opacity: 1; transform: none; }
.panel.in .copy > p { opacity: 0.84; }
.panel.in .copy > *:nth-child(2) { transition-delay: 0.06s; } .panel.in .copy > *:nth-child(3) { transition-delay: 0.12s; } .panel.in .copy > *:nth-child(4) { transition-delay: 0.18s; } .panel.in .copy > *:nth-child(5) { transition-delay: 0.24s; }

.facts { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid rgba(var(--ink), 0.2); }
.facts li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(var(--ink), 0.2); font-size: 14.5px; }
.facts b { font: 500 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding-top: 3px; }
.facts span { opacity: 0.8; }

.rules { display: grid; gap: 8px; margin-top: 18px; }
.rule { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(var(--ink-night), 0.06); border: 1px solid rgba(var(--ink), 0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; }
.rule code { font: 500 12px var(--mono); opacity: 0.7; }
.rule b { font: 600 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(var(--ink), 0.3); }
.rule:nth-child(1) b, .rule:nth-child(3) b { background: var(--lime); color: #10140a; border-color: transparent; }

pre { margin: 20px 0 0; padding: 18px 20px; border-radius: 14px; font: 400 13px/1.75 var(--mono); text-align: left; overflow-x: auto;
  background: rgba(6, 8, 5, 0.55); color: #e7eedd; border: 1px solid rgba(200, 255, 61, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
pre .c { color: var(--muted); } pre .v { color: var(--lime); } pre .n { color: var(--muted); }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; text-align: left; }
.way b { display: block; font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }
.way pre { margin-top: 10px; font-size: 12px; line-height: 1.65; }
.panel.center .copy { max-width: 760px; }
.repo { justify-content: center; margin-top: 22px; }
.tools { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin-top: 12px; }
.tools code { font: 500 12.5px var(--mono); padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(200, 255, 61, 0.35); color: var(--lime); }
.fine { margin-top: 22px; font: 400 12px var(--mono); opacity: 0.55 !important; }

/* burns panel: after the scroll story, on solid night so the stage stays behind it */
.burns { position: relative; z-index: 2; min-height: 0; padding: 96px clamp(18px, 6vw, 96px) 120px; background: var(--night); border-top: 1px solid rgba(200, 255, 61, 0.14); }
.burns-in { max-width: 980px; margin: 0 auto; }
.burns h2 { margin-bottom: 28px; }
.burnstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(var(--ink), 0.16); border-radius: 16px; overflow: hidden; margin-bottom: 16px; }
.burnstats > div { padding: 20px 22px; border-left: 1px solid rgba(var(--ink), 0.16); }
.burnstats > div:first-child { border-left: 0; }
.burnstats b { display: block; font: 600 clamp(28px, 3vw, 40px)/1.1 var(--sans); letter-spacing: -0.02em; color: var(--lime); }
.burnstats span { font: 500 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.burntable { overflow-x: auto; border: 1px solid rgba(var(--ink), 0.16); border-radius: 16px; padding: 4px 18px; }
.burntable table { width: 100%; border-collapse: collapse; font: 400 13px var(--mono); }
.burntable th, .burntable td { padding: 13px 10px; text-align: left; white-space: nowrap; border-top: 1px solid rgba(var(--ink), 0.1); }
.burntable thead th { border-top: 0; font: 500 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.burntable .r { text-align: right; }
.burntable b { font-weight: 500; }
.burntable a { color: var(--lime); }
.burntable a:hover { text-decoration: underline; }
.kind { padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(var(--ink), 0.3); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.kind.buyback, .kind.supply { background: var(--lime); border-color: transparent; color: #10140a; }
.burnmsg { margin: 14px 0 0; font: 400 12px var(--mono); color: var(--muted); }
.ca-burn a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

.progress { position: fixed; left: 0; right: 0; bottom: 0; height: 2px; z-index: 10; }
.progress i { display: block; height: 100%; width: calc(var(--k) * 100%); background: var(--lime); }

@media (max-width: 820px) {
  .nav nav { display: none; }
  .nav { gap: 10px; }
  .nav .social { margin-left: auto; gap: 6px; }
  .social a { width: 34px; height: 34px; }
  .social svg { width: 15px; height: 15px; }
  .ways { grid-template-columns: 1fr; }
  .repo { justify-content: flex-start; }
  .nav .btn { height: 34px; padding: 0 13px; font-size: 13px; }
  .hero { flex-direction: column; }
  .hero, .panel, .panel.right, .panel.center { align-items: stretch; text-align: left; justify-content: flex-end; padding: 0 14px 6vh; }
  .panel.right .copy, .panel .copy, .panel.center .copy { width: auto; max-width: none; }
  .panel.center .tools { justify-content: flex-start; }
  .scroll-cue { display: none; }
  /* the sculpture owns the top of a phone screen; the copy sits on dark glass below it, readable on any frame */
  .copy { --ink: var(--ink-night); color: rgb(var(--ink)); padding: 20px 18px; border-radius: 18px; background: rgba(12, 14, 10, 0.62);
    border: 1px solid rgba(236, 241, 230, 0.1); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
  .term { height: 470px; }
  .term-body { font-size: 11px; padding: 12px 14px 14px; }
  h1.cm { font-size: 13px; }
  /* the terminal is its own dark glass on a phone, so the hero copy needs no second box */
  .hero-copy.copy { background: none; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .term { background: var(--night); }
  .hero .btn-line { background: rgba(6, 17, 13, 0.9); }
  .hero .kicker { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
  h2 { font-size: 30px; }
  pre { font-size: 11.5px; }
  .burns { padding: 64px 16px 88px; }
  .burnstats { grid-template-columns: 1fr; }
  .burnstats > div { border-left: 0; border-top: 1px solid rgba(var(--ink), 0.16); padding: 16px 18px; }
  .burnstats > div:first-child { border-top: 0; }
  .burntable { padding: 2px 12px; }
  .burntable .from, .burntable .type, .burntable .sup { display: none; }
  .burntable th, .burntable td { padding: 12px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel > *, .hero-copy > * { transition: none; }
  .cursor { animation: none; }
}