オービット Orbit

「オービット（Orbit）」の動きを実装してください。
OmochiX Learn の動く見本 #023（カメラワーク）です。

頼み方の例: 製品カードのまわりをカメラが一周するように、カードをゆっくり回して見せて。6秒で1周、一定の速さ。
どんな動きか: 被写体のまわりをカメラが回る
見本で起きること: 被写体を中心にカメラが円を描いて回るオービット。Web 上では被写体を 3D 回転させて、回り込む見え方を再現しています。
仕様:
- 親に perspective: 600px、要素に transform-style: preserve-3d を指定する
- transform: rotateY(0)→rotateY(360deg) を 6 秒、linear で繰り返す
- 足元に楕円の影を置いて浮いて見えないようにする
- 動かすのは transform だけ
- prefers-reduced-motion では静止させる
使いどころ: 製品紹介、カード型コンテンツの見せ方、3D 風の導入。動画生成AIには「camera orbits slowly around the product, one full turn in 6 seconds」のようにカメラワークの語彙で指示する（Web 上の再現であり、生成結果を保証するものではない）。
調整した値:
- 6sで1周する（既定）
- 360度まで回る（既定）
- 回り方は「一定」（既定）
- カードの色: #6e4bff（既定）

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

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

<!-- オービット (Orbit) | OmochiX Learn 動く見本 #023 | https://omochix.com/learn/motion/orbit/ -->

<style>
.ob{position:relative;width:260px;height:160px;display:grid;place-items:center;perspective:600px;border-radius:14px;background:radial-gradient(circle at 50% 30%,#2a2440,#141225)}
.ob__card{width:120px;height:76px;border-radius:14px;background:var(--p-color,var(--primary));color:#fff;display:grid;place-items:center;font:700 18px/1 system-ui,sans-serif;letter-spacing:.08em;transform-style:preserve-3d;backface-visibility:visible;animation:ob var(--p-cycle,6s) var(--p-ease,linear) infinite}
.ob__shadow{position:absolute;left:50%;bottom:22px;width:110px;height:14px;margin-left:-55px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(4px)}
@keyframes ob{from{transform:rotateY(0deg)}to{transform:rotateY(calc(var(--p-angle,360) * 1deg))}}
</style>

<div class="ob"><div class="ob__card"><b>NEW</b></div><i class="ob__shadow"></i></div>