.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero > :not(.hero-stars) {
  position: relative;
  z-index: 1;
}

.hero-stars {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-stars i {
  position: absolute;
  display: block;
  width: var(--star-size, 3px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff4bd;
  box-shadow: 0 0 8px 2px rgba(255, 212, 93, .48);
  opacity: .1;
  animation: star-twinkle var(--twinkle-speed, 4s) ease-in-out var(--twinkle-delay, 0s) infinite alternate;
}

.hero-stars i:nth-child(1) { --star-size: 3px; --twinkle-speed: 3.8s; --twinkle-delay: -1s; left: 7%; top: 18%; }
.hero-stars i:nth-child(2) { --star-size: 5px; --twinkle-speed: 5.2s; --twinkle-delay: -3s; left: 18%; top: 72%; }
.hero-stars i:nth-child(3) { --star-size: 2px; --twinkle-speed: 4.4s; --twinkle-delay: -2s; left: 29%; top: 28%; }
.hero-stars i:nth-child(4) { --star-size: 4px; --twinkle-speed: 6s; --twinkle-delay: -4s; left: 38%; top: 84%; }
.hero-stars i:nth-child(5) { --star-size: 2px; --twinkle-speed: 3.4s; --twinkle-delay: -1.8s; left: 48%; top: 13%; }
.hero-stars i:nth-child(6) { --star-size: 5px; --twinkle-speed: 5.6s; --twinkle-delay: -2.6s; left: 58%; top: 76%; }
.hero-stars i:nth-child(7) { --star-size: 3px; --twinkle-speed: 4.8s; --twinkle-delay: -3.5s; left: 67%; top: 22%; }
.hero-stars i:nth-child(8) { --star-size: 2px; --twinkle-speed: 3.6s; --twinkle-delay: -.8s; left: 76%; top: 58%; }
.hero-stars i:nth-child(9) { --star-size: 4px; --twinkle-speed: 5.8s; --twinkle-delay: -4.2s; left: 87%; top: 31%; }
.hero-stars i:nth-child(10) { --star-size: 2px; --twinkle-speed: 4.1s; --twinkle-delay: -2.2s; left: 94%; top: 82%; }
.hero-stars i:nth-child(11) { --star-size: 3px; --twinkle-speed: 6.2s; --twinkle-delay: -5s; left: 13%; top: 44%; }
.hero-stars i:nth-child(12) { --star-size: 4px; --twinkle-speed: 4.6s; --twinkle-delay: -3.1s; left: 82%; top: 91%; }

@keyframes star-twinkle {
  from { opacity: .07; transform: scale(.8); }
  to { opacity: .58; transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stars i { animation: none; opacity: .22; }
}