Center Open Text

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

【演出内容】
- テキストの中央から左右へ同時に、見えている範囲が広がって全体が現れる
- 中央の数文字が最初に見え、両端が最後に現れる

【品質要件】
- 広がる時間は0.8秒前後。左右は完全に対称にする
- センター揃えのテキストで使う（左揃えだと重心がずれる）
- prefers-reduced-motion 時は演出を無効化し、最初から完成した状態で表示する
- 演出中も文字が判読できなくなる時間を作らない。レイアウトを揺らさない

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

[Motion]
- The visible region opens from the center of the text toward both edges at once
- The middle characters appear first and the outer ones last

[Quality requirements]
- Take about 0.8s and keep both sides perfectly symmetrical
- Use it on center-aligned text (on left-aligned text the balance breaks)
- 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