Pill Morph 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 heavily rounded pill. On hover the corner radius tightens and it morphs into a squared rectangle
- The surface color changes at the same time - both start together and finish together

[Quality requirements]
- The morph and the color change must start at the same instant (a lagging color reads as sluggish)
- Duration about 0.35s. Do not change size or position
- 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