Double Sweep Button

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

【演出内容】
- ホバーすると1色目の塗りが左から走り、わずかに遅れて2色目が追いかけて重なる
- 2色が時間差で通過するため、一瞬だけ2色の帯が同時に見える

【品質要件】
- 1色目と2色目の時間差は0.1〜0.15秒。空きすぎると別々の演出に見える
- 最終的に見えるのは2色目。その色とラベルのコントラストを確保する
- 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 first color sweeps in from the left, and a second color follows just behind it
- Because they pass with a time offset, both bands are briefly visible at once

[Quality requirements]
- Offset the two colors by 0.10-0.15s. Any longer and they read as two separate effects
- The second color is what remains, so make sure it has enough contrast with the label
- 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