/* Battlefield motion: idle breathing, attack lunges and hit reactions.
   Durations must match MOTION_MS in combat-motion.mjs.
   --dir points toward the opponent: +1 for the player (faces right), -1 for enemies. */

.battlefield-sprite { --dir: -1; }
.battlefield-player { --dir: 1; }

.battlefield-sprite > .sprite-action,
.sprite-action > .sprite-react {
  display: grid;
  place-items: end center;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  will-change: transform;
}
.sprite-react > img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation: sprite-idle 3.2s ease-in-out infinite;
  animation-delay: var(--idle-delay, 0ms);
}
.battlefield-sprite.defeated .sprite-react > img { animation: none; }

@keyframes sprite-idle {
  0%, 100% { transform: scale(1, 1) translateY(0); }
  50%      { transform: scale(1.008, 1.02) translateY(-.4%); }
}

/* Attacker */
.sprite-action.motion-lunge { animation: motion-lunge 460ms cubic-bezier(.3, .7, .3, 1) both; }
.sprite-action.motion-lunge-crit { animation: motion-lunge-crit 560ms cubic-bezier(.3, .7, .3, 1) both; }

@keyframes motion-lunge {
  0%   { transform: none; }
  20%  { transform: translateX(calc(var(--dir) * -4%)) rotate(calc(var(--dir) * -3deg)); }
  45%  { transform: translateX(calc(var(--dir) * 17%)) rotate(calc(var(--dir) * 5deg)); }
  62%  { transform: translateX(calc(var(--dir) * 15%)) rotate(calc(var(--dir) * 2deg)); }
  100% { transform: none; }
}
@keyframes motion-lunge-crit {
  0%   { transform: none; }
  22%  { transform: translateX(calc(var(--dir) * -7%)) translateY(1%) rotate(calc(var(--dir) * -5deg)) scale(1.02); }
  45%  { transform: translateX(calc(var(--dir) * 26%)) translateY(-5%) rotate(calc(var(--dir) * 7deg)) scale(1.05); }
  60%  { transform: translateX(calc(var(--dir) * 23%)) translateY(0) rotate(calc(var(--dir) * 3deg)) scale(1.03); }
  100% { transform: none; }
}

/* Target */
.sprite-react.motion-hit { animation: motion-hit 520ms ease-out both; }
.sprite-react.motion-hit-crit { animation: motion-hit-crit 620ms ease-out both; }
.sprite-react.motion-dodge { animation: motion-dodge 480ms ease-in-out both; }
.sprite-react.motion-block { animation: motion-block 460ms ease-out both; }

@keyframes motion-hit {
  0%, 40% { transform: none; filter: none; }
  48%     { transform: translateX(calc(var(--dir) * -7%)) rotate(calc(var(--dir) * -3deg)); filter: brightness(2) sepia(.9) saturate(5) hue-rotate(-35deg); }
  62%     { transform: translateX(calc(var(--dir) * -5%)) rotate(calc(var(--dir) * -1deg)); filter: brightness(1.25) sepia(.3) saturate(2) hue-rotate(-35deg); }
  100%    { transform: none; filter: none; }
}
@keyframes motion-hit-crit {
  0%, 36% { transform: none; filter: none; }
  42%     { transform: translateX(calc(var(--dir) * -12%)) rotate(calc(var(--dir) * -6deg)); filter: brightness(2.6) sepia(1) saturate(6) hue-rotate(-35deg); }
  50%     { transform: translateX(calc(var(--dir) * -9%)) translateY(-1%) rotate(calc(var(--dir) * 2deg)); }
  58%     { transform: translateX(calc(var(--dir) * -11%)) rotate(calc(var(--dir) * -3deg)); filter: brightness(1.4) sepia(.4) saturate(2.5) hue-rotate(-35deg); }
  100%    { transform: none; filter: none; }
}
@keyframes motion-dodge {
  0%, 22% { transform: none; }
  45%     { transform: translateX(calc(var(--dir) * -11%)) translateY(-3%) rotate(calc(var(--dir) * -4deg)); }
  65%     { transform: translateX(calc(var(--dir) * -9%)) translateY(0); }
  100%    { transform: none; }
}
@keyframes motion-block {
  0%, 40% { transform: none; filter: none; }
  48%     { transform: translateX(calc(var(--dir) * -3%)) scale(.97, 1.02); filter: brightness(1.5) saturate(.6); }
  60%     { transform: translateX(calc(var(--dir) * -2%)) scale(.99, 1.01); filter: none; }
  100%    { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sprite-action, .sprite-react, .sprite-react > img { animation: none !important; }
}