/* ---- Aurora canvas ---- */
.aurora-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---- CSS gradient overlay ---- */
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
        ellipse 80% 50% at 20% 60%,
        hsla(var(--hue-1), 80%, 40%, 0.08),
        transparent 70%
      ),
    radial-gradient(
      ellipse 60% 70% at 80% 30%,
      hsla(var(--hue-2), 70%, 40%, 0.06),
      transparent 70%
    );
  animation: bg-shift 20s ease-in-out infinite alternate;
}

@keyframes bg-shift {
  0% {
    --hue-1: 38;
    --hue-2: 200;
  }
  50% {
    --hue-1: 25;
    --hue-2: 210;
  }
  100% {
    --hue-1: 45;
    --hue-2: 190;
  }
}

/* ---- Ensure content is above ---- */
.nav,
.section,
.footer {
  position: relative;
  z-index: 1;
}