.nav-particles { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0; }
.nav-particles.is-active { animation: particle-pass var(--star-rain-duration) linear; }
.particle-flight { position: absolute; left: 0; top: var(--particle-y); width: 100%; height: var(--particle-size); opacity: 0; }
.particle-flight::before { content: ''; position: absolute; left: 0; top: 0; width: var(--particle-length); height: 100%; border-radius: 100%; background: linear-gradient(90deg, transparent, currentColor); }
.particle-flight::after { content: ''; position: absolute; left: calc(var(--particle-length) - var(--particle-head) / 2); top: calc((var(--particle-size) - var(--particle-head)) / 2); width: var(--particle-head); height: var(--particle-head); border-radius: 50%; background: currentColor; }
.particle-flight.is-bright::after { box-shadow: 0 0 4px currentColor; }
.nav-particles.is-active .particle-flight { animation: particle-flight var(--particle-duration) linear var(--particle-delay) both; }
@keyframes particle-pass { 0%, 100% { opacity: 0; } 6%, 88% { opacity: 1; } }
@keyframes particle-flight {
  0% { opacity: 0; transform: translate(calc(-1 * var(--particle-length) - 8px), 0); }
  7%, 83% { opacity: var(--particle-opacity); }
  100% { opacity: 0; transform: translate(100%, var(--particle-drift)); }
}

/* Keep the existing navigation and its mobile dropdown above the decoration. */
.site-header { isolation: isolate; }
.site-header > .nav-particles { z-index: -1; }
@media (prefers-reduced-motion: reduce) {
  .nav-particles, .nav-particles .particle-flight { animation: none !important; }
  .nav-particles { display: none; }
}