body {
  isolation: isolate;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

body::before {
  opacity: 0.42;
  background-image:
    radial-gradient(circle at 7% 16%, rgba(255, 255, 255, 0.82) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 18% 72%, rgba(255, 255, 255, 0.58) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 27% 38%, rgba(255, 255, 255, 0.76) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 35% 87%, rgba(255, 255, 255, 0.48) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 43% 12%, rgba(255, 255, 255, 0.66) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 51% 58%, rgba(255, 255, 255, 0.72) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 62% 27%, rgba(255, 255, 255, 0.5) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 69% 82%, rgba(255, 255, 255, 0.78) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 78% 46%, rgba(255, 255, 255, 0.6) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.74) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 94% 67%, rgba(255, 255, 255, 0.52) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 12% 91%, rgba(255, 255, 255, 0.7) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 57% 94%, rgba(255, 255, 255, 0.58) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 83% 91%, rgba(255, 255, 255, 0.68) 0 0.8px, transparent 1.3px);
  background-repeat: no-repeat;
}

body::after {
  opacity: 0.26;
  background-image:
    radial-gradient(circle at 13% 43%, rgba(255, 255, 255, 0.95) 0 1.2px, rgba(255, 255, 255, 0.24) 1.8px, transparent 4px),
    radial-gradient(circle at 47% 76%, rgba(255, 255, 255, 0.9) 0 1px, rgba(255, 255, 255, 0.2) 1.7px, transparent 3.8px),
    radial-gradient(circle at 74% 19%, rgba(255, 255, 255, 0.92) 0 1.1px, rgba(255, 255, 255, 0.22) 1.8px, transparent 4px),
    radial-gradient(circle at 91% 53%, rgba(255, 255, 255, 0.88) 0 1px, rgba(255, 255, 255, 0.2) 1.6px, transparent 3.6px);
  background-repeat: no-repeat;
  animation: luna-star-twinkle 5.5s ease-in-out infinite alternate;
}

body > main,
body > footer {
  position: relative;
  z-index: 1;
}

@keyframes luna-star-twinkle {
  from { opacity: 0.16; }
  to { opacity: 0.46; }
}

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