Circle to Pill Button

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

【演出内容】
- 通常時はアイコンだけの円形ボタン。アイコンは円の中心に置く
- ホバーすると円が横に伸びてピル型へ展開し、空いた場所にラベルが現れる

【品質要件】
- 展開とラベルの出現は同時に行い、0.35秒前後で完了させる
- 展開前のアイコンは必ず円の中央に来るようにする（ラベル用の余白で左に寄らせない）
- 展開中にラベルがはみ出して見えないようにする
- prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする
- ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない

[Target element]
- Apply to a single button on your site (a CTA, a link button, a form submit button, etc.)

[Motion]
- At rest it is a circular icon-only button, with the icon centered in the circle
- On hover the circle stretches horizontally into a pill and a label appears in the space that opens up

[Quality requirements]
- Run the expansion and the label reveal together, finishing in about 0.35s
- The icon must sit dead center before expanding (do not let padding reserved for the label push it to the left)
- Do not let the label peek outside the button while it expands
- 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