Typewriter Button

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

【演出内容】
- ホバーすると、ラベルが一度消えて、1文字ずつ打ち直される
- 文字の右側には入力カーソルを表す縦線が現れ、打鍵が終わるまで文末についてくる
- ホバーを外したら即座に完全なラベルへ戻す

【品質要件】
- 打鍵の間隔は70ms前後。文字数が多いラベルには使わない
- 打っている最中もボタンの幅を固定し、レイアウトを揺らさない
- 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 the label clears and is retyped one character at a time
- A vertical caret appears to the right of the text and follows the end of the line until typing finishes
- On hover out it returns to the complete label immediately

[Quality requirements]
- Type at about 70ms per character. Do not use this on long labels
- Keep the button width fixed while typing so the layout does not shift
- 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