Scramble Text Button

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

【演出内容】
- ホバーすると、ラベルの文字がランダムな記号や英字に置き換わってシャッフルされ、左の文字から順に正しいラベルへ収束していく
- ホバーを外したら即座に元のラベルへ戻す

【品質要件】
- 収束は0.4〜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 the characters of the label are replaced with random symbols and letters, then resolve into the correct label starting from the left
- On hover out it snaps back to the original label immediately

[Quality requirements]
- Resolve in 0.4-0.6s. Keep the character count constant so the button width never changes
- Use monospaced digits and symbols so the width does not jitter mid-scramble
- 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