Pollen Drift

<!-- Pollen Drift -->
<div class="nuda-pt2-pollen-drift" role="img" aria-label="Pollen drifting with depth blur">
  <span class="nuda-pt2-pollen-drift__spore nuda-pt2-pollen-drift__spore--far"  style="left:3%;  top:8%;  --d:0s;   --dur:7s"></span>
  <span class="nuda-pt2-pollen-drift__spore nuda-pt2-pollen-drift__spore--near" style="left:14%; top:37%; --d:.45s; --dur:8s"></span>
  <span class="nuda-pt2-pollen-drift__spore"                                    style="left:25%; top:66%; --d:.9s;  --dur:9s"></span>
  <span class="nuda-pt2-pollen-drift__spore nuda-pt2-pollen-drift__spore--far"  style="left:36%; top:15%; --d:1.35s;--dur:7s"></span>
  <span class="nuda-pt2-pollen-drift__spore nuda-pt2-pollen-drift__spore--near" style="left:47%; top:44%; --d:1.8s; --dur:8s"></span>
  <span class="nuda-pt2-pollen-drift__spore"                                    style="left:58%; top:73%; --d:2.25s;--dur:9s"></span>
  <span class="nuda-pt2-pollen-drift__spore nuda-pt2-pollen-drift__spore--far"  style="left:69%; top:22%; --d:2.7s; --dur:7s"></span>
  <span class="nuda-pt2-pollen-drift__spore nuda-pt2-pollen-drift__spore--near" style="left:80%; top:51%; --d:3.15s;--dur:8s"></span>
  <span class="nuda-pt2-pollen-drift__spore"                                    style="left:91%; top:80%; --d:3.6s; --dur:9s"></span>
  <span class="nuda-pt2-pollen-drift__spore nuda-pt2-pollen-drift__spore--far"  style="left:8%;  top:60%; --d:4.05s;--dur:7s"></span>
</div>

.nuda-pt2-pollen-drift {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 11/8;
  overflow: hidden;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 40%,rgba(228,255,84,.06),transparent 70%),#0e0e0e;
}

.nuda-pt2-pollen-drift__spore {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,#fafafa,#e4ff54 55%,transparent 75%);
  opacity: .55;
  animation: _nuda-pt2pollendrift var(--dur) ease-in-out var(--d) infinite;
}

.nuda-pt2-pollen-drift__spore--far {
  width: 4px;
  height: 4px;
  filter: blur(1.2px);
  opacity: .3;
}

.nuda-pt2-pollen-drift__spore--near {
  width: 10px;
  height: 10px;
  filter: blur(0px);
  opacity: .8;
}

@keyframes _nuda-pt2pollendrift {
  0%,100% {
    transform: translate(0,0);
  }
  25% {
    transform: translate(10px,-8px);
  }
  50% {
    transform: translate(-6px,6px);
  }
  75% {
    transform: translate(8px,10px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-pt2-pollen-drift__spore,.nuda-pt2-pollen-drift__spore--far,.nuda-pt2-pollen-drift__spore--near {
    animation: none !important;
  }
}