Outline to Fill Text

【対象要素】
- サイト内のテキスト1箇所（見出し・キャッチコピー・リード文等）に適用する

【演出内容】
- 最初は輪郭線だけの中抜き文字が現れ、少し間を置いてから内側に塗りが入る
- 線から面へ変わることで、完成した感じを出す

【品質要件】
- 輪郭が出てから塗りが入るまで0.3秒ほど空ける
- 輪郭線は細く（1px程度）にし、塗りが入る前も読めるようにする
- prefers-reduced-motion 時は演出を無効化し、最初から完成した状態で表示する
- 演出中も文字が判読できなくなる時間を作らない。レイアウトを揺らさない

[Target element]
- Apply to one piece of text on your site (a heading, a tagline, a lead paragraph, etc.)

[Motion]
- Outlined, hollow letterforms appear first, and after a short pause the fill floods in
- Moving from line to solid signals that it has finished arriving

[Quality requirements]
- Leave about 0.3s between the outline appearing and the fill entering
- Keep the outline thin (about 1px) so the text is readable even before the fill
- When prefers-reduced-motion is set, disable the animation and show the finished state from the start
- Never let the text become unreadable during the animation, and never shift the surrounding layout