/* ═══════════════════════════════════════════════════════════════════
   VFX 效果发动特效 —— CSS 动画 + 粒子样式
   对标：炉石节奏 × 三国杀水墨
   配合 vfx.js 使用，不改 C# 后端
   ═══════════════════════════════════════════════════════════════════ */

/* ── VFX 覆盖层容器：z-index 60 在卡牌之上、弹窗之下，不阻挡操作 ── */
#vfx-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
}

/* ── 粒子基类 ── */
.vfx-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: vfx-particle-fly 600ms ease-out forwards;
}

/* 水墨粒子变体——不规则墨迹晕染 */
.vfx-particle.ink {
  width: 8px;
  height: 8px;
  border-radius: 40% 60% 35% 65%;
  filter: blur(1px);
  animation-duration: 700ms;
}

/* ── 效果名浮动文字 ── */
.vfx-banner {
  position: absolute;
  font-family: 'KaiTi', '楷体', 'STKaiti', serif;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 2px;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  animation: vfx-banner-rise 800ms ease-out forwards;
}

/* ── 光圈扩散元素 ── */
.vfx-aura {
  position: absolute;
  border-radius: 50%;
  border: 2px solid;
  pointer-events: none;
  animation: vfx-aura-expand 500ms ease-out forwards;
}

/* ── 卡片级 VFX 动画 class（统一 .field-card 前缀）──
   ★ 前缀提升特异性 (0,2,0)：压过 main.css 的 .card.activatable (0,2,0，vfx.css 后加载同特异后声明者胜)——
     否则己方回合可发动卡的 infinite glow 会在级联中压制全部 VFX 动画，且 animationend 永不触发自清理失效。
   ★ veil 规则 (.field-card[data-instance-id] = 0,2,0 + !important、运行时 append head 末尾) 特异性更高，
     veiled 期间仍能压制本类动画，揭幕时序不受影响 */
/* ── 卡牌彩色光晕闪烁（颜色/大小/时长由 flashCard 注入 CSS 变量）── */
.field-card.vfx-flash-ring {
  animation: vfx-card-ring var(--vfx-flash-dur, 400ms) ease-out;
}

/* ── veiled 卡揭幕渐显（替代旧 transition 方案，只动 opacity）── */
.field-card.vfx-reveal-fade {
  animation: vfx-reveal-fade 350ms ease-out;
}

/* ── 召唤揭幕：纯渐显（2026-08-15 用户拍板：召唤卡牌不位移，去掉弹性 scale 弹出）── */
.field-card.vfx-summon-reveal {
  animation: vfx-summon-reveal 400ms ease-out;
}

/* ── 内乱暗红光晕（2026-08-15 用户拍板：发动效果卡牌不位移——去掉 shake 抖动，
     只留暗红光晕；class 名保留，JS/文档引用不变）── */
.field-card.vfx-shake-ring {
  animation: vfx-card-ring var(--vfx-flash-dur, 400ms) ease-out;
}

/* ── 战败暗化（forwards 保持终态，animationend 摘 class 还原）── */
.field-card.vfx-defeat-darken {
  animation: vfx-defeat-darken 400ms ease-out forwards;
}

/* ═══════════════════════════════════════════════════════════════════
   @keyframes
   ═══════════════════════════════════════════════════════════════════ */

/* 粒子飞散：向外爆开 + 淡出 */
@keyframes vfx-particle-fly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--vx), var(--vy)) scale(0);
    opacity: 0;
  }
}

/* 掠阵尖锐爆发粒子：快速向外炸开（尖锐+急促） */
.vfx-particle.burst {
  animation-name: vfx-particle-burst;
}

@keyframes vfx-particle-burst {
  0% {
    transform: translate(0, 0) scale(0.6);
    opacity: 1;
  }
  30% {
    transform: translate(calc(var(--vx) * 0.5), calc(var(--vy) * 0.5)) scale(1.6);
    opacity: 0.95;
  }
  100% {
    transform: translate(var(--vx), var(--vy)) scale(0);
    opacity: 0;
  }
}

