/* ==========================================
   STARS SECTION
   ========================================== */

.sky {
  position: relative;
  width: 100vw;
  height: 100vh;
  /*background: #020208;*/
  overflow: hidden;
}

.layer-1 {
  animation-duration: 5s;
  animation-delay: 5s;
  transform: rotate(0deg);
}

.layer-2 {
  animation-duration: 10s;
  animation-delay: 10s;
  transform: rotate(90deg) scale(1.1); /* Flips layout coordinates */
}

.layer-3 {
  animation-duration: 15s;
  animation-delay: 15s;
  transform: rotate(180deg);
}

.layer-4 {
  animation-duration: 20s;
  animation-delay: 20s;
  transform: rotate(270deg) scale(0.9);
}

@keyframes cosmic-twinkle {
  0% {
    opacity: 0.25;
    filter: brightness(0.7);
  }
  25% {
    opacity: 0.85;
    filter: brightness(1.2);
  }
  50% {
    opacity: 0.35;
    filter: brightness(0.8);
  }
  75% {
    opacity: 1;
    filter: brightness(1.8);
  }
  100% {
    opacity: 0.95;
    filter: brightness(0.5);
  }
}

.stars {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-size: 100% 100%;
  animation-name: cosmic-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;

  background-image: 
    radial-gradient(2px 2px at 20% 30%, rgba(243, 238, 252, 0.5) 50%, transparent 50%),
    radial-gradient(2px 2px at 65% 15%, rgba(75, 227, 201, 0.6) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 85% 55%, rgba(255, 201, 74, 0.5) 50%, transparent 50%),
    radial-gradient(2px 2px at 40% 80%, rgba(243, 238, 252, 0.4) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 10% 65%, rgba(255, 111, 163, 0.5) 50%, transparent 50%),
    radial-gradient(2px 2px at 92% 85%, rgba(75, 227, 201, 0.4) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 55% 45%, rgba(243, 238, 252, 0.35) 50%, transparent 50%),
    radial-gradient(2.5px 2.5px at 15% 10%, rgba(243, 238, 252, 0.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 5% 40%, rgba(255, 201, 74, 0.4) 50%, transparent 50%),
    radial-gradient(2px 2px at 35% 20%, rgba(75, 227, 201, 0.5) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 45% 5%, rgba(255, 111, 163, 0.6) 50%, transparent 50%),
    radial-gradient(2px 2px at 50% 30%, rgba(243, 238, 252, 0.5) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 75% 8%, rgba(255, 201, 74, 0.5) 50%, transparent 50%),
    radial-gradient(2px 2px at 90% 25%, rgba(75, 227, 201, 0.4) 50%, transparent 50%),
    radial-gradient(1px 1px at 98% 50%, rgba(243, 238, 252, 0.6) 50%, transparent 50%),
    radial-gradient(2.5px 2.5px at 80% 35%, rgba(255, 111, 163, 0.5) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 50%, rgba(255, 201, 74, 0.4) 50%, transparent 50%),
    radial-gradient(2px 2px at 60% 65%, rgba(243, 238, 252, 0.5) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 45% 55%, rgba(75, 227, 201, 0.6) 50%, transparent 50%),
    radial-gradient(2px 2px at 30% 45%, rgba(255, 111, 163, 0.4) 50%, transparent 50%),
    radial-gradient(1px 1px at 25% 60%, rgba(255, 201, 74, 0.5) 50%, transparent 50%),
    radial-gradient(2.5px 2.5px at 3% 85%, rgba(243, 238, 252, 0.6) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 18% 95%, rgba(75, 227, 201, 0.5) 50%, transparent 50%),
    radial-gradient(2px 2px at 32% 75%, rgba(255, 111, 163, 0.6) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 52% 92%, rgba(255, 201, 74, 0.4) 50%, transparent 50%),
    radial-gradient(2px 2px at 68% 80%, rgba(243, 238, 252, 0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 82% 95%, rgba(75, 227, 201, 0.5) 50%, transparent 50%),
    radial-gradient(2px 2px at 78% 70%, rgba(255, 111, 163, 0.4) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 95% 70%, rgba(255, 201, 74, 0.6) 50%, transparent 50%),
    radial-gradient(2px 2px at 12% 22%, rgba(243, 238, 252, 0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 28% 5%, rgba(75, 227, 201, 0.4) 50%, transparent 50%),
    radial-gradient(2.5px 2.5px at 88% 5%, rgba(255, 111, 163, 0.5) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 62% 28%, rgba(255, 201, 74, 0.5) 50%, transparent 50%),
    radial-gradient(2px 2px at 40% 38%, rgba(243, 238, 252, 0.4) 50%, transparent 50%),
    radial-gradient(1px 1px at 58% 12%, rgba(75, 227, 201, 0.6) 50%, transparent 50%),
    radial-gradient(2px 2px at 88% 42%, rgba(255, 111, 163, 0.5) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 48% 70%, rgba(255, 201, 74, 0.4) 50%, transparent 50%),
    radial-gradient(1px 1px at 2% 15%, rgba(243, 238, 252, 0.5) 50%, transparent 50%);
}