body::after {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.95) 0 1px, transparent 1.6px),
    radial-gradient(circle at 27% 72%, rgba(255,255,255,.78) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 35% 38%, rgba(255,255,255,.92) 0 1.4px, transparent 2px),
    radial-gradient(circle at 49% 14%, rgba(255,255,255,.72) 0 1px, transparent 1.7px),
    radial-gradient(circle at 58% 58%, rgba(255,255,255,.88) 0 1.5px, transparent 2.1px),
    radial-gradient(circle at 66% 28%, rgba(255,255,255,.68) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 79% 76%, rgba(255,255,255,.85) 0 1.2px, transparent 2px),
    radial-gradient(circle at 88% 24%, rgba(255,255,255,.92) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 93% 62%, rgba(255,255,255,.7) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 18% 86%, rgba(255,255,255,.84) 0 1.3px, transparent 2px),
    radial-gradient(circle at 72% 9%, rgba(255,255,255,.58) 0 1px, transparent 1.7px),
    radial-gradient(circle at 6% 54%, rgba(255,255,255,.75) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 24% 44%, rgba(255,255,255,.48) 0 1px, transparent 1.6px),
    radial-gradient(circle at 54% 82%, rgba(255,255,255,.42) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 83% 48%, rgba(255,255,255,.4) 0 1px, transparent 1.7px),
    radial-gradient(circle at 96% 12%, rgba(255,255,255,.46) 0 1.1px, transparent 1.8px);
  background-size: 100% 100%;
  opacity: .72;
  z-index: -1;
  pointer-events: none;
  transform-origin: center;
  animation: starShimmer 8.5s ease-in-out infinite alternate;
}

.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 9% 22%, rgba(255,255,255,.85) 0 1px, transparent 1.6px),
    radial-gradient(circle at 22% 61%, rgba(255,255,255,.78) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 31% 12%, rgba(255,255,255,.62) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 47% 33%, rgba(255,255,255,.88) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 63% 68%, rgba(255,255,255,.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 77% 18%, rgba(255,255,255,.92) 0 1.3px, transparent 2px),
    radial-gradient(circle at 86% 51%, rgba(255,255,255,.58) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 94% 79%, rgba(255,255,255,.84) 0 1.1px, transparent 1.7px);
  opacity: 1;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
  animation: starShimmer 8.5s ease-in-out infinite alternate-reverse;
}

@keyframes starShimmer {
  0% {
    opacity: .5;
    transform: scale(1) translate3d(0, 0, 0);
    filter: brightness(1.05);
  }
  45% {
    opacity: .82;
    transform: scale(1.015) translate3d(0, -0.35%, 0);
    filter: brightness(1.28);
  }
  100% {
    opacity: .62;
    transform: scale(.995) translate3d(0, 0.25%, 0);
    filter: brightness(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .hero::before {
    animation: none;
  }
}