/* ===========================================================================
   Cosmic Background — Galaxy of static stars + occasional shooting stars.

   Two effects only:
   1. A static field of tiny stars (single-point dots) painted across the
      entire viewport. No movement, no falling — just the night sky.
   2. Occasional shooting stars — bright streaks that fly across the
      screen and disappear.

   All decorative. Pointer-events: none. Respects prefers-reduced-motion.
   =========================================================================== */

/* Deep space backdrop — warm-cool radial falloff */
.cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%,   rgba(255, 126, 185, 0.04), transparent 50%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(246, 201, 122, 0.04), transparent 50%),
    radial-gradient(ellipse 70% 50% at 0% 30%,    rgba(56, 189, 248, 0.025), transparent 50%),
    var(--bg-0, #08080c);
}

/* Static star field — JS paints dots into this container */
.cosmic-stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Single star — a single-point dot. Tiny, glowy. No animation. */
.cosmic-star {
  position: absolute;
  display: block;
  width: var(--star-size, 1.5px);
  height: var(--star-size, 1.5px);
  border-radius: 50%;
  background: var(--star-color, #ffffff);
  box-shadow: 0 0 var(--star-glow, 4px) var(--star-color, #ffffff);
  opacity: var(--star-opacity, 0.6);
}

/* ----- Shooting stars ----- */
/* A bright streak that flies across the screen and disappears.
   Two-element pairing: a bright head (dot with halo) + a tapered tail
   (gradient line behind it). Both rotate together. */
.cosmic-shooting-star {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  --shoot-x: 0px;
  --shoot-y: 0px;
  --shoot-angle: 0deg;
  --shoot-length: 120px;
  --shoot-color: rgba(255, 255, 255, 0.9);
  --shoot-glow: rgba(246, 201, 122, 0.7);
}
.cosmic-shooting-star.is-active {
  animation: cosmic-shoot var(--shoot-dur, 1.4s) linear var(--shoot-delay, 0s) infinite;
}

@keyframes cosmic-shoot {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--shoot-angle));
  }
  2% { opacity: 1; }
  60% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(var(--shoot-x), var(--shoot-y), 0) rotate(var(--shoot-angle));
  }
}

/* Default gradient is "tail trails behind head moving right" (to left).
   When shooting leftward the tail needs to point the OTHER way, so flip
   the gradient. We use data-dir on the wrapper to choose. */
.cosmic-shooting-star .shoot-tail {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--shoot-length, 120px);
  height: 1.5px;
  margin-top: -0.75px;
  background: linear-gradient(
    to left,
    var(--shoot-color, rgba(255,255,255,0.9)) 0%,
    var(--shoot-glow, rgba(246,201,122,0.7)) 30%,
    transparent 100%
  );
  filter: blur(0.5px);
  border-radius: 1px;
}
/* Right-to-left shooting: flip the tail gradient so it trails behind. */
.cosmic-shooting-star[data-dir="-1"] .shoot-tail {
  background: linear-gradient(
    to right,
    var(--shoot-color, rgba(255,255,255,0.9)) 0%,
    var(--shoot-glow, rgba(246,201,122,0.7)) 30%,
    transparent 100%
  );
}
.cosmic-shooting-star .shoot-head {
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  margin-left: -1.5px;
  background: var(--shoot-color, rgba(255, 255, 255, 0.95));
  border-radius: 50%;
  box-shadow:
    0 0 6px var(--shoot-glow, rgba(246, 201, 122, 0.9)),
    0 0 14px var(--shoot-glow, rgba(246, 201, 122, 0.6));
}

/* Reduced motion — keep stars (they're static) but disable shooters */
@media (prefers-reduced-motion: reduce) {
  .cosmic-shooting-star { display: none; }
}