パン Pan

「パン（Pan）」の動きを実装してください。
OmochiX Learn の動く見本 #022（カメラワーク）です。

頼み方の例: 街並みのイラストを、カメラを横に振るように左へゆっくり流して。5秒で80px、端まで行ったら戻る。
どんな動きか: 横に首を振るように景色が流れる
見本で起きること: カメラを横に振るパン。手前の景色が横に流れ、端まで行くとゆっくり戻ります。Web 上では横スクロールで再現しています。
仕様:
- コンテナより広い帯（440px）を overflow: hidden のコンテナに入れる
- 帯を translateX(0)→translateX(-80px) で 5 秒、ease-in-out、alternate で往復させる
- 動かすのは transform だけ
- 向きを変えるときは距離の符号だけを反転する
- prefers-reduced-motion では静止させる
使いどころ: ヒーローの背景、風景の見せ方、スライドの導入。動画生成AIには「slow pan to the left across the skyline」のようにカメラワークの語彙で指示する（Web 上の再現であり、生成結果を保証するものではない）。
調整した値:
- 片道5sで振る（既定）
- 横に80px流す（既定）
- 向きは「左へ」（既定）
- 振り方は「ゆっくり始まりゆっくり終わる」（既定）
- 建物の色: #6e4bff（既定）

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

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

<!-- パン (Pan) | OmochiX Learn 動く見本 #022 | https://omochix.com/learn/motion/pan/ -->

<style>
.pn{width:280px;height:150px;overflow:hidden;border-radius:14px;background:linear-gradient(180deg,#bfd7ff 0%,#eef5ff 70%,#dde6f3 70%)}
.pn__strip{display:flex;gap:14px;align-items:flex-end;width:440px;height:100%;padding:0 12px;box-sizing:border-box;animation:pn var(--p-cycle,5s) var(--p-ease,ease-in-out) infinite alternate}
.pn__strip i{display:block;flex:0 0 38px;height:var(--h);border-radius:4px 4px 0 0;background:var(--p-color,var(--primary));opacity:.85}
@keyframes pn{from{transform:translateX(0)}to{transform:translateX(calc(var(--p-distance,80px) * var(--p-dir,-1)))}}
</style>

<div class="pn"><div class="pn__strip"><i style="--h:60px"></i><i style="--h:110px"></i><i style="--h:80px"></i><i style="--h:130px"></i><i style="--h:70px"></i><i style="--h:100px"></i><i style="--h:90px"></i><i style="--h:120px"></i></div></div>