Stacking Cards

【対象要素】
- スクロールで見せるセクション1つ（見出し＋図版・画像・カード等）に適用する

【演出内容】
- 縦に大きく離れて並んでいたカードが、スクロールに合わせて中央へ寄り、深く重なった一束になる
- 奥のカードほど小さくなり、手前のカードが上に載る

【品質要件】
- 最終状態では隣り合うカードが7割以上重なるところまで寄せる（浅い重なりだと積み上がって見えない）
- 移動量はカード1枚の高さ以上を確保し、寄っていく過程がはっきり分かるようにする
- 重なり順は手前ほど大きく・明るくして、奥行きを保つ
- prefers-reduced-motion 時は演出を無効化し、最初から完成した状態で表示する
- スクロールを戻したときも進行に応じて巻き戻る（一度きりの再生にしない）
- 図形は半透明（不透明度0.7程度）にして、背後の要素や文字を潰さない

[Target element]
- Apply to one scroll-driven section on your site (a heading plus a figure, image, or cards)

[Motion]
- Cards spread far apart vertically converge toward the center as the scroll advances, ending as a deeply overlapped stack
- Cards further back are smaller, with the front card resting on top

[Quality requirements]
- In the final state, adjacent cards must overlap by at least 70% (a shallow overlap does not read as stacking)
- Travel at least the height of one card so the converging is unmistakable
- Keep the front card larger and brighter to preserve the depth order
- When prefers-reduced-motion is set, disable the animation and show the finished state from the start
- Scrolling back must rewind the animation in step with the scroll position (never a one-shot playback)
- Keep shapes semi-transparent (around 0.7 opacity) so they never crush the content or text behind them