:root {
  --void: #05060A; --ink: #ECEEF4; --muted: #A3ABBF; --grey: #6E7891;
  --coral: #FF6B4A; --amber: #FFB38A;
  --pad: max(20px, env(safe-area-inset-left, 0px));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--void); color: var(--ink); overflow: hidden; }
body { font-family: "Hanken Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.veil { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 48%, rgba(5,6,10,0) 0%, rgba(5,6,10,0.35) 60%, rgba(5,6,10,0.92) 100%); }

.top, .bottom { position: fixed; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); z-index: 2; }
.top { top: 0; padding-top: max(24px, env(safe-area-inset-top, 0px)); }
.bottom { bottom: 0; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); align-items: flex-end; }

.logo { font-family: "Major Mono Display", monospace; color: var(--coral); text-decoration: none; font-size: 26px; letter-spacing: -0.02em; }
.ca { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber); background: rgba(5,6,10,0.5); border: 1px solid rgba(255,179,138,0.28); border-radius: 100px; padding: 10px 14px; cursor: default; backdrop-filter: blur(10px); }
.ca.ready { cursor: pointer; }
.ca .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.2; } }

.center { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 22px; pointer-events: none; z-index: 2; padding: 0 var(--pad); }
.center > * { pointer-events: auto; }
h1 { font-weight: 700; font-size: clamp(44px, 8.2vw, 118px); line-height: 0.95; letter-spacing: -0.045em; text-wrap: balance;
  text-shadow: 0 2px 40px rgba(5,6,10,0.8); opacity: 0; transform: translateY(16px); animation: rise 1.2s 0.3s cubic-bezier(.2,.8,.2,1) forwards; }
.sub { text-shadow: 0 1px 18px rgba(5,6,10,0.95), 0 0 2px rgba(5,6,10,0.9); color: var(--muted); font-size: clamp(15px, 1.6vw, 18px); max-width: 44ch; text-wrap: balance; opacity: 0; animation: rise 1.2s 0.55s cubic-bezier(.2,.8,.2,1) forwards; }
.open { margin-top: 8px; display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font: 600 16px/1 "Hanken Grotesk", sans-serif; color: var(--void); background: var(--coral);
  padding: 18px 28px; border-radius: 100px; box-shadow: 0 0 0 0 rgba(255,107,74,0.5), 0 20px 60px -20px rgba(255,107,74,0.8);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
  opacity: 0; animation: rise 1.2s 0.8s cubic-bezier(.2,.8,.2,1) forwards, pulse 2.6s 2s ease-out infinite; }
.open:hover { transform: translateY(-2px); background: #ff7d60; }
.open:active { transform: scale(0.97); }
.open:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.open svg { transition: transform .25s; }
.open:hover svg { transform: translateX(3px); }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,107,74,0.45), 0 20px 60px -20px rgba(255,107,74,0.8); } 70%,100% { box-shadow: 0 0 0 18px rgba(255,107,74,0), 0 20px 60px -20px rgba(255,107,74,0.8); } }

.stat { display: flex; flex-direction: column; gap: 6px; min-width: 140px; }
.stat.right { align-items: flex-end; text-align: right; }
.stat b { font: 500 22px/1 "IBM Plex Mono", monospace; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat span, .note { font: 500 11px/1.3 "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.note { padding-bottom: 2px; text-align: center; }

@media (max-width: 640px) {
  .note { display: none; }
  .ca { font-size: 11px; padding: 9px 12px; }
  .logo { font-size: 22px; }
  .stat { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  h1, .sub, .open { animation: none; opacity: 1; transform: none; }
}

/* ---------- intro fly-through ---------- */
.top, .bottom, .veil { transition: opacity 1.2s ease; }
body.intro .top, body.intro .bottom, body.intro .veil { opacity: 0; }
body.intro h1, body.intro .sub, body.intro .open { animation-play-state: paused; }
.introhud { position: fixed; left: 50%; bottom: max(40px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; transition: opacity .8s ease; }
.introhud b { font: 500 13px/1 "IBM Plex Mono", monospace; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); font-variant-numeric: tabular-nums; }
.introhud span { font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); }
body:not(.intro) .introhud { opacity: 0; }
.flash { position: fixed; inset: 0; background: #fff3ea; pointer-events: none; z-index: 4; opacity: 0; }
.tags { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; opacity: 0; transform-origin: 0 50%; white-space: nowrap;
  font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; color: var(--amber);
  padding: 4px 7px; border-left: 1px solid rgba(255,179,138,0.6); background: rgba(5,6,10,0.35); }