Glitch Button

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

【演出内容】
- ホバーすると、ラベルが横方向にずれ・傾き、一部が帯状に欠けて表示が壊れたように見える
- 同時に、赤と青緑にずらした文字の複製が背後で不規則に飛び、色ずれした故障画面のように振る舞う
- 背景だけが乱れるのではなく、文字そのものが崩れることが要点

【品質要件】
- ずれ幅は数px、傾きは10度以内。読み取れないほど破壊しない
- コマ送り（ステップ）のイージングで、なめらかに動かさない
- 演出はボタンの内側に収め、外へはみ出させない
- 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 label shifts sideways, skews, and loses horizontal slices, as if the display were breaking up
- At the same time, red and cyan offset copies of the text jitter behind it, like a channel-split failure on a broken screen
- The point is that the text itself breaks, not just an effect layered behind it

[Quality requirements]
- Keep the offsets to a few pixels and the skew under 10 degrees. Never destroy it past the point of legibility
- Use stepped easing so it reads as dropped frames rather than smooth motion
- Keep the whole effect clipped inside the button
- 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