/* ==========================================================================
   background.css — Background layers: nebula, stars, orbitals
   Mobile-first. Base = 320px.
   ========================================================================== */

/* ---------- Layer z-ordering ---------- */
.bg-nebula {
  z-index: var(--z-bg, -10);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 115dvh; /* Match canvas 115% for parallax */
  overflow: visible;
  pointer-events: none;
}

.bg-stars {
  z-index: var(--z-stars, -5);
}

.bg-orbitals {
  z-index: var(--z-orbitals, -3);
}

/* ---------- Nebula canvas ---------- */
#nebula-canvas {
  position: absolute;
  top: 0;
  left: 0;
  /* Width/height set by JS; 115% height for parallax */
  filter: brightness(1.1);
}

/* ---------- Star field SVG layers ----------
   Three parallax depth layers inside .bg-stars.
   Stars start invisible; intro.js fades them in. */

.stars-distant circle,
.stars-mid circle,
.stars-near circle {
  opacity: 0;
}

.stars-distant circle {
  fill: rgba(255, 255, 255, 0.4);
}

.stars-mid circle {
  fill: rgba(255, 255, 255, 0.6);
}

.stars-near .star-bright {
  fill: rgba(255, 255, 255, 0.85);
}

/* ---------- Mobile: larger background stars, fewer nearby ---------- */
@media (pointer: coarse) {
  /* Enlarge distant and mid stars by 40% */
  .stars-distant circle,
  .stars-mid circle {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.4);
  }

  /* Hide half the nearby stars on mobile (SVG uses visibility) */
  .stars-near .star-bright:nth-child(2n) {
    visibility: hidden;
  }
}

/* Proximity rings: hidden by default (JS controls visibility on desktop hover) */
.stars-near .proximity-ring {
  opacity: 0;
  pointer-events: none;
}

/* Desktop only: apply glow filter to near stars */
@media (min-width: 768px) {
  .stars-near {
    filter: url(#star-glow-strong);
  }
}

/* ---------- Orbital ellipses ----------
   Start hidden (opacity:0, scale:0.9); intro.js reveals them. */

.orbital {
  opacity: 0;
  transform-origin: center center;
  transform: scale(0.9);
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 0.5;
}

/* ---------- Meteors (inside .bg-stars SVG) ---------- */
.meteor {
  opacity: 0;
  will-change: stroke-dashoffset, opacity;
}

/* ---------- Star proximity glow ---------- */
.star-hover {
  /* Glow effect only — preserves spectral fill colors from HTML */
  transition: filter 0.2s ease;
}

.star-outline {
  stroke: var(--accent);
  stroke-width: 0.5;
  stroke-opacity: 0.8;
}

/* ---------- Responsive: tablet ---------- */
@media (min-width: 768px) {
  .bg-nebula {
    height: 100dvh;
  }
}

/* ---------- Responsive: desktop ---------- */
@media (min-width: 1024px) {
  .orbital {
    stroke-width: 0.5;
  }
}