スクロール演出（応用）
スクロール連動タイムライン
スクロールで各ステップ（年表/手順）が順に点灯する。IntersectionObserver で各要素を検知して色付け。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
コード（コピーして使えます）
<div class="scroll-root">
<div class="spacer">↓ スクロール ↓</div>
<ol class="timeline">
<li class="tl-item">
<div class="tl-dot"></div>
<div class="tl-body">
<span class="tl-label">Step 1</span>
<p class="tl-text">アイデアを出す</p>
</div>
</li>
<li class="tl-item">
<div class="tl-dot"></div>
<div class="tl-body">
<span class="tl-label">Step 2</span>
<p class="tl-text">プロトタイプを作る</p>
</div>
</li>
<li class="tl-item">
<div class="tl-dot"></div>
<div class="tl-body">
<span class="tl-label">Step 3</span>
<p class="tl-text">ユーザーに届ける</p>
</div>
</li>
<li class="tl-item">
<div class="tl-dot"></div>
<div class="tl-body">
<span class="tl-label">Step 4</span>
<p class="tl-text">フィードバックを得る</p>
</div>
</li>
</ol>
<div class="spacer-bottom"></div>
</div>