Fade Up Text

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

【演出内容】
- テキストが少し下の位置から、浮き上がりながら現れる
- 移動とフェードは完全に同期させる

【品質要件】
- 移動量は26px前後、時間は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 text appears while floating up from slightly below its final position
- The movement and the fade are perfectly in sync

[Quality requirements]
- Move about 26px over 0.8s. Too much travel delays the moment reading can start
- Ease out at the end so the landing is clearly a stop
- 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