ボタンの押し込み Button press

「ボタンの押し込み（Button press）」の動きを実装してください。
OmochiX Learn の動く見本 #010（UIパーツの動き）です。

頼み方の例: ボタンを押したときに、少し縮む＋押した位置から波紋が広がるフィードバックを付けて。
どんな動きか: 押された手応えと波紋
見本で起きること: ボタンが少し縮んで押し込まれ、押した位置から波紋が広がって消えます。
仕様:
- :active で transform: scale(.95)、戻りは約0.15秒
- 波紋は押した座標を中心に円を scale(0)→scale(14)、不透明度1→0、約0.6秒
- 波紋はボタンの中に overflow: hidden で収める
- prefers-reduced-motion の環境では波紋を出さず、縮みも最小限にする
使いどころ: 送信・購入・保存など、押したことを確かに伝えたい主要ボタン。
調整した値:
- 押したときの縮みは0.95倍（既定）
- 波紋は14倍まで広がる（既定）
- ボタンの色: #6e4bff（既定）
- 押してから次に押すまでの1周期は2.4s（既定）

実装の条件:
- HTML / CSS（必要なら素のJavaScript）で、外部ライブラリは使わない
- 見本の形・タイミング・イージングの数値はそのまま使い、文字・色・素材だけ今作っているものに合わせる
- prefers-reduced-motion: reduce の環境では動きを止めるか最小限にする
- 使った技術: CSS

見本（動くプレビューと参考コード）: https://omochix.com/learn/motion/button-press/

<!-- ボタンの押し込み (Button press) | OmochiX Learn 動く見本 #010 | https://omochix.com/learn/motion/button-press/ -->

<style>
.bp{position:relative;overflow:hidden;padding:16px 36px;border:0;border-radius:999px;background:var(--p-color,var(--primary));color:#fff;font:700 18px/1 system-ui,sans-serif;animation:bp-press var(--p-cycle,2.4s) ease-out infinite}
.bp__ripple{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:bp-ripple var(--p-cycle,2.4s) ease-out infinite}
@keyframes bp-press{0%,28%{transform:scale(1)}34%{transform:scale(var(--p-press,.95))}44%,100%{transform:scale(1)}}
@keyframes bp-ripple{0%,30%{transform:scale(0);opacity:1}70%,100%{transform:scale(var(--p-ripple,14));opacity:0}}
</style>

<button type="button" class="bp" tabindex="-1">送信する<span class="bp__ripple"></span></button>