/* Starry Sparkle — minimal starfield overlay (no lines)
   Tuned to look good on BOTH dark and light backgrounds.
   Customize via CSS variables on :root or #ssp-stars.
*/

#ssp-stars{
  /* Controls */
  --ssp-z: var(--ssp-z, 0);
  --ssp-opacity: var(--ssp-opacity, 0.90);

  /* Star styling (defaults assume DARK pages) */
  --ssp-star-color: rgba(255,255,255,1);
  --ssp-glow-color: rgba(255,255,255,.55);
  --ssp-blend-mode: screen; /* screen looks great on dark */

  position: fixed;
  inset: 0;
  z-index: var(--ssp-z);
  pointer-events: none;
  opacity: var(--ssp-opacity);
  overflow: hidden;
}

#ssp-stars.ssp-pe{ pointer-events: auto; }

.ssp-star-field{
  position:absolute;
  inset:0;
}

.ssp-star{
  position:absolute;
  width: 1px;
  height: 1px;
  border-radius: 999px;
  background: var(--ssp-star-color);
  /* A tiny glow makes stars visible on mixed backgrounds without looking noisy */
  box-shadow: 0 0 10px 1px var(--ssp-glow-color);
  mix-blend-mode: var(--ssp-blend-mode);
  /* twinkle is optional; JS sets animation only when enabled */
}

/* Light-mode tuning: darker “ink” stars that stay visible on pale pages */
@media (prefers-color-scheme: light){
  #ssp-stars{
    --ssp-opacity: var(--ssp-opacity, 0.45);
    --ssp-star-color: rgba(10,12,18,.85);
    --ssp-glow-color: rgba(10,12,18,.20);
    --ssp-blend-mode: multiply;
  }
  .ssp-star{
    box-shadow: 0 0 8px 0.5px var(--ssp-glow-color);
  }
}

@keyframes ssp_twinkle {
  from { opacity: var(--ssp-lo, .22); }
  to   { opacity: var(--ssp-hi, .92); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ssp-star{ animation: none !important; opacity: .65; }
}