:root {
  --bg: #07070c;
  --fg: #ecebf5;
  --muted: #8a88a3;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

/* soft vignette so the glow fades into the edges */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.75) 100%);
}

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hud {
  position: fixed;
  left: clamp(16px, 5vw, 64px);
  bottom: clamp(16px, 6vh, 64px);
  z-index: 1;
  pointer-events: none;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  animation: fade 1.2s var(--ease-out-expo) 0.2s forwards;
}

h1 {
  margin-top: 10px;
  font-size: clamp(28px, 6vw, 64px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* staggered word reveal: rise + unblur, each word slightly after the last */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(4deg);
  filter: blur(8px);
  animation: rise 1.1s var(--ease-out-expo) forwards;
  animation-delay: calc(0.45s + var(--i) * 0.09s);
}

.shape-label {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  animation: fade 1.2s var(--ease-out-expo) 1.1s forwards;
}

#shape-name {
  display: inline-block;
  color: var(--fg);
  transition: opacity 0.35s ease, transform 0.35s var(--ease-out-expo);
}
#shape-name.swap {
  opacity: 0;
  transform: translateY(6px);
}

@keyframes rise {
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes fade {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .word, .eyebrow, .shape-label { animation: none; opacity: 1; transform: none; filter: none; }
}