/* ══════════════════════════════════════
   Stars Background Canvas — Vanilla JS
   Theme-aware: dark = white stars, light = teal/amber stars
   ══════════════════════════════════════ */

#stars-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* z-index: -1 keeps canvas naturally behind everything
     without touching any other element's positioning */
  z-index: -1;
}

/* ══════════════════════════════════════
   Animated Dots / Light Theme Background Canvas
   Light-theme only — soft, elegant falling dots
   ══════════════════════════════════════ */

#animated-dots-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  display: none; /* hidden in dark mode (default) */
  background: linear-gradient(180deg, #e4e9f0 0%, #edf2f7 45%, #dfe6ee 100%);
}

/* Light theme: show animated dots canvas, hide dark stars */
.light-theme #animated-dots-canvas,
body.light-theme #animated-dots-canvas {
  display: block;
}

html.light-theme {
  background-color: #e4e9f0 !important;
}

body.light-theme {
  background: transparent !important;
  background-color: transparent !important;
}

.light-theme #stars-canvas,
body.light-theme #stars-canvas {
  display: none !important;
}