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

:root {
  --bg:        #0a0a0f;
  --surface:   #13131a;
  --accent:    #7c3aed;
  --accent-2:  #a78bfa;
  --text:      #e4e4f0;
  --subtext:   #8b8ba7;
  --ring-size: 68px;
  --ring-thickness: 4px;
}

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

/* ── Layout ─────────────────────────────────────────── */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 28px;
  position: relative;
}

/* Ambient glow background */
.container::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Spinner ─────────────────────────────────────────── */
.spinner-ring {
  position: relative;
  width: var(--ring-size);
  height: var(--ring-size);
}

/* Static outer track */
.spinner-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--ring-thickness) solid rgba(124, 58, 237, 0.15);
}

/* Animated arc */
.spinner-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--ring-thickness) solid transparent;
  border-top-color: var(--accent-2);
  border-right-color: var(--accent);
  animation: spin 0.9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  filter: drop-shadow(0 0 8px var(--accent));
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Loading text ────────────────────────────────────── */
.loading-text {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--subtext);
  letter-spacing: 0.04em;
  user-select: none;
}

/* Animated ellipsis */
.dots::after {
  content: '';
  animation: ellipsis 1.6s steps(4, end) infinite;
}

@keyframes ellipsis {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* ── Fade-out on redirect ────────────────────────────── */
body.fading {
  animation: fadeOut 0.35s ease forwards;
}

@keyframes fadeOut {
  to { opacity: 0; }
}