.site-particles {
  position: fixed;
  z-index: 20;
  inset: 0;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
}

.site-particles i {
  --dust-drift: 8vw;
  --dust-turn: 540deg;
  position: absolute;
  top: -8vh;
  left: 10%;
  width: 5px;
  height: 11px;
  border-radius: 70% 30% 65% 35%;
  opacity: 0;
  background: linear-gradient(145deg, rgba(239, 208, 255, .96), rgba(147, 63, 190, .34));
  box-shadow: 0 0 12px rgba(191, 91, 235, .72);
  animation: site-violet-dust 13s linear infinite;
  will-change: transform, opacity;
}

.site-particles i:nth-child(1) { left: 8%; animation-duration: 14s; animation-delay: -3s; --dust-drift: 7vw; --dust-turn: 620deg; }
.site-particles i:nth-child(2) { left: 21%; width: 3px; height: 7px; animation-duration: 18s; animation-delay: -13s; --dust-drift: -5vw; --dust-turn: -480deg; }
.site-particles i:nth-child(3) { left: 36%; width: 5px; height: 10px; animation-duration: 16s; animation-delay: -7s; --dust-drift: 9vw; --dust-turn: 760deg; }
.site-particles i:nth-child(4) { left: 49%; width: 3px; height: 6px; animation-duration: 20s; animation-delay: -17s; --dust-drift: -8vw; --dust-turn: -680deg; }
.site-particles i:nth-child(5) { left: 62%; animation-duration: 15s; animation-delay: -10s; --dust-drift: 6vw; --dust-turn: 520deg; }
.site-particles i:nth-child(6) { left: 73%; width: 2px; height: 7px; animation-duration: 19s; animation-delay: -5s; --dust-drift: -7vw; --dust-turn: -720deg; }
.site-particles i:nth-child(7) { left: 84%; width: 5px; height: 8px; animation-duration: 17s; animation-delay: -15s; --dust-drift: 5vw; --dust-turn: 580deg; }
.site-particles i:nth-child(8) { left: 94%; width: 3px; height: 9px; animation-duration: 21s; animation-delay: -9s; --dust-drift: -10vw; --dust-turn: -640deg; }
.site-particles i:nth-child(9) { left: 4%; width: 3px; height: 8px; animation-duration: 19s; animation-delay: -16s; --dust-drift: 11vw; --dust-turn: 740deg; }
.site-particles i:nth-child(10) { left: 15%; width: 6px; height: 12px; animation-duration: 16s; animation-delay: -8s; --dust-drift: -6vw; --dust-turn: -560deg; }
.site-particles i:nth-child(11) { left: 29%; width: 4px; height: 9px; animation-duration: 21s; animation-delay: -19s; --dust-drift: 8vw; --dust-turn: 680deg; }
.site-particles i:nth-child(12) { left: 43%; width: 3px; height: 7px; animation-duration: 15s; animation-delay: -11s; --dust-drift: -9vw; --dust-turn: -780deg; }
.site-particles i:nth-child(13) { left: 57%; width: 6px; height: 10px; animation-duration: 18s; animation-delay: -4s; --dust-drift: 7vw; --dust-turn: 590deg; }
.site-particles i:nth-child(14) { left: 68%; width: 3px; height: 9px; animation-duration: 20s; animation-delay: -14s; --dust-drift: -5vw; --dust-turn: -650deg; }
.site-particles i:nth-child(15) { left: 79%; width: 5px; height: 11px; animation-duration: 17s; animation-delay: -6s; --dust-drift: 10vw; --dust-turn: 820deg; }
.site-particles i:nth-child(16) { left: 90%; width: 4px; height: 8px; animation-duration: 22s; animation-delay: -20s; --dust-drift: -8vw; --dust-turn: -710deg; }

@keyframes site-violet-dust {
  0% {
    opacity: 0;
    transform: translate3d(0, -10vh, 0) rotate(0) scale(1);
  }
  12% { opacity: .74; }
  72% { opacity: .46; }
  100% {
    opacity: 0;
    transform: translate3d(var(--dust-drift), 116vh, 0) rotate(var(--dust-turn)) scale(.08);
  }
}

@media (hover: none), (pointer: coarse), (max-width: 720px) {
  .site-particles i:nth-child(even) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-particles { display: none; }
}