追従ヘッダー Sticky header

「追従ヘッダー（Sticky header）」の動きを実装してください。
OmochiX Learn の動く見本 #014（スクロール演出）です。

頼み方の例: ヘッダーをスクロールで追従させて。少しスクロールしたら高さを縮めて、影を付けて。
どんな動きか: スクロールすると細くなって追従する
見本で起きること: ページを下へスクロールすると、ヘッダーが少し薄く・影付きになって上に貼り付き、内容がその下を流れます。
仕様:
- ヘッダーは position: sticky; top: 0
- スクロール量が8pxを超えたら .is-scrolled を付ける（scrollイベントは passive）
- .is-scrolled で高さ 72px→56px、box-shadow を付ける。遷移は約0.2秒
- 本文側の見出しには scroll-margin-top をヘッダー分だけ付ける
使いどころ: 長いページで常にナビへ戻れるようにしたいとき。
調整した値:
- スクロールの1周期は4.5s（既定）
- スクロール後のヘッダーの高さは32px（既定）
- 影の濃さは0.12（0〜1）（既定）
- ロゴの色: #6e4bff（既定）

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

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

<!-- 追従ヘッダー (Sticky header) | OmochiX Learn 動く見本 #014 | https://omochix.com/learn/motion/sticky-header/ -->

<style>
.sh{position:relative;width:240px;height:160px;overflow:hidden;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.sh__bar{position:absolute;z-index:1;inset:0 0 auto 0;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 14px;background:var(--surface);border-bottom:1px solid var(--line);animation:sh-bar var(--p-cycle,4.5s) cubic-bezier(.65,0,.35,1) infinite}
.sh__logo{width:60px;height:12px;border-radius:6px;background:var(--p-color,var(--primary))}
.sh__nav{width:80px;height:8px;border-radius:4px;background:var(--line)}
.sh__page{display:grid;gap:12px;padding:58px 14px 14px;animation:sh-scroll var(--p-cycle,4.5s) cubic-bezier(.65,0,.35,1) infinite}
.sh__page i{display:block;height:44px;border-radius:8px;background:var(--bg);border:1px solid var(--line)}
@keyframes sh-scroll{0%,15%{transform:translateY(0)}65%,85%{transform:translateY(-180px)}100%{transform:translateY(0)}}
@keyframes sh-bar{0%,15%{height:44px;box-shadow:none}30%,85%{height:var(--p-compact,32px);box-shadow:0 6px 18px rgba(0,0,0,var(--p-shadow,.12))}100%{height:44px;box-shadow:none}}
</style>

<div class="sh"><header class="sh__bar"><span class="sh__logo"></span><span class="sh__nav"></span></header><div class="sh__page"><i></i><i></i><i></i><i></i><i></i><i></i></div></div>