/* 掠阵快速双闪脉冲：急警响应感（比威仪单脉冲更急促） */
@keyframes vfx-sharp-pulse {
  0% { filter: brightness(1); }
  15% { filter: brightness(2.4); }
  30% { filter: brightness(0.7); }
  50% { filter: brightness(2.2); }
  100% { filter: brightness(1); }
}

/* 威仪上升粒子：光点向上飘散 */
.vfx-particle.rise {
  animation-name: vfx-particle-rise;
}

@keyframes vfx-particle-rise {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.9;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    transform: translate(var(--vx), var(--vy)) scale(0.3);
    opacity: 0;
  }
}

/* 内乱暗红雾气：墨迹向上膨胀飘散（比 rise 更慢、scale 膨胀而非缩小） */
.vfx-particle.mist {
  animation-name: vfx-particle-mist;
}

@keyframes vfx-particle-mist {
  0% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0.85;
  }
  30% {
    opacity: 0.7;
    transform: translate(calc(var(--vx) * 0.4), calc(var(--vy) * 0.4)) scale(1.2);
  }
  70% {
    opacity: 0.3;
  }
  100% {
    transform: translate(var(--vx), var(--vy)) scale(1.8);
    opacity: 0;
  }
}

/* 光圈扩散：从小到大 + 淡出 */
@keyframes vfx-aura-expand {
  0% {
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    opacity: 0.9;
  }
  100% {
    width: 160px;
    height: 160px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}

/* 效果名文字：上升 + 淡出 */
@keyframes vfx-banner-rise {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px);
    opacity: 0;
  }
}

/* 彩色光晕脉冲（box-shadow 颜色/大小/时长全部走 CSS 变量，animationend 摘 class 还原）
   ★ 大小在 keyframes 内乘 --battle-s（棋盘缩放，battle-layout.js 注入）——JS 端不再重复乘 */
@keyframes vfx-card-ring {
  0% {
    box-shadow: 0 0 0px var(--vfx-flash-color, #ffd700);
  }
  50% {
    box-shadow: 0 0 calc(var(--vfx-flash-size, 20px) * var(--battle-s, 1)) var(--vfx-flash-color, #ffd700);
  }
  100% {
    box-shadow: 0 0 0px var(--vfx-flash-color, #ffd700);
  }
}

/* veiled 揭幕渐显：只动 opacity，与布局 transform/scale 零冲突 */
@keyframes vfx-reveal-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 召唤揭幕：纯渐显（2026-08-15 用户拍板：召唤卡牌不位移，去掉 scale） */
@keyframes vfx-summon-reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 战败下沉粒子：被击败后能量向下坠落消散 */
.vfx-particle.sink {
  animation-name: vfx-particle-sink;
}

@keyframes vfx-particle-sink {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.85;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translate(var(--vx), var(--vy)) scale(0.15);
    opacity: 0;
  }
}

/* 离场消散粒子：温柔向外飘散 + 先膨胀再淡出（尘雾散开感） */
.vfx-particle.dissipate {
  animation-name: vfx-particle-dissipate;
}

@keyframes vfx-particle-dissipate {
  0% {
    transform: translate(0, 0) scale(0.7);
    opacity: 0.65;
  }
  35% {
    transform: translate(calc(var(--vx) * 0.35), calc(var(--vy) * 0.35)) scale(1.2);
    opacity: 0.55;
  }
  100% {
    transform: translate(var(--vx), var(--vy)) scale(0);
    opacity: 0;
  }
}

/* 战败卡牌暗化：灰度化 + 降亮度 = 死亡褪色 */
@keyframes vfx-defeat-darken {
  0% { filter: grayscale(0) brightness(1); }
  100% { filter: grayscale(0.85) brightness(0.45); }
}