/* ============================================================
   Starfield — fixed space backdrop for the whole page.
   Stars + shooting stars are generated by starfield.js and
   injected into #starfield. This file only defines look/motion.
   ============================================================ */

#starfield {
  position: fixed;
  inset: 0;
  /* Negative z-index keeps this behind ALL normal-flow content
     (nav, footer, sections) automatically — no need to add
     position/z-index overrides to every section that should
     sit above it. A z-index of 0 here previously painted above
     non-positioned elements like the footer, hiding it. */
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 0%, #0B111C 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, #0A1712 0%, transparent 55%),
    var(--bg-void);
}

/* Individual star, positioned inline via --x / --y / --size / --delay */
.star {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #FFFFFF;
  opacity: var(--base-opacity, 0.6);
  animation: star-twinkle var(--duration, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: opacity, transform;
}

.star.star--bright {
  box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.5);
}

@keyframes star-twinkle {
  0%, 100% { opacity: var(--base-opacity, 0.6); transform: scale(1); }
  50%      { opacity: calc(var(--base-opacity, 0.6) * 0.25); transform: scale(0.85); }
}

/* Shooting star — a short bright head with a fading tail,
   travelling on a diagonal, then removed by JS after it runs. */
.shooting-star {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 2px;
  height: 2px;
  background: transparent;
  animation: shoot var(--travel-duration, 1.1s) linear forwards;
}

.shooting-star::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  transform-origin: left center;
  transform: rotate(var(--angle, 32deg));
}

@keyframes shoot {
  0%   { opacity: 0; transform: translate(0, 0); }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(var(--travel-x, 420px), var(--travel-y, 260px));
  }
}

/* Respect reduced motion: stars stay static and visible, no shooting stars */
@media (prefers-reduced-motion: reduce) {
  .star {
    animation: none;
    opacity: var(--base-opacity, 0.6);
  }
  .shooting-star {
    display: none;
  }
}