.has-dark-particles {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.has-dark-particles > :not(.dark-particles) {
  position: relative;
  z-index: 1;
}

.dark-particles {
  position: absolute;
  z-index: 0;
  inset: -15%;
  pointer-events: none;
  opacity: 1;
  background: none;
  filter: none;
}

.dark-particles::before,
.dark-particles::after {
  display: none;
}

.dark-particles::before {
  opacity: .62;
  background-image: radial-gradient(circle, rgba(116,196,239,.95) 0 1.35px, transparent 1.9px);
  background-position: 46px 38px;
  background-size: 113px 121px;
  filter: drop-shadow(0 0 7px rgba(116,196,239,.8));
  animation: dark-sky-scroll-slow 49s linear infinite,
             dark-stars-twinkle 2.6s ease-in-out infinite alternate;
}

.dark-particles::after {
  opacity: .52;
  background-image: radial-gradient(circle, rgba(225,246,255,.9) 0 .8px, transparent 1.35px);
  background-position: 25px 70px;
  background-size: 91px 104px;
  filter: drop-shadow(0 0 4px rgba(205,235,250,.65));
  animation: dark-sky-scroll-fast 25s linear infinite,
             dark-stars-twinkle 1.9s 1.1s ease-in-out infinite alternate;
}

.dark-star {
  position: absolute;
  left: var(--star-x);
  top: var(--star-y);
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  color: var(--star-color);
  background: radial-gradient(circle, #fff 0 14%, currentColor 28%, transparent 72%);
  opacity: 0;
  filter: drop-shadow(0 0 var(--star-glow) currentColor);
  will-change: transform, opacity, filter;
  animation:
    dark-star-float var(--star-travel) linear var(--star-delay) infinite,
    dark-star-random-twinkle var(--star-pulse) ease-in-out var(--star-twinkle-delay) infinite alternate;
}

@keyframes dark-sky-scroll {
  from { background-position: 8px 12px; }
  to { background-position: 156px -152px; }
}

@keyframes dark-sky-scroll-slow {
  from { background-position: 46px 38px; }
  to { background-position: -180px -204px; }
}

@keyframes dark-sky-scroll-fast {
  from { background-position: 25px 70px; }
  to { background-position: 207px -138px; }
}

@keyframes dark-stars-shimmer {
  from { opacity: .48; filter: drop-shadow(0 0 2px rgba(116,196,239,.35)) brightness(.9); }
  to { opacity: .82; filter: drop-shadow(0 0 7px rgba(116,196,239,.75)) brightness(1.35); }
}

@keyframes dark-stars-twinkle {
  from { opacity: .3; filter: brightness(.85); }
  to { opacity: .8; filter: brightness(1.65); }
}

@keyframes dark-star-float {
  from { transform: translate3d(0, 90px, 0); }
  to { transform: translate3d(var(--star-drift), -150px, 0); }
}

@keyframes dark-star-random-twinkle {
  0%, 12% { opacity: 0; filter: drop-shadow(0 0 0 currentColor) brightness(.7) blur(.3px); }
  34% { opacity: var(--star-max); filter: drop-shadow(0 0 var(--star-glow) currentColor) brightness(1.75) blur(0); }
  54% { opacity: var(--star-mid); filter: drop-shadow(0 0 calc(var(--star-glow) * .45) currentColor) brightness(1.05) blur(.15px); }
  72% { opacity: var(--star-max); filter: drop-shadow(0 0 var(--star-glow) currentColor) brightness(1.5) blur(0); }
  100% { opacity: 0; filter: drop-shadow(0 0 0 currentColor) brightness(.75) blur(.35px); }
}

@media (max-width: 600px) {
  .dark-particles {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dark-particles,
  .dark-particles::before,
  .dark-particles::after,
  .dark-star { animation: none; }
}