.night-sky .shooting-star {
  position: absolute;
  top: 0;
  left: 0;
  width: 8em;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), transparent);
  border-radius: 50%;
  animation: shootingStar 32s ease-in-out infinite;
  opacity: 0;
  transform-origin: left center;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  filter: blur(1.5px);
}

.night-sky .shooting-star:nth-child(1) {
  top: 10%;
  left: 90%;
  transform: rotate(-45deg);
  animation-delay: 0s;
  width: 10em;
  filter: blur(2px);
}

.night-sky .shooting-star:nth-child(2) {
  top: 20%;
  left: 85%;
  transform: rotate(-45deg);
  animation-delay: 4s;
  width: 7em;
  filter: blur(1px);
}

.night-sky .shooting-star:nth-child(3) {
  top: 15%;
  left: 95%;
  transform: rotate(-45deg);
  animation-delay: 8s;
  width: 12em;
  filter: blur(2.5px);
}

.night-sky .shooting-star:nth-child(4) {
  top: 30%;
  left: 92%;
  transform: rotate(-45deg);
  animation-delay: 12s;
  width: 9em;
  filter: blur(1.8px);
}

.night-sky .shooting-star:nth-child(5) {
  top: 25%;
  left: 88%;
  transform: rotate(-45deg);
  animation-delay: 16s;
  width: 6em;
  filter: blur(1.2px);
}

.night-sky .shooting-star:nth-child(6) {
  top: 5%;
  left: 98%;
  transform: rotate(-45deg);
  animation-delay: 20s;
  width: 11em;
  filter: blur(2.2px);
}

.night-sky .shooting-star:nth-child(7) {
  top: 35%;
  left: 87%;
  transform: rotate(-45deg);
  animation-delay: 24s;
  width: 8em;
  filter: blur(1.5px);
}

.night-sky .shooting-star:nth-child(8) {
  top: 40%;
  left: 93%;
  transform: rotate(-45deg);
  animation-delay: 28s;
  width: 10em;
  filter: blur(2px);
}

@keyframes shootingStar {
  0% {
    transform: translateX(0) translateY(0) rotate(-45deg);
    opacity: 0;
  }
  1.5% {
    opacity: 0.3;
  }
  4.5% {
    transform: translateX(-30em) translateY(30em) rotate(-45deg);
    opacity: 0.5;
  }
  7.5% {
    transform: translateX(-100em) translateY(100em) rotate(-45deg);
    opacity: 0.3;
  }
  9% {
    transform: translateX(-150em) translateY(150em) rotate(-45deg);
    opacity: 0;
  }
  100% {
    transform: translateX(-200em) translateY(200em) rotate(-45deg);
    opacity: 0;
  }
}

.night-sky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}

.night-sky::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  box-shadow: 
    220px 118px rgba(255,255,255,0.4), 
    280px 176px rgba(255,255,255,0.3), 
    40px 50px rgba(255,255,255,0.5),
    60px 180px rgba(255,255,255,0.4), 
    120px 130px rgba(255,255,255,0.3), 
    180px 176px rgba(255,255,255,0.5),
    220px 290px rgba(255,255,255,0.4), 
    520px 250px rgba(255,255,255,0.3), 
    400px 220px rgba(255,255,255,0.5),
    50px 350px rgba(255,255,255,0.4), 
    10px 230px rgba(255,255,255,0.3),
    140px 20px rgba(255,255,255,0.4), 
    425px 20px rgba(255,255,255,0.3), 
    70px 120px rgba(255,255,255,0.5),
    20px 130px rgba(255,255,255,0.4), 
    110px 80px rgba(255,255,255,0.3), 
    280px 80px rgba(255,255,255,0.5);
  filter: blur(1px);
  animation: 3s twinkle ease-in-out infinite alternate;
}

.night-sky::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  box-shadow: 
    490px 330px rgba(255,255,255,0.4), 
    420px 300px rgba(255,255,255,0.3), 
    320px 280px rgba(255,255,255,0.5),
    380px 350px rgba(255,255,255,0.4), 
    546px 170px rgba(255,255,255,0.3), 
    420px 180px rgba(255,255,255,0.5),
    370px 150px rgba(255,255,255,0.4), 
    200px 250px rgba(255,255,255,0.3), 
    80px 20px rgba(255,255,255,0.5),
    190px 50px rgba(255,255,255,0.4), 
    270px 20px rgba(255,255,255,0.3),
    120px 230px rgba(255,255,255,0.4), 
    350px 1px rgba(255,255,255,0.3), 
    150px 369px rgba(255,255,255,0.5);
  filter: blur(1px);
  animation: 4s twinkle ease-in-out infinite alternate;
  animation-delay: 1s;
}

@keyframes twinkle {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.8;
  }
}