Plasma Orbs

<!-- Plasma Orbs -->
<div class="nuda-pt2-plasma-orbs" role="img" aria-label="Pulsing plasma orbs">
  <span class="nuda-pt2-plasma-orbs__orb" style="left:25%; top:35%; --s:46px; --d:0s"></span>
  <span class="nuda-pt2-plasma-orbs__orb" style="left:68%; top:55%; --s:60px; --d:.6s"></span>
  <span class="nuda-pt2-plasma-orbs__orb" style="left:45%; top:75%; --s:34px; --d:1.2s"></span>
</div>

.nuda-pt2-plasma-orbs {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: #09090b;
}

.nuda-pt2-plasma-orbs__orb {
  position: absolute;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#fafafa 0%,#e4ff54 30%,rgba(228,255,84,.25) 60%,transparent 75%);
  filter: blur(2px) saturate(1.3);
  mix-blend-mode: screen;
  animation: _nuda-pt2plasmaorbs 4.8s ease-in-out var(--d) infinite;
}

@keyframes _nuda-pt2plasmaorbs {
  0%,100% {
    transform: scale(.85);
    opacity: .6;
    filter: blur(2px) saturate(1.3) hue-rotate(0deg);
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
    filter: blur(3px) saturate(1.6) hue-rotate(20deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-pt2-plasma-orbs__orb {
    animation: none !important;
    opacity: .85;
    transform: scale(1);
  }
}