/* Shooting Stars Animation */

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

/* Static and Sparkling Stars */
.static-stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.static-star {
  position: absolute;
  background: var(--star-color, #fff);
  border-radius: 50%;
  opacity: 0.8;
  filter: drop-shadow(0 0 2px var(--star-color, rgba(255, 255, 255, 0.8)));
}

.static-star--small {
  width: 2px;
  height: 2px;
}

.static-star--medium {
  width: 4px;
  height: 4px;
  filter: drop-shadow(0 0 4px var(--star-color, rgba(255, 255, 255, 0.9)));
}

/* Star Shapes */
.star-type-1 { /* 4-pointed star */
  background: transparent;
}
.star-type-1::before,
.star-type-1::after {
  content: '';
  position: absolute;
  background: var(--star-color, #fff);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.star-type-1::before { width: 100%; height: 25%; }
.star-type-1::after { width: 25%; height: 100%; }

.star-type-2 { /* 4-pointed star rotated */
  background: transparent;
  transform: rotate(45deg);
}
.star-type-2::before,
.star-type-2::after {
  content: '';
  position: absolute;
  background: var(--star-color, #fff);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.star-type-2::before { width: 100%; height: 25%; }
.star-type-2::after { width: 25%; height: 100%; }

.star-type-3 { /* Diamond shape */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.static-star--sparkle {
  animation: twinkle var(--sparkle-speed, 2s) infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

.star {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 4px;
  background: var(--star-color, #fff);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 10px var(--star-color, rgba(255, 255, 255, 1)));
  animation: star-animation 3s linear infinite;
  opacity: 0;
}

.star::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: var(--trail-length, 400px);
  height: 3px;
  background: linear-gradient(90deg, var(--star-color, #fff), transparent);
  filter: drop-shadow(0 0 5px var(--star-color, rgba(255, 255, 255, 0.5)));
  clip-path: none;
}

@keyframes star-animation {
  0% {
    transform: rotate(315deg) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: rotate(315deg) translateX(-2500px);
    opacity: 0;
  }
}