Double-Tap Seek Ripple

<!-- Double-Tap Seek Ripple — left/right zones ripple ±10s on tap -->
<div class="nuda-vp2-seek-ripple">
  <div class="nuda-vp2-seek-ripple__frame" aria-hidden="true"></div>
  <button class="nuda-vp2-seek-ripple__zone nuda-vp2-seek-ripple__zone--back" type="button" aria-label="Rewind 10 seconds">
    <span class="nuda-vp2-seek-ripple__ring" aria-hidden="true"></span>
    <svg class="nuda-vp2-seek-ripple__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 12a8 8 0 1 0 3-6.2M4 12V6M4 12h6" />
    </svg>
    <span class="nuda-vp2-seek-ripple__amt">10</span>
  </button>
  <button class="nuda-vp2-seek-ripple__zone nuda-vp2-seek-ripple__zone--fwd" type="button" aria-label="Forward 10 seconds">
    <span class="nuda-vp2-seek-ripple__ring" aria-hidden="true"></span>
    <svg class="nuda-vp2-seek-ripple__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20 12a8 8 0 1 1-3-6.2M20 12V6M20 12h-6" />
    </svg>
    <span class="nuda-vp2-seek-ripple__amt">10</span>
  </button>
</div>

.nuda-vp2-seek-ripple {
  position: relative;
  width: 300px;
  height: 170px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg,#1a1a1f,#0e0e10);
  display: flex;
}

.nuda-vp2-seek-ripple__frame {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%,rgba(228,255,84,.1),transparent 60%);
}

.nuda-vp2-seek-ripple__zone {
  position: relative;
  flex: 1;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fafafa;
  cursor: pointer;
  overflow: hidden;
}

.nuda-vp2-seek-ripple__zone:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: -3px;
}

.nuda-vp2-seek-ripple__ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(228,255,84,.25);
  transform: scale(.3);
  opacity: 0;
  animation: _nuda-vp2seekripplepulse 2.6s ease-out infinite;
}

.nuda-vp2-seek-ripple__zone--fwd .nuda-vp2-seek-ripple__ring {
  animation-delay: 1.3s;
}

.nuda-vp2-seek-ripple__icon {
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
}

.nuda-vp2-seek-ripple__amt {
  position: relative;
  z-index: 1;
  font: 700 9px ui-sans-serif,system-ui,sans-serif;
  letter-spacing: .02em;
}

.nuda-vp2-seek-ripple__zone:hover .nuda-vp2-seek-ripple__ring, .nuda-vp2-seek-ripple__zone:focus-visible .nuda-vp2-seek-ripple__ring {
  background: rgba(228,255,84,.35);
}

@keyframes _nuda-vp2seekripplepulse {
  0% {
    transform: scale(.3);
    opacity: .7;
  }
  70% {
    opacity: .15;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-vp2-seek-ripple__ring {
    animation: none;
    opacity: 0;
  }
}