Outline Diffuse Button

【対象要素】
- サイト内のボタン1点（CTA・リンクボタン・フォームの送信ボタン等）に適用する

【演出内容】
- ホバーしている間、ボタンと同じ形の輪郭線が本体から離れるように外へ広がり、薄れて消える
- 一定間隔で繰り返し、波紋が広がり続けているように見せる

【品質要件】
- 1回の広がりは0.9秒前後。拡大率は1.35倍程度に留め、隣接要素へ大きくはみ出させない
- 広がる線は必ず消えきってから次を出し、複数が濃く重ならないようにする
- prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする
- ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない

[Target element]
- Apply to a single button on your site (a CTA, a link button, a form submit button, etc.)

[Motion]
- While hovered, an outline in the button's shape expands away from it and fades out
- It repeats at a steady interval so the ripple looks continuous

[Quality requirements]
- One expansion takes about 0.9s and scales to roughly 1.35x; do not overrun neighboring elements
- Let each ring fade out completely before the next appears so they never stack heavily
- When prefers-reduced-motion is set, disable the animation and fall back to a static state change
- Never reduce the legibility of the label; do not create a moment where the text cannot be read