/* coalescence — galaxy landing */
:root {
  --bg: #000; --ink: #f4f2ee; --ink-2: rgba(244,242,238,.64); --ink-3: rgba(244,242,238,.4);
  --line: rgba(255,255,255,.14); --accent: #ff6b1a;
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

#sky, #bodies, #bloom, #wires, #callouts, .vignette { position: fixed; inset: 0; pointer-events: none; }
#sky { z-index: 0; transition: opacity 2.4s ease; }
#bodies { z-index: 1; }
#bloom { z-index: 2; width: 100vw; height: 100vh; filter: blur(16px) saturate(1.5) brightness(1.8); mix-blend-mode: screen; opacity: .9; }
#wires { z-index: 3; width: 100vw; height: 100vh; overflow: visible; }
#callouts { z-index: 4; }
.vignette { z-index: 5; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.75) 100%); }
body.booting #sky { opacity: 0; }

/* ---------- HUD callouts ---------- */
#wires path { fill: none; stroke: rgba(244,242,238,.32); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .3s; }
#wires circle { fill: var(--ink); }
#wires .hot path, #wires path.hot { stroke: var(--accent); }
.co {
  position: absolute; left: 0; top: 0; width: 196px; padding: 9px 11px 10px;
  font: 500 10.5px/1.55 var(--mono); letter-spacing: .02em; color: var(--ink-2);
  background: rgba(0,0,0,.72); border: 1px solid var(--line); backdrop-filter: blur(3px);
  will-change: transform; opacity: 0; transition: opacity .6s, border-color .3s;
}
.co.on { opacity: 1; }
.co::before, .co::after { content: ""; position: absolute; width: 6px; height: 6px; border-color: var(--ink); border-style: solid; }
.co::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.co::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.co-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.08); }
.co-h b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: 0; }
.co-h i { font-style: normal; color: var(--ink-3); }
.co-r { display: flex; justify-content: space-between; white-space: nowrap; }
.co-r span:first-child { color: var(--ink-3); }
.co-r span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
.co-meter { color: var(--accent) !important; letter-spacing: -.5px; }
.co.hot { border-color: rgba(255,107,26,.6); }
.co.hot .co-h b { color: var(--accent); }
.co-flag { display: none; margin-top: 5px; padding: 2px 6px; background: var(--accent); color: #000; font-weight: 600; letter-spacing: .1em; text-align: center; }
.co.merged .co-flag { display: block; animation: blink .5s steps(1) 4; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- top bar ---------- */
.g-top { position: fixed; z-index: 10; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 26px 32px; }
.g-brand { display: flex; flex-direction: column; gap: 12px; }
.g-tag { font: 500 clamp(18px, 1.7vw, 26px) var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink); white-space: nowrap; }
.g-tag .gl.hot { color: var(--accent); }
.g-right { display: flex; gap: 10px; align-items: center; }
.g-x { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0,0,0,.5); color: var(--ink-2); transition: color .2s, border-color .2s; }
.g-x:hover { color: var(--ink); border-color: var(--ink-2); }
.g-ca { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px 0 5px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0,0,0,.5); font: 500 12px var(--mono); }
.g-ca[hidden] { display: none; }
.g-ca .k { display: inline-grid; place-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--accent); color: #000; font-size: 10px; letter-spacing: .1em; }

/* ---------- glitch wordmark ---------- */
.glitch { position: relative; display: inline-block; font: 600 clamp(44px, 4.6vw, 72px)/0.95 var(--sans); letter-spacing: -0.045em; color: var(--ink); white-space: nowrap; }
.gl { display: inline-block; text-align: center; white-space: pre; }
.gl.g { font-family: var(--mono); font-weight: 500; transform: scale(.82); }
.gl.hot { color: var(--accent); }
.glitch .gl:not(.hot), .g-tag .gl:not(.hot) { transition: color .2s; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.glitch::before { color: var(--accent); animation: gA 3.7s infinite steps(1); clip-path: inset(100% 0 0 0); }
.glitch::after { color: #7fd6ff; opacity: .8; animation: gB 3.7s infinite steps(1); clip-path: inset(100% 0 0 0); }
@keyframes gA {
  0%   { clip-path: inset(12% 0 62% 0); transform: translate(-3px, 0); }
  3%   { clip-path: inset(58% 0 18% 0); transform: translate(3px, 0); }
  6%   { clip-path: inset(30% 0 44% 0); transform: translate(-2px, 0); }
  9%   { clip-path: inset(100% 0 0 0); transform: none; }
  52%  { clip-path: inset(70% 0 6% 0); transform: translate(4px, 0); }
  54%  { clip-path: inset(100% 0 0 0); transform: none; }
  100% { clip-path: inset(100% 0 0 0); }
}
@keyframes gB {
  0%   { clip-path: inset(66% 0 10% 0); transform: translate(3px, 0); }
  3%   { clip-path: inset(8% 0 70% 0); transform: translate(-3px, 0); }
  6%   { clip-path: inset(44% 0 30% 0); transform: translate(2px, 0); }
  9%   { clip-path: inset(100% 0 0 0); transform: none; }
  52%  { clip-path: inset(20% 0 55% 0); transform: translate(-4px, 0); }
  54%  { clip-path: inset(100% 0 0 0); transform: none; }
  100% { clip-path: inset(100% 0 0 0); }
}
.glitch.jolt { animation: jolt .18s steps(2) 1; }
@keyframes jolt { 50% { transform: translate(2px, -1px) skewX(-6deg); } }

/* ---------- centre button ---------- */
.g-center { position: fixed; z-index: 9; inset: 0; display: grid; place-items: center; pointer-events: none; }
.launch {
  position: relative; pointer-events: auto; display: inline-grid; place-items: center;
  height: 64px; padding: 0 40px; border-radius: 999px;
  background: var(--ink); color: #000; font: 600 17px var(--sans); letter-spacing: -0.01em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 0 60px -6px rgba(255,107,26,.6);
  transition: transform .4s var(--ease), box-shadow .4s, background .3s;
  opacity: 0; transform: scale(.94);
}
body.ready .launch { opacity: 1; transform: none; transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), box-shadow .4s, background .3s; }
.launch:hover { background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 0 90px 0 rgba(255,107,26,.75); transform: scale(1.03); }
.launch-ring { position: absolute; inset: -10px; border-radius: 999px; border: 1px solid rgba(255,107,26,.5); animation: ring 2.6s var(--ease) infinite; }
@keyframes ring { 0% { opacity: .9; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.35, 1.6); } }
.launch-label { position: relative; }

/* ---------- bottom ---------- */
.g-bottom { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 22px 32px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.g-stat { display: inline-flex; align-items: center; gap: 10px; }
.g-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.g-top, .g-bottom { opacity: 0; transition: opacity 1.4s var(--ease); }
body.ready .g-top, body.ready .g-bottom { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .glitch::before, .glitch::after, .launch-ring { animation: none; } }