スクロールでフェードイン Fade-in on scroll

「スクロールでフェードイン（Fade-in on scroll）」の動きを実装してください。
OmochiX Learn の動く見本 #013（スクロール演出）です。

頼み方の例: LPの各セクションを、スクロールして画面に入ったときにフェードインさせて。16px下から0.5秒で。
どんな動きか: 画面に入った要素だけ順番に現れる
見本で起きること: ページがゆっくりスクロールし、画面に入ってきたセクションから順に、下からふわっと現れます。
仕様:
- 初期状態は opacity: 0; transform: translateY(16px)
- IntersectionObserver（threshold 0.2 程度）で画面に入ったら .is-visible を付ける
- .is-visible で opacity: 1; translateY(0) へ約0.5秒、ease-out。1回だけ再生する
- prefers-reduced-motion の環境では最初から表示状態にする
使いどころ: LP・紹介ページ・記事内の図版など、縦に長いページ全般。
調整した値:
- 下からの移動量は16px（既定）
- セクションごとに0.9sずつ遅らせる（既定）
- スクロールの1周期は5s（既定）
- 動き方は「なめらか」（既定）

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

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

<!-- スクロールでフェードイン (Fade-in on scroll) | OmochiX Learn 動く見本 #013 | https://omochix.com/learn/motion/scroll-fade-in/ -->

<style>
.sf{width:240px;height:160px;overflow:hidden;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.sf__page{display:grid;gap:14px;padding:14px;animation:sf-scroll var(--p-cycle,5s) cubic-bezier(.65,0,.35,1) infinite}
.sf__sec{display:grid;gap:8px;padding:12px;border-radius:10px;background:var(--bg);border:1px solid var(--line);opacity:0;transform:translateY(var(--p-distance,16px));animation:sf-in var(--p-cycle,5s) var(--p-ease,ease-out) calc(var(--i) * var(--p-stagger,.9s)) infinite}
.sf__sec b{display:block;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--blue));opacity:.85}
.sf__sec i{display:block;height:8px;width:70%;border-radius:4px;background:var(--line)}
@keyframes sf-scroll{0%,12%{transform:translateY(0)}70%,88%{transform:translateY(-200px)}100%{transform:translateY(0)}}
@keyframes sf-in{0%,6%{opacity:0;transform:translateY(var(--p-distance,16px))}16%,80%{opacity:1;transform:translateY(0)}92%,100%{opacity:0;transform:translateY(var(--p-distance,16px))}}
</style>

<div class="sf"><div class="sf__page"><section class="sf__sec" style="--i:0"><b></b><i></i></section><section class="sf__sec" style="--i:1"><b></b><i></i></section><section class="sf__sec" style="--i:2"><b></b><i></i></section><section class="sf__sec" style="--i:3"><b></b><i></i></section></div></div>