/* ============================================================
   motion.css — 動效層
   五層（ambient/micro/feedback/entrance/celebrate）+ 三檔位
   鐵律：只動 transform/opacity（§3.1.1）；單 RAF（§3.1）；ambient 一處可關（§3.1）
   ============================================================ */

/* --- 檔位（spec §3.2） --- */
:root[data-motion="calm"] { --ambient-a: none; }

:root[data-motion="minimal"] *,
:root[data-motion="minimal"] *::before,
:root[data-motion="minimal"] *::after {
  animation: none !important;
  transition-duration: 1ms !important;
}

/* --- keyframes：本期需要嘅。位移一律用 transform --- */

@keyframes kx-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

@keyframes kx-option-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes kx-jar-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* --- feedback 層 --- */
.fx-shake {
  animation: kx-shake var(--dur-3) var(--ease-out);
}

.quiz-option.correct {
  animation: kx-option-pop var(--dur-2) var(--ease-spring);
}

#quiz-star-jar.kx-pop {
  animation: kx-jar-pop var(--dur-2) var(--ease-spring);
}

/* --- celebrate 層：combo 橫幅 ---
   置中要寫進 transform 本身（兩個狀態都帶 -50%）：若用 `transform: translateX(-50%)` 再加
   keyframes 入場，動畫嘅 transform 會完全覆蓋置中，橫幅會喺入場瞬間偏右半個身位。
   用過渡唔用 keyframes 都係同一原因。鐵律 1 只準 transform/opacity 做動畫，呢度兩者皆合。
   唔用 visibility/display 切換：aria-live 區域被 display 切走時讀屏會漏報（spec §13）。 */
#combo-banner {
  position: fixed;
  top: calc(var(--sa-t) + 12px);
  left: 50%;
  transform: translate3d(-50%, -20px, 0);
  opacity: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--reward);
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(18px, 4.6vw, 24px);
  box-shadow: var(--card-shadow);
  transition: opacity var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-spring);
}

#combo-banner.kx-show {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

/* --- fx 層：一律不吃指針 --- */
#confetti-container,
#confetti-container canvas,
.star-fly {
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
}

.star-fly {
  inset: auto;
  width: 34px;
  height: 34px;
  font-size: 30px;
  line-height: 1;
  will-change: transform, opacity;
}