Extrude Text

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

【演出内容】
- 平らな文字から、斜め後ろへ厚みが伸びて立体的な塊になる
- 厚みは段階的に濃くなり、最後に接地の影がつく

【品質要件】
- 厚みの方向は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]
- Flat letterforms grow a diagonal extrusion behind them until they read as a solid mass
- The extrusion darkens in steps and finishes with a contact shadow

[Quality requirements]
- Extrude in a single consistent direction (down-right, for example)
- Take about 0.8s and do not add so much depth that the text becomes hard to read
- 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