/* shared star style */
body::before,
body::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  animation: glowing-stars 3s linear infinite alternate;
}

/* STAR LAYER 1 - dense and spread */
body::before {
  box-shadow:
    50px 80px #fff, 150px 200px #fff, 250px 120px #fff,
    350px 500px #fff, 450px 340px #fff, 550px 90px #fff,
    650px 300px #fff, 750px 450px #fff, 850px 200px #fff,
    950px 600px #fff, 1050px 150px #fff, 1150px 400px #fff,
    1250px 50px #fff, 1350px 500px #fff, 1450px 250px #fff,
    1550px 350px #fff, 1650px 100px #fff, 1750px 550px #fff;
  animation-delay: 0s;
}

/* STAR LAYER 2 - denser, slightly offset for depth */
body::after {
  box-shadow:
    100px 400px #fff, 200px 600px #fff, 300px 50px #fff,
    400px 300px #fff, 500px 150px #fff, 600px 500px #fff,
    700px 250px #fff, 800px 100px #fff, 900px 350px #fff,
    1000px 550px #fff, 1100px 200px #fff, 1200px 450px #fff,
    1300px 90px #fff, 1400px 600px #fff, 1500px 150px #fff,
    1600px 400px #fff, 1700px 50px #fff, 1800px 300px #fff;
  animation-delay: 0.3s;
}

/* BACKGROUND LAYER for extra stars */
body {
  background-color: black;
  background-image:
    radial-gradient(1px 1px at 10% 10%, white, transparent),
    radial-gradient(1px 1px at 20% 30%, white, transparent),
    radial-gradient(1px 1px at 30% 50%, white, transparent),
    radial-gradient(1px 1px at 40% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 20%, white, transparent),
    radial-gradient(1px 1px at 60% 90%, white, transparent),
    radial-gradient(1px 1px at 70% 40%, white, transparent),
    radial-gradient(1px 1px at 80% 60%, white, transparent),
    radial-gradient(1px 1px at 90% 10%, white, transparent),
    radial-gradient(1px 1px at 95% 80%, white, transparent);
  background-repeat: no-repeat;
}

/* STAR ANIMATION */
@keyframes glowing-stars {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}