Sparkles beta

/* KATA Sparkles — specks on their own clocks. */
.k-spk{position:relative;font-family:var(--k-font)}
.k-spk-i{position:absolute;border-radius:50%;background:currentColor;animation:k-spk-tw ease-in-out infinite alternate;pointer-events:none}
@keyframes k-spk-tw{from{opacity:.08;transform:scale(.55)}to{opacity:.95;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.k-spk-i{animation:none;opacity:.35}}

// KATA Sparkles — scatters the specks; each twinkles on its own clock.
document.querySelectorAll('[data-sparkles]').forEach(function (stage) {
  var N = 26;
  for (var i = 0; i < N; i++) {
    var s = document.createElement('span');
    s.className = 'k-spk-i';
    s.setAttribute('aria-hidden', 'true');
    var size = 2 + Math.random() * 3.4;
    s.style.width = size.toFixed(1) + 'px';
    s.style.height = size.toFixed(1) + 'px';
    s.style.left = (Math.random() * 98) + '%';
    s.style.top = (Math.random() * 92) + '%';
    s.style.animationDuration = (1.5 + Math.random() * 2.2).toFixed(2) + 's';
    s.style.animationDelay = (-Math.random() * 3).toFixed(2) + 's';
    stage.appendChild(s);
  }
});