/* Star Background */
#stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.star {
  position: absolute;
  border-radius: 50%;
  background-color: #ffffff; /* White by default */
  opacity: 0;
  animation: twinkling 3s infinite;
  box-shadow: 0 0 6px 2px #ffffff; /* soft glow effect */
}


.star.white {
  background-color: #ffffff;
  box-shadow: 0 0 6px 2px #ffffff;
}

.star.purple {
  background-color: #ae81ff;
  box-shadow: 0 0 6px 2px #ae81ff;
}

.star.blue {
  background-color: #4fc3f7;
  box-shadow: 0 0 6px 2px #4fc3f7;
}


@keyframes twinkling {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.star-theme {
  background: radial-gradient(circle at center, #ffffff 0%, #a64aff 70%, transparent 100%);
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  position: absolute;
  opacity: 0.8;
  filter: blur(0.4px);
  animation: twinkling 4s infinite ease-in-out;
}

/* try it */

.stars-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}

#stars-back {
  z-index: 0;
  opacity: 0.3;
  transform: scale(0.8);
  animation: drift 60s linear infinite alternate;
}
#stars-mid {
  z-index: 1;
  opacity: 0.5;
  transform: scale(1);
  animation: drift 45s linear infinite alternate;
}
#stars-front {
  z-index: 2;
  opacity: 0.8;
  transform: scale(1.2);
  animation: drift 30s linear infinite alternate;
}

/* */

.shooting-star {
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: radial-gradient(circle, #f4e6ff 20%, #a64aff, #7a00cc); /* Purple Glow */
  opacity: 1;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 0 8px #a64aff, 0 0 12px #7a00cc;
}

.shooting-star::before {
  content: '';
  position: absolute;
  width: 4rem;
  height: 0.15rem;
  background: linear-gradient(to left, #a64aff, transparent); /* Themed Tail */
  top: 50%;
  left: -4rem;
  transform: translateY(-50%);
  opacity: 0.6;
  filter: blur(2px);
}

/* Particle style */
.star-particle {
  position: absolute;
  width: 0.25rem;
  height: 0.25rem;
  background-color: white;
  border-radius: 50%;
  opacity: 1;
  pointer-events: none;
  animation: particle-fade 1.2s forwards;
  z-index: 4;
}

@keyframes particle-fade {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes shooting-star {
  0% {
    transform: translate(-10vw, -10vh);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(100vw, 100vh);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}