Shadow Stack Button

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

【演出内容】
- ホバーするとボタンが斜め上へずれ、背後に色違いの影が数枚、階段状にずれて現れる
- 影は奥に行くほど暗くなり、紙が重なったような厚みが出る

【品質要件】
- 影は3枚程度まで。増やしすぎると輪郭がぼやける
- 移動量と影のずれ幅を揃え、重なりの方向を一致させる
- 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 button shifts diagonally upward and several offset shadows in different colors appear behind it, stacked like steps
- The shadows get darker further back, giving the depth of stacked paper

[Quality requirements]
- Use about three shadows. More than that blurs the silhouette
- Match the travel distance to the shadow spacing so the stacking direction stays consistent
- 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