/* Dynamic decorative stars */
.map-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  box-shadow:
    0 0 5px 1px rgba(255, 255, 255, 0.9),
    0 0 12px 3px rgba(255, 221, 125, 0.55);
  animation: star-twinkle var(--star-duration, 4s) ease-in-out forwards;
}

.map-star::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: inherit;
  filter: blur(2px);
  opacity: 0.8;
}

.map-star--large {
  width: 4px;
  height: 4px;
}

@keyframes star-twinkle {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }

  20% {
    opacity: var(--star-opacity, 0.85);
    transform: scale(1);
  }

  65% {
    opacity: var(--star-opacity, 0.85);
    transform: scale(1.15);
  }

  100% {
    opacity: 0;
    transform: scale(0.35);
  }
}

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

/************************** SHOOTING STARS **************************/

/* Viewport-sized layer over the page content, below the sticky nav (60) and the
   lightbox (200). stars.js creates it and fills it with .shooting-star. */
.shooting-sky {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
}

/* Gold rather than white: most of the page is cream or pale sky, where a white
   glow disappears. The white-hot head still reads on the night section. */
.shooting-star {
  position: absolute;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 3px 1px rgba(255, 255, 255, 0.95),
    0 0 10px 3px rgba(240, 178, 40, 0.9),
    0 0 24px 7px rgba(232, 162, 14, 0.45);
  opacity: 0;
  will-change: transform, opacity;
  animation: shooting-star-flight var(--star-duration, 2s) linear forwards;
}

/* The tail starts at the star and extends backward, opposite to movement. */
.shooting-star::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--star-tail, 160px);
  height: 2px;
  transform: translate(-100%, -50%) rotate(var(--star-angle));
  transform-origin: right center;
  border-radius: 999px;
  background: linear-gradient(to right, rgba(232, 162, 14, 0), rgba(232, 162, 14, 0.5) 40%, rgba(236, 170, 30, 0.95) 85%, rgba(255, 250, 235, 1) 100%);
  filter: blur(0.35px);
}

@keyframes shooting-star-flight {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  6% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(var(--star-dx), var(--star-dy), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shooting-sky {
    display: none !important;
  }
}