ポップイン Pop-in

「ポップイン（Pop-in）」の動きを実装してください。
OmochiX Learn の動く見本 #001（登場・退場）です。

頼み方の例: ロゴをポップインで出して。0.4秒くらいで、少しだけ行き過ぎてから戻る感じに。
どんな動きか: ポンと弾んで現れる
見本で起きること: アプリのアイコンがばねのように少し行き過ぎてから落ち着き、通知バッジが一拍遅れて同じ動きで現れます。
仕様:
- 拡大率 0→1 を約0.4秒、行き過ぎのあるイージング（cubic-bezier(.34,1.56,.64,1)）で出す
- 同時に傾き −20°→0° を戻す
- 付属のバッジは0.25秒遅らせて同じ動きで出す
- 退場は縮んで消える（拡大率 1→0、約0.3秒）
使いどころ: アイコン・ボタン・バッジなど、小さな要素を軽く目立たせて出したいとき。
調整した値:
- 登場から退場までの1周期は2.4s（既定）
- 行き過ぎ（オーバーシュート）は「少し」（既定）
- アイコンの色: #6e4bff（既定）
- バッジは0.25s遅らせて出す（既定）

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

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

<!-- ポップイン (Pop-in) | OmochiX Learn 動く見本 #001 | https://omochix.com/learn/motion/pop-in/ -->

<style>
.pop{position:relative;width:96px;height:96px}
.pop__icon{width:96px;height:96px;border-radius:26px;background:var(--p-color,var(--primary));color:#fff;font-size:44px;display:grid;place-items:center;animation:pop-in var(--p-cycle,2.4s) var(--p-ease,cubic-bezier(.34,1.56,.64,1)) infinite}
.pop__badge{position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;background:var(--amber);color:#fff;font:700 14px/30px system-ui,sans-serif;text-align:center;animation:pop-in var(--p-cycle,2.4s) var(--p-ease,cubic-bezier(.34,1.56,.64,1)) var(--p-badge-delay,.25s) infinite}
@keyframes pop-in{0%{transform:scale(0) rotate(-20deg);opacity:0}18%{transform:scale(1) rotate(0);opacity:1}72%{transform:scale(1);opacity:1}86%,100%{transform:scale(0);opacity:0}}
</style>

<div class="pop"><div class="pop__icon">★</div><div class="pop__badge">1</div></div>