Squash and Stretch Button

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

【演出内容】
- ホバーした瞬間、ボタンが横に潰れてから縦に伸び、数回揺り戻して元の形に収まる
- 弾力のある物体を弾いたような、アニメーション原則どおりの潰れと伸びを見せる

【品質要件】
- 一連の動きは0.6秒前後で必ず元の形に戻す（ループさせない）
- 変形量は最大でも1.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 moment it is hovered the button squashes horizontally, stretches vertically, then oscillates a few times back to its resting shape
- It should read like the classic animation principle: a springy object that has just been flicked

[Quality requirements]
- The whole sequence lasts about 0.6s and must always end at the original shape (never loop it)
- Keep deformation to roughly 1.2x at most; do not squash so far that the text visibly distorts
- 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