Gooey Merge Button

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

【演出内容】
- ボタン本体と、その中に潜んでいる小さな円が、粘性のある同じ液体としてつながっている
- ホバーすると小さな円が本体から右へ離れていき、離れ際に飴のように伸びてちぎれ、離れると独立した粒になる
- ホバーを外すと逆再生のように本体へ吸い戻される

【品質要件】
- 離れ際に必ず「伸びて細くなる」段階を作る（瞬間的に分離させない）
- 移動は0.45秒前後で、離れるときにわずかに行き過ぎるイージングにする
- ラベルは常に最前面に置き、粘性表現でぼかさない
- 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 and a small circle hidden inside it behave as one viscous liquid
- On hover the small circle travels out to the right, stretching thin like taffy before it snaps free, and becomes an independent droplet
- On hover out it is drawn back into the body as if the motion were reversed

[Quality requirements]
- There must always be a visible "stretch and thin out" phase before separation (never split instantly)
- The movement takes about 0.45s, overshooting slightly as it separates
- Keep the label on top at all times; the viscous treatment must not blur it
- 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