@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/ui/fonts/space-grotesk-700.woff2) format("woff2");
}
:root { color-scheme: dark; --bg:#06070a; --text:#e9eaed; --muted:#7a7d87; --faint:#4a4d57; --accent:#6ea8ff; --ring: color-mix(in srgb, var(--accent) 55%, transparent); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 700 15px/1.6 "Space Grotesk", ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  display: grid; place-items: center; overflow: hidden;
}

main { display: grid; justify-items: center; gap: 28px; padding: 32px; text-align: center; }

.stage { position: relative; width: 260px; height: 260px; display: grid; place-items: center; }

/* a slow breathing glow behind the mark — the only thing that moves fast enough to notice */
.glow {
  position: absolute; inset: -70px; border-radius: 50%;
  background: radial-gradient(circle, var(--ring) 0%, transparent 68%);
  animation: breathe 5.5s ease-in-out infinite;
  filter: blur(2px);
}
@keyframes breathe {
  0%, 100% { transform: scale(0.82); opacity: .35; }
  50% { transform: scale(1.08); opacity: .8; }
}

/* a thin ring that turns almost too slowly to catch — like something is quietly working */
.ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 78%, var(--ring) 92%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: spin 22s linear infinite;
  opacity: .9;
}
@keyframes spin { to { transform: rotate(360deg); } }

.mark { position: relative; width: 168px; height: 168px; animation: bob 7s ease-in-out infinite; filter: drop-shadow(0 0 28px color-mix(in srgb, var(--accent) 35%, transparent)); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.word { max-width: 90vw; font-size: 34px; font-weight: 700; letter-spacing: .04em; color: var(--text); opacity: 0; animation: rise 1.2s ease forwards .4s; }
.line { max-width: 480px; font-size: 22px; font-weight: 700; color: var(--muted); opacity: 0; animation: rise 1.2s ease forwards .75s; }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .glow, .ring, .mark { animation: none; }
  .word, .line { animation: none; opacity: 1; }
}

.corner {
  position: fixed; right: 20px; bottom: 18px;
  font-size: 12px; letter-spacing: .04em; color: var(--faint); text-decoration: none;
  opacity: 0; animation: rise 1.2s ease forwards 1.4s;
}
.corner:hover { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .corner { animation: none; opacity: 1; } }