フェードアップ Fade-up

「フェードアップ（Fade-up）」の動きを実装してください。
OmochiX Learn の動く見本 #002（登場・退場）です。

頼み方の例: カードをフェードアップで出して。24px下から0.6秒で、ゆっくり止まる感じ。
どんな動きか: 下からふわっと浮かび上がる
見本で起きること: カードが少し下の位置から透明→不透明になりながら上がってきて、しばらく止まり、上へ薄れて消えます。
仕様:
- 開始位置は24px下、不透明度0
- 0.6秒で元の位置・不透明度1へ（ease-out）
- 複数ある場合は1枚ずつ80〜120msずらす
- 退場は上へ10pxずれながら薄れる
使いどころ: カード・セクション・見出しなど、ページの中で順番に見せたいもの全般。
調整した値:
- 登場から退場までの1周期は3s（既定）
- 下からの移動量は24px（既定）
- 動き方は「なめらか」（既定）

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

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

<!-- フェードアップ (Fade-up) | OmochiX Learn 動く見本 #002 | https://omochix.com/learn/motion/fade-up/ -->

<style>
.fu{width:200px;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.08);animation:fade-up var(--p-cycle,3s) var(--p-ease,ease-out) infinite}
.fu__img{height:64px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--blue))}
.fu__t{height:10px;margin-top:12px;border-radius:5px;background:var(--line)}
.fu__t--s{width:60%;margin-top:8px}
@keyframes fade-up{0%{opacity:0;transform:translateY(var(--p-distance,24px))}20%,78%{opacity:1;transform:translateY(0)}92%,100%{opacity:0;transform:translateY(-10px)}}
</style>

<article class="fu"><div class="fu__img"></div><div class="fu__t"></div><div class="fu__t fu__t--s"></div></article>