Wipe Fill Button

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

【演出内容】
- ホバーすると、塗りの面が左端から右端へ一気に走ってボタンを塗り替える
- 塗りが通過するとラベルの色が反転し、面と文字のコントラストが保たれる
- ホバーを外すと同じ方向へ縮んで消える

【品質要件】
- 走る時間は0.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]
- On hover a fill sweeps from the left edge to the right and repaints the button
- As the fill passes, the label color inverts so contrast between surface and text is preserved
- On hover out it shrinks away in the same direction

[Quality requirements]
- The sweep takes about 0.35s. Avoid harsh acceleration; ease out slightly at the end
- Always clip the fill inside the button's rounded corners
- 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