/* =========================================================
   GOLIXX 刷新レイヤー(kuji 製品ローカル)
   ★「共通の器」(hero-x / hero-grid / hero-demo / demo-card /
     beta-band / share-loop / price-peek / cards.motif / foot-cross・レスポンシブ)と
     新設トークンは golixx-lib(tokens.css / ui.css)から来る。
     このファイルに残すのは kuji 固有の2つだけ:
       ① [data-brand="kuji"] の色ブロック(製品の肌=くじの紫)
       ② ヒーロー内デモの中身 .kj-*(ガラポン抽選器の実演)
   ⛔ 器や :root トークンはここに書かない(lib から来る)。
   読み順: tokens.css → ui.css → kuji.css → renew.css
   ========================================================= */

/* --- ① 製品アイデンティティ(骨格は共通・肌で個性)---
   既存4製品との住み分け: quiz=青+ピンク / akaire=ティール+赤 / kono=オリーブ緑。
   kuji は「縁日・お楽しみ」の紫。意味色(--ok緑/--warn赤/--amber橙)とは色相が離れており
   役割が混ざらない。アクセントは玉の赤紫(デモ・当たりの熱)。 */
[data-brand="kuji"]{
  --primary:#6a1b9a; --primary-d:#4a148c; --primary-l:#f5ecf9; --bd-primary:#d9c2e8;
  --accent:#c2185b; --accent-d:#8c0f42; --accent-l:#fce4ec;   /* 当たり玉の熱 */
  --hero-2:#571c80; --hero-3:#341058; --hero-ink:#ecdff5;
  --motif:"✦";
}

/* --- ② ヒーロー内デモの中身:ガラポンが回り、玉が落ち、当選が全員に出る ---
   自己完結SVG/CSS・画像なし。6秒ループ。
   ドラムの揺れ→玉の落下→当選バッジのポップ、の3拍。 */
.kj-drum{transform-box:fill-box;transform-origin:center;
  animation:kj-spin 6s var(--ease-in) infinite}
@keyframes kj-spin{
  0%{transform:rotate(0deg)}
  10%{transform:rotate(-14deg)}
  25%{transform:rotate(348deg)}
  33%,100%{transform:rotate(360deg)}
}
.kj-handle{transform-box:fill-box;transform-origin:16% 84%;
  animation:kj-crank 6s var(--ease-in) infinite}
@keyframes kj-crank{
  0%{transform:rotate(0deg)}
  10%{transform:rotate(-30deg)}
  25%{transform:rotate(330deg)}
  33%,100%{transform:rotate(360deg)}
}
.kj-ball{opacity:0;animation:kj-drop 6s ease-in infinite}
@keyframes kj-drop{
  0%,33%{opacity:0;transform:translateY(0)}
  38%{opacity:1;transform:translateY(4px)}
  48%{opacity:1;transform:translateY(14px)}
  100%{opacity:1;transform:translateY(14px)}
}
.kj-badge{transform-box:fill-box;transform-origin:center;opacity:0;
  animation:kj-appear 6s var(--ease-in) infinite}
@keyframes kj-appear{
  0%,52%{opacity:0;transform:scale(.85)}
  60%{opacity:1;transform:scale(1.04)}
  66%,100%{opacity:1;transform:scale(1)}
}
.kj-seedline{opacity:.85}

/* 常時アニメは reduced-motion で停止(正本§5)。停止時は「完成状態」で静止 */
@media (prefers-reduced-motion:reduce){
  .kj-drum,.kj-handle{animation:none}
  .kj-ball{animation:none;opacity:1;transform:translateY(14px)}
  .kj-badge{animation:none;opacity:1}
}