/* ============================================================
   FX 动画样式 —— 想换手感，只改这个文件
   ------------------------------------------------------------
   所有动画都由 CSS 变量驱动，js/fx.js 只负责生成节点和给变量。
   升级路线：
     1. 调下面「全局节奏」变量 → 整体快慢/幅度
     2. 改单个 keyframes → 换某种特效的手感
     3. 换 SVG/图片粒子 → 改 .fx-p 的 background
     4. 上 Canvas / Lottie / Spine → 重写 js/fx.js，保留 API
   ============================================================ */

:root {
  /* ---- 全局节奏（改这里最省事）---- */
  --fx-pop-dur: 820ms;
  --fx-pop-ease: cubic-bezier(.2, .7, .3, 1);
  --fx-particle-dur: 620ms;
  --fx-shake-dur: 320ms;
  --fx-shake-px: 6px;
  --fx-flash-dur: 260ms;

  /* ---- 配色 ---- */
  --fx-gold: #FFC24B;
  --fx-coral: #FF7A45;
  --fx-mint: #34D399;
  --fx-ink: #2B2B38;
}

/* ---------------- 特效层 ---------------- */
#fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
  contain: layout paint;
}

/* ---------------- 飘字 ---------------- */
.fx-pop {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%);
  font-size: calc(22px * var(--size, 1));
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  color: var(--fx-gold);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .9), 0 6px 14px rgba(255, 150, 40, .35);
  animation: fx-pop-rise var(--fx-pop-dur) var(--fx-pop-ease) forwards;
  will-change: transform, opacity;
}

@keyframes fx-pop-rise {
  0%   { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  18%  { transform: translate(-50%, -60%) scale(1.18); opacity: 1; }
  42%  { transform: translate(-50%, calc(-50% - var(--up, 70px) * .45)) scale(1); opacity: 1; }
  100% { transform: translate(-50%, calc(-50% - var(--up, 70px))) scale(.92); opacity: 0; }
}

/* ---------------- 星火粒子 ---------------- */
.fx-p {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: hsl(var(--hue, 30) 92% 62%);
  box-shadow: 0 0 10px hsl(var(--hue, 30) 95% 65% / .85);
  animation: fx-p-fly var(--t, 600ms) cubic-bezier(.15, .8, .35, 1) forwards;
  will-change: transform, opacity;
}

@keyframes fx-p-fly {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  70%  { opacity: .9; }
  100% {
    transform: translate(var(--dx, 40px), var(--dy, -40px)) scale(.2);
    opacity: 0;
  }
}

/* ---------------- 全屏闪光 ---------------- */
.fx-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 45%,
      hsl(var(--hue, 42) 100% 78% / var(--alpha, .35)) 0%,
      hsl(var(--hue, 42) 100% 70% / 0) 62%);
  animation: fx-flash-fade var(--ms, 260ms) ease-out forwards;
}

@keyframes fx-flash-fade {
  from { opacity: 0; }
  25%  { opacity: 1; }
  to   { opacity: 0; }
}

/* ---------------- 撒纸片 ---------------- */
.fx-confetti {
  position: fixed;
  top: -18px;
  left: var(--x, 50%);
  width: 9px;
  height: 14px;
  border-radius: 2px;
  background: hsl(var(--hue, 30) 90% 62%);
  animation: fx-confetti-fall var(--t, 1200ms) linear var(--delay, 0ms) forwards;
  will-change: transform, opacity;
}

@keyframes fx-confetti-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(0, 105vh, 0) rotate(var(--spin, 360deg)); opacity: .15; }
}

/* ---------------- 光点上浮 ---------------- */
.fx-mote {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: hsl(var(--hue, 190) 90% 70%);
  animation: fx-mote-up var(--t, 1600ms) ease-out forwards;
}

@keyframes fx-mote-up {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  25%  { opacity: .85; }
  100% { transform: translateY(-58px) scale(1.1); opacity: 0; }
}

/* ---------------- 元素脉冲 ---------------- */
.fx-pulse {
  animation: fx-pulse-scale 400ms cubic-bezier(.2, .9, .3, 1.4);
}

@keyframes fx-pulse-scale {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ---------------- 屏幕抖动 ---------------- */
/* 元素级抖动：用 translate 属性，避开元素自己的 transform / scale */
.fx-shake {
  animation: fx-shake-kf var(--fx-shake-dur) cubic-bezier(.36, .07, .19, .97);
}

/* 整屏抖动只在明确要求时用，幅度已经减半 */
html.fx-shaking #app {
  animation: fx-shake-kf var(--fx-shake-dur) cubic-bezier(.36, .07, .19, .97);
}

@keyframes fx-shake-kf {
  0%, 100% { translate: 0 0; }
  20% { translate: calc(var(--fx-shake-px) * -1) calc(var(--fx-shake-px) * .4); }
  40% { translate: var(--fx-shake-px) calc(var(--fx-shake-px) * -.5); }
  60% { translate: calc(var(--fx-shake-px) * -.7) calc(var(--fx-shake-px) * .3); }
  80% { translate: calc(var(--fx-shake-px) * .5) 0; }
}

/* ---------------- 连击徽章 ---------------- */
.fx-combo {
  animation: fx-combo-pop 300ms cubic-bezier(.2, 1.6, .4, 1);
}

@keyframes fx-combo-pop {
  0%   { transform: scale(1.9) rotate(-6deg); }
  60%  { transform: scale(.94) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---------------- 常驻微动画（可关） ---------------- */
@keyframes fx-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.03); }
}

.fx-breathe { animation: fx-breathe 3.4s ease-in-out infinite; }

@keyframes fx-float-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  #fx-layer { display: none; }
  .fx-breathe, .fx-pulse, .fx-combo { animation: none !important; }
}