Ember Rise

<!-- Ember Rise -->
<div class="nuda-pt2-ember-rise" role="img" aria-label="Embers rising from a hot surface">
  <span class="nuda-pt2-ember-rise__bed" aria-hidden="true"></span>
  <span class="nuda-pt2-ember-rise__spark" style="left:8%;  --s:3px; --d:0s;    --dur:2.2s; --x:-15px"></span>
  <span class="nuda-pt2-ember-rise__spark" style="left:17%; --s:4px; --d:.35s;  --dur:2.6s; --x:-5px"></span>
  <span class="nuda-pt2-ember-rise__spark" style="left:26%; --s:2px; --d:.7s;   --dur:3s;   --x:5px"></span>
  <span class="nuda-pt2-ember-rise__spark" style="left:35%; --s:3px; --d:1.05s; --dur:2.2s; --x:15px"></span>
  <span class="nuda-pt2-ember-rise__spark" style="left:44%; --s:4px; --d:1.4s;  --dur:2.6s; --x:-15px"></span>
  <span class="nuda-pt2-ember-rise__spark" style="left:53%; --s:2px; --d:1.75s; --dur:3s;   --x:-5px"></span>
  <span class="nuda-pt2-ember-rise__spark" style="left:62%; --s:3px; --d:2.1s;  --dur:2.2s; --x:5px"></span>
  <span class="nuda-pt2-ember-rise__spark" style="left:71%; --s:4px; --d:2.45s; --dur:2.6s; --x:15px"></span>
  <span class="nuda-pt2-ember-rise__spark" style="left:80%; --s:2px; --d:2.8s;  --dur:3s;   --x:-15px"></span>
  <span class="nuda-pt2-ember-rise__spark" style="left:89%; --s:3px; --d:3.15s; --dur:2.2s; --x:-5px"></span>
</div>

.nuda-pt2-ember-rise {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 11/8;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(180deg,#0a0a0a 0%,#161005 100%);
}

.nuda-pt2-ember-rise__bed {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  background: linear-gradient(180deg,rgba(228,255,84,.5),rgba(228,140,20,.15) 60%,transparent);
  filter: blur(2px);
}

.nuda-pt2-ember-rise__spark {
  position: absolute;
  bottom: 14%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #e4ff54;
  box-shadow: 0 0 6px #e4ff54,0 0 12px rgba(228,150,20,.6);
  opacity: 0;
  animation: _nuda-pt2emberrise var(--dur) ease-in var(--d) infinite;
  will-change: transform,opacity;
}

@keyframes _nuda-pt2emberrise {
  0% {
    transform: translate(0,0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  55% {
    background: #ffb545;
  }
  100% {
    transform: translate(var(--x),-95px) scale(.3);
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-pt2-ember-rise__spark {
    animation: none !important;
    opacity: .7;
    bottom: 40%;
  }
}