/* Dark "aurora" theme — scoped to features.html only (body.theme-dark-aurora) */

body.theme-dark-aurora {
  --color-bg: #090c16;
  --color-surface: rgba(22, 29, 46, 0.55);
  --color-surface-alt: rgba(28, 36, 56, 0.55);
  --color-border: rgba(255, 255, 255, 0.08);
  --header-bg: rgba(9, 12, 22, 0.6);
  position: relative;
  background-color: var(--color-bg);
  overflow-x: hidden;
}

body.theme-dark-aurora::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(216, 70, 200, 0.42), transparent 70%),
    radial-gradient(circle, rgba(79, 124, 255, 0.4), transparent 70%),
    radial-gradient(circle, rgba(34, 211, 168, 0.32), transparent 70%),
    radial-gradient(circle, rgba(168, 85, 247, 0.36), transparent 70%);
  background-repeat: no-repeat;
  background-size: 55% 55%, 50% 50%, 55% 55%, 60% 60%;
  background-position: 10% 15%, 88% 10%, 15% 88%, 85% 85%;
  filter: blur(60px);
  animation: aurora-float 30s ease-in-out infinite alternate;
  transition: opacity 0.3s ease;
}

@keyframes aurora-float {
  0% {
    background-position: 10% 15%, 88% 10%, 15% 88%, 85% 85%;
  }
  100% {
    background-position: 24% 30%, 74% 24%, 30% 74%, 70% 70%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-dark-aurora::before {
    animation: none;
  }
}

/* Frosted glass surfaces so the aurora glow reads through cards and header */
body.theme-dark-aurora .site-header {
  backdrop-filter: blur(14px);
}

body.theme-dark-aurora .card,
body.theme-dark-aurora .feature-explain-card {
  backdrop-filter: blur(16px);
}

body.theme-dark-aurora .feature-modal-panel {
  backdrop-filter: blur(20px);
}

/* Light preview on this page: body.theme-dark-aurora above hardcodes its own
   dark --color-* vars, which would otherwise beat common.css's
   body.page-light-preview on source order (same specificity). Re-declaring
   the light values here, at higher specificity, lets them win; then we layer
   the aurora-specific glow background on top and switch off the dark blobs. */
body.theme-dark-aurora.page-light-preview {
  --color-bg: #f6f4fc;
  --color-surface: #ffffff;
  --color-surface-alt: #f2effa;
  --color-border: #e3ddf3;
  --color-text: #241f38;
  --color-text-muted: #6c6584;
  --color-primary: #ec2f7d;
  --color-primary-dark: #c2246a;
  --color-accent: #ec2f7d;
  --header-bg: rgba(255, 255, 255, 0.75);
  background:
    radial-gradient(ellipse 620px 420px at 8% 0%, rgba(255, 200, 170, 0.55), transparent 60%),
    radial-gradient(ellipse 700px 520px at 100% 10%, rgba(180, 200, 255, 0.55), transparent 60%),
    radial-gradient(ellipse 640px 480px at 15% 95%, rgba(210, 190, 255, 0.5), transparent 60%),
    radial-gradient(ellipse 620px 460px at 92% 90%, rgba(255, 210, 190, 0.45), transparent 60%),
    var(--color-bg);
}

body.theme-dark-aurora.page-light-preview::before {
  opacity: 0;
}