/* ═══════════════════════════════════════════
   background.css — canvas, overlays, stars
═══════════════════════════════════════════ */

/* ── Canvas (rendered by JS) ── */
#stars-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
}

/* ── Nebula / gradient overlay ── */
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-nebula);
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 60% at 30% 60%,  rgba(60,  30, 120, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 10% 80%,  rgba(20,  40, 120, 0.30) 0%, transparent 60%),
    linear-gradient(180deg, rgba(5, 10, 30, 0.10) 0%, rgba(10, 5, 30, 0.50) 100%);
}

/* ── Shooting stars ── */
.shooting-star {
  position: fixed;
  left: var(--left);
  top: -120px;
  width: 2px;
  height: var(--h, 80px);
  z-index: var(--z-stars);
  pointer-events: none;
  border-radius: 2px;
  transform-origin: top center;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.92)
  );
  animation: shoot var(--dur, 3s) var(--delay, 0s) linear infinite;
}

@keyframes shoot {
  0%   { opacity: 0; transform: translateY(-100px) rotate(145deg); }
  5%   { opacity: 1; }
  80%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(110vh)  rotate(145deg); }
}

/* ── Cursor glow ── */
.cursor-glow {
  position: fixed;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-stars);
  transform: translate(-50%, -50%);
  transition: left 0.08s linear, top 0.08s linear;
  background: radial-gradient(
    circle,
    rgba(120, 60, 220, 0.10) 0%,
    transparent 70%
  );
}