<button class="pp-eq" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <span class="pp-eq-bars" aria-hidden="true"> <span></span><span></span><span></span> </span>
</button>

.pp-eq {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.3);
  color: #2dd4bf;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
}
.pp-eq:hover {
  background: rgba(20, 184, 166, 0.16);
  border-color: rgba(20, 184, 166, 0.5);
  transform: translateY(-1px);
}
.pp-eq:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.4);
  outline-offset: 3px;
}
.pp-eq-bars {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
}
.pp-eq-bars > span {
  width: 4px;
  height: 100%;
  background: currentColor;
  border-radius: 2px;
  transform: scaleY(0.3);
  transform-origin: center;
}
.pp-eq[aria-pressed="false"] .pp-eq-bars > span:nth-child(1) {
  transform: scaleY(0.4);
}
.pp-eq[aria-pressed="false"] .pp-eq-bars > span:nth-child(2) {
  transform: scaleY(0.7);
}
.pp-eq[aria-pressed="false"] .pp-eq-bars > span:nth-child(3) {
  transform: scaleY(0.5);
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span {
  animation: ppEqDance 0.9s ease-in-out infinite;
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span:nth-child(1) {
  animation-delay: 0s;
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span:nth-child(2) {
  animation-delay: 0.2s;
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes ppEqDance {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-eq,
  .pp-eq * {
    animation: none !important;
  }
}

// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});