:root {
  --bg: #07070b;
  --fg: #f4f4f8;
  --muted: rgba(244, 244, 248, 0.55);
  --faint: rgba(244, 244, 248, 0.28);
  --a: #5457e0;
  --b: #8b5cf6;
  --c: #22d3ee;
}

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

html, body { height: 100%; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Fondo: tres manchas de luz que se mueven lento, difuminadas. */
.aurora { position: fixed; inset: 0; filter: blur(90px); opacity: 0.55; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.orb-a { width: 46vmax; height: 46vmax; background: var(--a); top: -12vmax; left: -10vmax; animation: drift-a 22s ease-in-out infinite alternate; }
.orb-b { width: 38vmax; height: 38vmax; background: var(--b); bottom: -14vmax; right: -8vmax; animation: drift-b 26s ease-in-out infinite alternate; }
.orb-c { width: 24vmax; height: 24vmax; background: var(--c); top: 40%; left: 55%; opacity: 0.35; animation: drift-c 30s ease-in-out infinite alternate; }

@keyframes drift-a { to { transform: translate(18vmax, 14vmax) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-16vmax, -12vmax) scale(0.9); } }
@keyframes drift-c { to { transform: translate(-22vmax, 10vmax) scale(1.3); } }

/* Grano sutil encima, para que no se vea plano. */
.grain {
  position: fixed; inset: -50%;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.08;
  pointer-events: none;
  animation: grain 1.2s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(2%, 2%); }
}

main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  animation: rise 1.4s cubic-bezier(0.2, 0.7, 0.1, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); } }

.wordmark {
  font-size: clamp(72px, 20vw, 200px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.06em;
  background: linear-gradient(120deg, #ffffff 20%, #c7c9ff 45%, #a5f3fc 60%, #ffffff 80%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 9s linear infinite;
}
@keyframes shine { to { background-position: -250% 0; } }

footer {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--faint);
}

@media (prefers-reduced-motion: reduce) {
  .orb, .grain, .wordmark, .dot, main { animation: none; }
}