/* Starfield — first paint */
.stars-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero > .stars-wrap {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  contain: strict;
}

.stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.94;
  backface-visibility: hidden;
  contain: strict;
  background-image:
    radial-gradient(3px 3px at 5% 12%, rgba(255, 255, 255, 0.98), transparent),
    radial-gradient(2.5px 2.5px at 13% 36%, rgba(200, 220, 255, 0.9), transparent),
    radial-gradient(2px 2px at 21% 70%, rgba(255, 255, 255, 0.82), transparent),
    radial-gradient(1.5px 1.5px at 30% 20%, rgba(110, 196, 255, 0.95), transparent),
    radial-gradient(3px 3px at 38% 54%, rgba(180, 160, 255, 0.72), transparent),
    radial-gradient(1px 1px at 46% 7%, rgba(255, 255, 255, 0.88), transparent),
    radial-gradient(2px 2px at 53% 86%, rgba(94, 176, 232, 0.88), transparent),
    radial-gradient(0.75px 0.75px at 61% 32%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2.5px 2.5px at 70% 62%, rgba(255, 255, 255, 0.94), transparent),
    radial-gradient(1.25px 1.25px at 77% 16%, rgba(200, 220, 255, 0.84), transparent),
    radial-gradient(2px 2px at 85% 46%, rgba(110, 196, 255, 0.9), transparent),
    radial-gradient(0.5px 0.5px at 92% 76%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 3% 50%, rgba(160, 220, 255, 0.78), transparent),
    radial-gradient(2px 2px at 17% 90%, rgba(110, 196, 255, 0.82), transparent),
    radial-gradient(1px 1px at 57% 40%, rgba(255, 255, 255, 0.72), transparent),
    radial-gradient(3px 3px at 87% 5%, rgba(255, 255, 255, 0.92), transparent),
    radial-gradient(0.5px 0.5px at 10% 58%, rgba(180, 160, 255, 0.62), transparent),
    radial-gradient(1.5px 1.5px at 26% 8%, rgba(160, 220, 255, 0.8), transparent),
    radial-gradient(1px 1px at 42% 89%, rgba(255, 255, 255, 0.64), transparent),
    radial-gradient(2px 2px at 66% 10%, rgba(110, 196, 255, 0.84), transparent),
    radial-gradient(0.75px 0.75px at 80% 51%, rgba(255, 255, 255, 0.66), transparent),
    radial-gradient(1.25px 1.25px at 96% 22%, rgba(200, 220, 255, 0.74), transparent),
    radial-gradient(1px 1px at 7% 82%, rgba(94, 176, 232, 0.76), transparent),
    radial-gradient(1.5px 1.5px at 34% 65%, rgba(255, 255, 255, 0.68), transparent),
    radial-gradient(0.5px 0.5px at 72% 37%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(2px 2px at 15% 26%, rgba(200, 220, 255, 0.7), transparent),
    radial-gradient(1px 1px at 51% 74%, rgba(255, 255, 255, 0.58), transparent),
    radial-gradient(1.5px 1.5px at 83% 30%, rgba(110, 196, 255, 0.62), transparent),
    radial-gradient(2.5px 2.5px at 44% 44%, rgba(255, 255, 255, 0.88), transparent),
    radial-gradient(0.75px 0.75px at 63% 58%, rgba(180, 160, 255, 0.58), transparent);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.stars::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.62;
  background-image:
    radial-gradient(2px 2px at 2% 18%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(0.5px 0.5px at 16% 45%, rgba(110, 196, 255, 0.52), transparent),
    radial-gradient(1px 1px at 23% 81%, rgba(255, 255, 255, 0.48), transparent),
    radial-gradient(1.5px 1.5px at 32% 29%, rgba(200, 220, 255, 0.5), transparent),
    radial-gradient(0.75px 0.75px at 40% 67%, rgba(255, 255, 255, 0.46), transparent),
    radial-gradient(1px 1px at 48% 15%, rgba(94, 176, 232, 0.46), transparent),
    radial-gradient(2px 2px at 55% 52%, rgba(255, 255, 255, 0.44), transparent),
    radial-gradient(0.5px 0.5px at 62% 84%, rgba(160, 220, 255, 0.48), transparent),
    radial-gradient(1.25px 1.25px at 68% 24%, rgba(255, 255, 255, 0.42), transparent),
    radial-gradient(1px 1px at 75% 69%, rgba(110, 196, 255, 0.44), transparent),
    radial-gradient(0.75px 0.75px at 83% 39%, rgba(180, 160, 255, 0.46), transparent),
    radial-gradient(1.5px 1.5px at 90% 11%, rgba(200, 220, 255, 0.4), transparent),
    radial-gradient(0.5px 0.5px at 94% 64%, rgba(255, 255, 255, 0.38), transparent),
    radial-gradient(1px 1px at 11% 72%, rgba(110, 196, 255, 0.44), transparent),
    radial-gradient(1.25px 1.25px at 50% 3%, rgba(255, 255, 255, 0.42), transparent),
    radial-gradient(2px 2px at 28% 55%, rgba(94, 176, 232, 0.4), transparent),
    radial-gradient(0.5px 0.5px at 59% 78%, rgba(255, 255, 255, 0.36), transparent),
    radial-gradient(1px 1px at 37% 93%, rgba(160, 220, 255, 0.42), transparent);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.stars::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.38;
  background-image:
    radial-gradient(0.5px 0.5px at 9% 33%, rgba(255, 255, 255, 0.42), transparent),
    radial-gradient(1px 1px at 19% 63%, rgba(200, 220, 255, 0.38), transparent),
    radial-gradient(0.75px 0.75px at 36% 48%, rgba(110, 196, 255, 0.4), transparent),
    radial-gradient(0.5px 0.5px at 45% 12%, rgba(255, 255, 255, 0.34), transparent),
    radial-gradient(1.25px 1.25px at 64% 73%, rgba(180, 160, 255, 0.36), transparent),
    radial-gradient(0.5px 0.5px at 74% 28%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(1px 1px at 88% 57%, rgba(94, 176, 232, 0.36), transparent),
    radial-gradient(0.75px 0.75px at 6% 95%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(0.5px 0.5px at 54% 36%, rgba(160, 220, 255, 0.34), transparent),
    radial-gradient(1px 1px at 79% 88%, rgba(255, 255, 255, 0.32), transparent);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}