/* Starry sky background with shooting stars */

:root {
  --sky-bg-top: #0b0f1a;
  --sky-bg-bottom: #000000;
  --star-color: rgba(255, 255, 255, 0.95);
  --star-glow: rgba(255, 255, 255, 0.85);
}

.body, body {
  background: linear-gradient(to bottom, var(--sky-bg-top), var(--sky-bg-bottom));
}

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(1200px 600px at 50% 0%, rgba(20, 26, 34, 0.65), transparent 60%);
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--star-color);
  box-shadow: 0 0 2px var(--star-glow);
  opacity: 0.7;
  animation: twinkle var(--twinkle-dur, 2.8s) ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}

@keyframes twinkle {
  0%, 100% { opacity: var(--base-opacity, 0.5); }
  50% { opacity: 1; }
}

.shootingStarLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.shootingStarContainer {
  position: absolute;
  width: 100%;
  height: 130%;
  transform: rotate(var(--container-rot, 42deg));
}

.shootingStar {
  position: absolute;
  height: 1px;
  background: linear-gradient(-70deg, rgba(255, 235, 235, 1), rgba(0, 0, 0, 1));
  left: var(--shoot-left, 0%);
  top: var(--shoot-top, 0%);
  opacity: var(--shoot-opacity, 0.6);
  animation: shootingFrames var(--shoot-duration, 1500ms) ease-in-out var(--shoot-delay, 0ms) forwards;
}

@keyframes shootingFrames {
  0% { transform: translateX(0); width: 0; }
  30% { width: var(--shoot-length, 200px); }
  100% { width: 0; transform: translateX(var(--shoot-translate, 900px)); }
}

@media (prefers-reduced-motion: reduce) {
  .star { animation: none; }
  .shootingStar { animation: none; }
}