Label Slide Button

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

【演出内容】
- ホバーすると、ラベルが上へ抜けると同時に、同じラベルの複製が下から入れ替わりで入ってくる
- 文字の見え方は変わらないのに、常に「新しい面が来た」感触になる

【品質要件】
- 入れ替えは0.35〜0.4秒。抜ける側と入る側は完全に同期させる
- 文字がはみ出す範囲は隠し、上下の見切れが出ないようにする
- 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 slides up and out while an identical copy slides in from below to replace it
- The text looks the same, but every hover feels like a fresh surface arriving

[Quality requirements]
- Swap in 0.35-0.4s, with the outgoing and incoming copies perfectly in sync
- Clip the overflow so no partial text is visible above or below
- 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