Underline Grow Button

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

【演出内容】
- 通常時は枠線のないテキストボタン。ホバーすると下線が左から右へ伸びる
- 下線が伸びるのと同時に、その下線を底辺として枠全体が上方向へ立ち上がる（時間差をつけず同時に始める）

【品質要件】
- 下線の伸長と枠の立ち上がりは同時に開始し、0.3秒前後で完了させる
- 立ち上がりの起点は必ず下辺に固定し、上下から挟むような動きにしない
- 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 text button with no border. On hover an underline grows from left to right
- At the same moment the full frame rises upward using that underline as its base (both start together, with no delay)

[Quality requirements]
- Start the underline and the frame at the same instant and finish in about 0.3s
- Anchor the rise to the bottom edge; never let it close in from the top and bottom at once
- 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