スタガー Stagger

「スタガー（Stagger）」の動きを実装してください。
OmochiX Learn の動く見本 #003（登場・退場）です。

頼み方の例: リストの項目をスタガーで出して。1つにつき120msずらして、下から伸びる感じ。
どんな動きか: 1つずつ時間差で現れる
見本で起きること: 5本のバーが左から順に、少しずつ遅れて伸び上がります。全部そろったあと、まとめて消えて繰り返します。
仕様:
- 各項目は transform: scaleY(0)→1、不透明度0→1
- 項目ごとに animation-delay を 120ms ずつ増やす（CSS変数 --i を使う）
- イージングは cubic-bezier(.22,1,.36,1)
- 項目数が10を超えるときは遅延の上限を決める（例：最大600ms）
使いどころ: リスト・グラフの棒・カードの並びなど、同じ形のものが複数あるとき。
調整した値:
- 要素ごとに120msずつ遅らせる（既定）
- 登場から退場までの1周期は2.8s（既定）
- バーの色: #6e4bff（既定）
- 動き方は「やわらか」（既定）

実装の条件:
- HTML / CSS（必要なら素のJavaScript）で、外部ライブラリは使わない
- 見本の形・タイミング・イージングの数値はそのまま使い、文字・色・素材だけ今作っているものに合わせる
- prefers-reduced-motion: reduce の環境では動きを止めるか最小限にする
- 使った技術: CSS

見本（動くプレビューと参考コード）: https://omochix.com/learn/motion/stagger/

<!-- スタガー (Stagger) | OmochiX Learn 動く見本 #003 | https://omochix.com/learn/motion/stagger/ -->

<style>
.stg{display:flex;align-items:flex-end;gap:12px;height:110px;margin:0;padding:0;list-style:none}
.stg li{width:28px;height:calc(50px + var(--i) * 14px);border-radius:8px 8px 3px 3px;background:var(--p-color,var(--primary));transform-origin:bottom;animation:stg var(--p-cycle,2.8s) var(--p-ease,cubic-bezier(.22,1,.36,1)) calc(var(--i) * var(--p-stagger,120ms)) infinite}
@keyframes stg{0%{transform:scaleY(0);opacity:0}22%,70%{transform:scaleY(1);opacity:1}82%,100%{transform:scaleY(0);opacity:0}}
</style>

<ul class="stg"><li style="--i:0"></li><li style="--i:1"></li><li style="--i:2"></li><li style="--i:3"></li><li style="--i:4"></li></ul>