/*
 * Minimal background theme — just lets the starfield canvas show through
 * and adds a gentle trippy nebula drift on top.
 *
 * Does NOT override colors, buttons, cards, nav, or anything else.
 * Each page keeps its own palette. The starfield sits behind. That's it.
 */

/* Make body background transparent so the fixed-position canvas in
 * galactic-stars.js is visible underneath the content. */
html, body {
  background: transparent !important;
  background-color: #000 !important;
}

/* Gentle trippy nebula that slowly breathes over the starfield.
 * Pointer-events none, behind content, fixed so it persists through scroll. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(139, 92, 246, 0.12), transparent 45%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 7, 58, 0.06), transparent 48%),
    radial-gradient(ellipse at 55% 55%, rgba(57, 255, 20, 0.04), transparent 60%);
  animation: nebula-drift 40s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

@keyframes nebula-drift {
  0% {
    transform: translate(0, 0) scale(1);
    filter: hue-rotate(0deg);
  }
  50% {
    transform: translate(-3%, 2%) scale(1.08);
    filter: hue-rotate(25deg);
  }
  100% {
    transform: translate(4%, -3%) scale(1.03);
    filter: hue-rotate(-15deg);
  }
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
  }
}

/* The old mist/tongue decorations fought with the starfield. Hide them. */
.aether-mist,
.tongue-bar {
  display: none !important;
}