Ink Bleed Button

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

【演出内容】
- ホバーすると、にじんだインクが紙に広がるように、輪郭のぼけた塗りが中心から拡散してボタンを覆う
- 輪郭がはっきりしないため、他の塗り演出よりやわらかい印象になる

【品質要件】
- 広がる時間は0.6秒前後。輪郭のぼかしは強めにかけ、縁を立てない
- 最終状態でボタン全体が均一に覆われるまで拡大する
- prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする
- ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない

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

[Motion]
- On hover a soft-edged fill spreads outward from the center like ink bleeding into paper, covering the button
- Because it has no hard edge it feels gentler than the other fill effects

[Quality requirements]
- The spread takes about 0.6s. Blur the edge heavily so no rim forms
- Keep expanding until the whole button is evenly covered
- 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