Fireflies

<!-- Fireflies -->
<div class="nuda-fireflies" role="img" aria-label="Fireflies">
  <span class="nuda-fireflies__bug" style="left:8%;  top:14%; --d:0s;   --dur:4s"></span>
  <span class="nuda-fireflies__bug" style="left:42%; top:30%; --d:.4s;  --dur:5s"></span>
  <span class="nuda-fireflies__bug" style="left:76%; top:18%; --d:.8s;  --dur:6s"></span>
  <span class="nuda-fireflies__bug" style="left:22%; top:60%; --d:1.2s; --dur:4s"></span>
  <span class="nuda-fireflies__bug" style="left:58%; top:72%; --d:1.6s; --dur:5s"></span>
  <span class="nuda-fireflies__bug" style="left:88%; top:48%; --d:2s;   --dur:6s"></span>
  <span class="nuda-fireflies__bug" style="left:14%; top:36%; --d:2.4s; --dur:4s"></span>
  <span class="nuda-fireflies__bug" style="left:64%; top:10%; --d:2.8s; --dur:5s"></span>
</div>

/* Fireflies
   Glowing dots that pulse and drift slowly inside a soft halo.
   Customize: --ff-color, --ff-size, container size. */

.nuda-fireflies {
  --ff-color: #e4ff54;
  --ff-size: 4px;
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 3 / 2;
  background: radial-gradient(ellipse at center, rgba(228, 255, 84, 0.04), transparent 70%);
  overflow: hidden;
  border-radius: 8px;
}

.nuda-fireflies__bug {
  position: absolute;
  width: var(--ff-size);
  height: var(--ff-size);
  border-radius: 50%;
  background: var(--ff-color);
  box-shadow:
    0 0 6px var(--ff-color),
    0 0 14px rgba(228, 255, 84, 0.4);
  animation:
    nuda-ff-glow var(--dur, 5s) ease-in-out var(--d, 0s) infinite,
    nuda-ff-drift calc(var(--dur, 5s) * 1.5) ease-in-out var(--d, 0s) infinite alternate;
}

@keyframes nuda-ff-glow {
  0%, 100% { opacity: 0.1; transform: scale(0.5); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

@keyframes nuda-ff-drift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(8px, -6px); }
  66%  { transform: translate(-4px, 6px); }
  100% { transform: translate(6px, 4px); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-fireflies__bug { animation: none; opacity: 0.7; }
}