/* ============================================================
   styles/animations.css — 动画效果（独立文件，方便反复调参）
   ============================================================ */

/* ---------------- 马 · 位移 / 悬停 / 吃子 ---------------- */

.piece--knight {
  /* 绝对定位 + 四边 0 + margin:auto → 在自己格子里水平/垂直居中，
     并且脱离 flex 流，不会和同格的兵并排 */
  position: absolute;
  inset: 0;
  margin: auto;

  z-index: 10;
  translate: var(--kx, 0) var(--ky, 0);
  transition:
    translate 500ms cubic-bezier(.2, .9, .3, 1.15),
    transform 50ms linear;
  will-change: translate, transform;
}

/* ---------------- 兵 · 碎裂像素 ---------------- */

.pixel {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  border-radius: 1px;
  will-change: transform, opacity;
}