Play/Pause Morph

<!-- Play/Pause Morph — toggle .is-paused for the play (triangle) state -->
<button class="nuda-pp" type="button" aria-label="Play / pause">
  <span class="nuda-pp__bar nuda-pp__bar--l"></span>
  <span class="nuda-pp__bar nuda-pp__bar--r"></span>
</button>

/* Play/Pause Morph
   Two pause bars; .is-paused flattens to a play triangle via clip-path.
   Customize: --pp-bg, --pp-fg */

.nuda-pp {
  --pp-bg: #e4ff54;
  --pp-fg: #09090b;
  position: relative;
  width: 48px;
  height: 48px;
  background: var(--pp-bg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-pp:hover {
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(228, 255, 84, 0.5);
}

.nuda-pp__bar {
  position: absolute;
  width: 6px;
  height: 18px;
  background: var(--pp-fg);
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nuda-pp__bar--l { transform: translateX(-4px); }
.nuda-pp__bar--r { transform: translateX(4px); }

.nuda-pp:hover .nuda-pp__bar--l { transform: translateX(-3px) scaleX(1.2) skewX(-12deg); }
.nuda-pp:hover .nuda-pp__bar--r { transform: translateX(3px)  scaleX(1.2) skewX(12deg); }

.nuda-pp.is-paused .nuda-pp__bar {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: var(--pp-fg);
  transform: translateX(0);
}

.nuda-pp.is-paused .nuda-pp__bar--r { display: none; }