ドリーイン Dolly in

「ドリーイン（Dolly in）」の動きを実装してください。
OmochiX Learn の動く見本 #021（カメラワーク）です。

頼み方の例: ヒーロー画像に、被写体へゆっくり寄っていくドリーインを付けて。4秒かけて1.4倍まで。
どんな動きか: 被写体へゆっくり寄っていく
見本で起きること: カメラが被写体に向かって前進するドリーイン。被写体は大きく、背景はそれより少し遅れて大きくなり、奥行きが出ます。Web 上では拡大で再現しています。
仕様:
- 被写体は transform: scale(1)→scale(1.4) を 4 秒、ease-out で拡大し、最後の 1 秒は静止する
- 背景は被写体の半分の倍率（1→1.2）で拡大して奥行きを出す
- コンテナは overflow: hidden で切り抜く
- 動かすのは transform だけ（レイアウトを変えない）
- prefers-reduced-motion では最終フレーム（寄った状態）で静止する
使いどころ: ヒーロー映像、製品の寄り、注目させたい要素の導入。動画生成AIには、この CSS ではなく「slow dolly in toward the subject, 4 seconds」のようにカメラワークの語彙で指示する（Web 上の再現であり、生成結果を保証するものではない）。
調整した値:
- 寄り始めから止まるまで4s（既定）
- 被写体は1.4倍まで寄る（既定）
- 寄り方は「最後にゆっくり」（既定）
- 被写体の色: #6e4bff（既定）

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

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

<!-- ドリーイン (Dolly in) | OmochiX Learn 動く見本 #021 | https://omochix.com/learn/motion/dolly-in/ -->

<style>
.dl{position:relative;width:280px;height:160px;overflow:hidden;border-radius:14px;background:#1b1830}
.dl__bg{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 60%,rgba(255,255,255,.14),transparent 55%),repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.06) 38px 40px),repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.06) 38px 40px);animation:dl-bg var(--p-cycle,4s) var(--p-ease,cubic-bezier(.22,1,.36,1)) infinite}
.dl__subject{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:18px;background:var(--p-color,var(--primary));color:#fff;font-size:30px;display:grid;place-items:center;box-shadow:0 18px 40px rgba(0,0,0,.4);animation:dl-in var(--p-cycle,4s) var(--p-ease,cubic-bezier(.22,1,.36,1)) infinite}
@keyframes dl-in{0%{transform:scale(1)}75%,100%{transform:scale(var(--p-zoom,1.4))}}
@keyframes dl-bg{0%{transform:scale(1)}75%,100%{transform:scale(calc(1 + (var(--p-zoom,1.4) - 1) * .5))}}
</style>

<div class="dl"><div class="dl__bg"></div><div class="dl__subject"><span>★</span></div></div>