Character Stagger Button

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

【演出内容】
- ホバーすると、ラベルの文字が1文字ずつ時間差でアクセント色に変わり、左から右へ色が伝播していく
- 文字の位置は動かさず、色の変化だけで流れを見せる

【品質要件】
- 文字間の時間差は30ms前後。全体で0.5秒以内に伝播し終える
- 文字を上下・左右に動かさない（揺れるとラベルが読みにくくなる）
- 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 turn to the accent color one at a time, propagating from left to right
- The characters never move; the flow is carried purely by color

[Quality requirements]
- Stagger about 30ms per character and complete within 0.5s
- Do not shift characters vertically or horizontally (movement hurts legibility)
- 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