Gradient Sweep Text

【対象要素】
- 見出しの短いテキストに適用する

【演出内容】
- 文字の上をハイライトの光が左から右へ周期的に走り抜け続ける
- 文字色そのものは変えず、光の帯だけが通過する

【品質要件】
- 光の帯は文字幅の1/3程度。通過は3秒周期でゆったりめにする
- テキストにグラデーションをクリップして表現する
- ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる
- prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する

[Target]
- A short heading text

[Motion]
- A band of light sweeps across the letters left to right, periodically
- The base text color never changes; only the highlight passes

[Quality]
- Band width ~1/3 of the text; a relaxed 3s period
- Implement by clipping a gradient to the text
- Make the loop seamless: the end state must match the start state exactly
- With prefers-reduced-motion, stop the animation and show a static finished state