Border Draw Button

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

【演出内容】
- 通常時は枠線のないテキストボタン。ホバーすると輪郭線が一筆書きのように描かれて枠が閉じる
- 対角の2点から線が同時に伸び、横方向を描き終えてから縦方向へ折れて一周する

【品質要件】
- 描画は横→縦の順で、全体で0.25秒前後。もたつかせない
- 描き終わりに線が二重に見える隙間・重なりを作らない
- 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 the outline is drawn in a single continuous stroke until the frame closes
- Lines grow from two opposite corners at once, completing the horizontal run before turning into the vertical

[Quality requirements]
- Draw horizontal then vertical, about 0.25s in total. Never let it feel sluggish
- Leave no gap and no doubled overlap where the strokes meet
- 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