Corner Brackets Button

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

【演出内容】
- ホバーすると、ボタンの対角の隅にカギ括弧状の線が外側から滑り込んで現れ、対象を挟み込む
- 括弧はボタン本体より少し外側に配置し、照準を合わせたような見え方にする

【品質要件】
- 現れる時間は0.3〜0.4秒。移動とフェードインを同時に行う
- 括弧の線は本体の枠線より太くし、意図的な装飾だと分かるようにする
- prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする
- ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない

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

[Motion]
- On hover bracket-shaped marks slide in from outside toward opposite corners of the button and frame it
- Place the brackets slightly outside the button so it reads like a target being locked on

[Quality requirements]
- They appear over 0.3-0.4s, moving and fading in at the same time
- Make the bracket strokes thicker than the button's own border so they read as deliberate
- 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