:root {
  --sky-abyss: #02080e;
  --sky-deep: #040e16;
  --sky-mid: #0a1c2c;
  --sky-lift: #123248;
  --aurora-teal: #2dd4bf;
  --aurora-cyan: #67e8f9;
  --aurora-mint: #a7f3d0;
  --aurora-ice: #ecfeff;
  --aurora-ribbon: #14b8a6;
  --glow-soft: rgba(45, 212, 191, 0.4);
  --glow-strong: rgba(103, 232, 249, 0.55);
  --glow-edge: rgba(167, 243, 208, 0.35);
  --text: #eefbf8;
  --text-muted: #9ab5b1;
  --text-dim: #6a807c;
  --surface: rgba(8, 24, 36, 0.55);
  --surface-glass: rgba(10, 30, 44, 0.42);
  --surface-solid: #0c2030;
  --line: rgba(103, 232, 249, 0.22);
  --line-strong: rgba(45, 212, 191, 0.45);
  --danger: #f87171;
  --gold: #fbbf24;
  --font-sans: "Outfit", "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --radius: 16px;
  --radius-lg: 22px;
  --max: 1120px;
  --nav-h: 74px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --glass-blur: 18px;
}

body {
  font-family: var(--font-sans);
  background: var(--sky-abyss);
  color: var(--text);
  line-height: 1.65;
  min-height: 100vh;
  font-weight: 400;
  letter-spacing: 0.01em;
}

body.age-gate-locked {
  overflow: hidden;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}

/* Deep night sky base */
#app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 100% 70% at 50% -10%, rgba(18, 50, 72, 0.55), transparent 55%),
    radial-gradient(ellipse 55% 40% at 10% 30%, rgba(20, 184, 166, 0.1), transparent 60%),
    radial-gradient(ellipse 50% 35% at 90% 20%, rgba(103, 232, 249, 0.08), transparent 55%),
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(6, 24, 36, 0.9), transparent 55%),
    linear-gradient(180deg, #010609 0%, var(--sky-deep) 35%, #06141e 70%, #02080e 100%);
}

/* Primary aurora ribbons */
#app::after {
  content: "";
  position: fixed;
  inset: -10% -5%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 22% at 22% 16%, rgba(45, 212, 191, 0.38), transparent 72%),
    radial-gradient(ellipse 38% 18% at 68% 22%, rgba(103, 232, 249, 0.28), transparent 70%),
    radial-gradient(ellipse 50% 24% at 48% 10%, rgba(167, 243, 208, 0.16), transparent 75%),
    radial-gradient(ellipse 35% 28% at 78% 45%, rgba(20, 184, 166, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 20% at 30% 55%, rgba(103, 232, 249, 0.1), transparent 72%);
  animation: aurora-drift 12s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  opacity: 0.9;
  filter: blur(2px);
}

/* Secondary ribbon layer (extra atmospheric motion) */
.aurora-veil {
  pointer-events: none;
}

@keyframes aurora-drift {
  0% {
    transform: translate3d(-3%, -2%, 0) scale(1) rotate(-1deg);
    opacity: 0.72;
  }
  40% {
    transform: translate3d(2.5%, 1%, 0) scale(1.06) rotate(0.5deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(1.5%, -2.5%, 0) scale(1.03) rotate(1deg);
    opacity: 0.82;
  }
}

@keyframes aurora-shimmer {
  0%,
  100% {
    opacity: 0.35;
    transform: translateX(-4%) skewX(-4deg);
  }
  50% {
    opacity: 0.7;
    transform: translateX(4%) skewX(2deg);
  }
}

@keyframes soft-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes cta-shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 24px var(--glow-soft), 0 0 2px var(--glow-edge);
  }
  50% {
    box-shadow: 0 0 40px var(--glow-strong), 0 0 12px var(--glow-edge);
  }
}

.font-display {
  font-family: var(--font-display);
}

.muted {
  color: var(--text-muted);
}

.dim {
  color: var(--text-dim);
}

/* Shared glass panel utility */
.glass {
  background: var(--surface-glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow:
    inset 0 1px 0 rgba(236, 254, 255, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.35);
}