Two-Layer Magnetic Button

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

【演出内容】
- ポインタに対してボタン本体とラベルが別々の量で追従し、面と文字の間にわずかなずれ（視差）が生まれる
- ラベルは本体よりも少しだけ多く動く程度に留め、文字が枠から飛び出す印象にしない

【品質要件】
- 本体の追従量は距離の3割程度、ラベルの追加追従はさらに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]
- The button surface and its label follow the pointer by different amounts, creating a slight parallax offset between them
- The label should move only a little more than the surface - never enough to look like the text is escaping the frame

[Quality requirements]
- The surface follows about 30% of the distance; the label adds only about 20% more. Avoid extreme following
- When the pointer leaves, the surface and the label return together
- On devices without a pointer, do not move anything
- 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