パララックス Parallax

「パララックス（Parallax）」の動きを実装してください。
OmochiX Learn の動く見本 #016（スクロール演出）です。

頼み方の例: ヒーローの背景をパララックスにして。奥のレイヤーはゆっくり、手前は速く動く感じで。
どんな動きか: 奥と手前で動く速さが違う
見本で起きること: 太陽・遠くの山・手前の丘が、それぞれ違う速さで上下に動き、奥行きが生まれます。
仕様:
- 背景・中景・前景の3レイヤーに分け、スクロール量 × 係数（0.1 / 0.3 / 0.6）で translateY を変える
- 更新は requestAnimationFrame の中でまとめ、transform だけを変更する
- prefers-reduced-motion の環境ではレイヤーを固定する
- スマホでは係数を半分にして酔いを防ぐ
使いどころ: ヒーロー背景、ブランドサイトの装飾、ストーリーテリング型LP。
調整した値:
- 片道の長さは4s（既定）
- 各レイヤーの移動量は既定の1倍（既定）
- 太陽の色: #d97706（既定）
- 手前の丘の色: #6e4bff（既定）

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

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

<!-- パララックス (Parallax) | OmochiX Learn 動く見本 #016 | https://omochix.com/learn/motion/parallax/ -->

<style>
.px{position:relative;width:280px;height:160px;overflow:hidden;border-radius:14px;background:linear-gradient(180deg,var(--bg),var(--surface))}
.px__sun{position:absolute;top:26px;right:50px;width:40px;height:40px;border-radius:50%;background:var(--p-sun,var(--amber));animation:px-move var(--p-cycle,4s) ease-in-out infinite alternate;--d:-8px}
.px__far{position:absolute;left:-20px;right:-20px;bottom:30px;height:90px;background:var(--blue);opacity:.35;clip-path:polygon(0 100%,15% 45%,30% 70%,48% 25%,62% 60%,78% 35%,100% 70%,100% 100%);animation:px-move var(--p-cycle,4s) ease-in-out infinite alternate;--d:-22px}
.px__near{position:absolute;left:-30px;right:-30px;bottom:-10px;height:70px;background:var(--p-near,var(--primary));border-radius:50% 50% 0 0;animation:px-move var(--p-cycle,4s) ease-in-out infinite alternate;--d:-50px}
@keyframes px-move{from{transform:translateY(0)}to{transform:translateY(calc(var(--d) * var(--p-depth,1)))}}
</style>

<div class="px"><span class="px__sun"></span><span class="px__far"></span><span class="px__near"></span></div>