/* ============================================
   Starfield Background - Dense & Elegant
   ============================================ */

/* Stardust particles container */
.stardust {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Individual star particles (generated by JS) */
.stardust span {
  position: absolute;
  background: white;
  border-radius: 50%;
}

/* Shooting stars container */
.shooting-stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Dynamically generated shooting stars - gradient tail like desmondkao.com */
.shooting-star-dynamic {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
  opacity: 0;
  transform: rotate(var(--angle, -45deg));
  animation: shoot ease-out forwards;
  border-radius: 50%;
}

/* Shooting star animation - natural fade */
@keyframes shoot {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(var(--angle, -45deg));
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, -400px), var(--dy, 400px)) rotate(var(--angle, -45deg));
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .shooting-star-dynamic {
    animation: none !important;
    display: none;
  }
}