Bounce Letters beta

/* KATA Bounce Letters — KATAYABURI. A headline with springs. */
.k-bnc{font-family:var(--k-font);cursor:pointer}
.k-bnc .ch{display:inline-block;transition:transform .34s cubic-bezier(.3,2.3,.4,1)}
.k-bnc .ch:hover{transform:translateY(-11px)}
.k-bnc.waving .ch{transform:translateY(-12px)}
@media (prefers-reduced-motion:reduce){.k-bnc .ch{transition:none}.k-bnc .ch:hover,.k-bnc.waving .ch{transform:none}}

// KATA Bounce Letters — splits the line; the click sends a wave.
document.querySelectorAll('[data-bounce]').forEach(function (el) {
  var text = el.textContent.trim();
  el.setAttribute('aria-label', text);
  el.textContent = '';
  var wrap = document.createElement('span');
  wrap.setAttribute('aria-hidden', 'true');
  text.split('').forEach(function (ch) {
    var s = document.createElement('span');
    s.className = 'ch';
    s.textContent = ch === ' ' ? ' ' : ch;
    wrap.appendChild(s);
  });
  el.appendChild(wrap);
  var letters = wrap.querySelectorAll('.ch');
  el.addEventListener('click', function () {
    letters.forEach(function (s, i) { s.style.transitionDelay = (i * 26) + 'ms'; });
    el.classList.add('waving');
    setTimeout(function () {
      el.classList.remove('waving');
      setTimeout(function () { letters.forEach(function (s) { s.style.transitionDelay = ''; }); }, 420);
    }, 340 + letters.length * 26);
  });
});