/* ============================================
 * animations.css · 全局动效
 * ============================================ */

/* 联动线绘制
 * 用 SVG <line> + 颜色 + 微光滤镜, hover 时显形
 */
@keyframes dash {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -20; }
}

.chain-line {
  stroke-dasharray: 6 5;
  animation: dash .7s linear infinite;
  filter: drop-shadow(0 0 4px currentColor);
  opacity: .9;
}

/* stat counter */
@keyframes countUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-num { animation: countUp .4s ease-out; }

/* 翻卡粒子爆发 */
.burst-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -50%);
  animation: burst 1.1s cubic-bezier(.16,1,.3,1) forwards;
  box-shadow: 0 0 10px currentColor;
}
@keyframes burst {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  15% {
    transform: translate(calc(-50% + var(--dx) * 0.18), calc(-50% + var(--dy) * 0.18)) scale(1.4);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0);
    opacity: 0;
  }
}

/* ============================================
 * 拆包剧场 (轻量版)
 * 触发条件: 每个联动组首次翻开
 * 动画: 卡片飞向屏幕中央 → 居中放大停留 → 飞回原位
 *
 * 实现策略 (本次):
 * - 完全用 Web Animations API (element.animate) 控制 transform
 * - 不依赖 CSS class 控制 transform (避免 Chrome 对 transform 中 var() 的兼容性坑)
 * - 不依赖 CSS transition (避免批处理 + 字符串解析坑)
 * - 不依赖 CSS animation (避免 class 移除撤销的坑)
 * - WAAPI fill: 'forwards' 保留最后一帧, animation.cancel() 撤销
 * ============================================ */

/* 仅暗化效果 */
.flip-card.is-theater-dim {
  filter: brightness(.4) saturate(.5);
  opacity: .35;
  transform: scale(.92);
  transition: filter 300ms ease-out, opacity 300ms ease-out, transform 300ms ease-out;
  pointer-events: none;
}

/* 剧场中的卡片: WAAPI 会设置 z-index, 但 inline style 比 class 优先级高 */
/* 留个 class 兜底, 万一 inline 失效 */
.flip-card.is-theater-active {
  z-index: 100;
  pointer-events: none;
}