.fighter {
  transition: bottom 0.2s;
  will-change: left;
}

.fighter.enemy {
  transition: left 0.12s linear, bottom 0.2s;
}

.fighter-facing,
.fighter-body {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 92%;
}

.fighter-facing {
  z-index: 2;
}

.fighter.player.facing-left .fighter-facing,
.fighter.enemy.facing-right .fighter-facing {
  transform: scaleX(-1);
}

.fighter.player.run-left img {
  transform: none;
}

.fighter.moving .fighter-body {
  animation: runBody 0.34s linear infinite;
}

.fighter.moving img {
  animation: runStride 0.34s steps(2, end) infinite;
}

.step-shadow {
  position: absolute;
  z-index: 1;
  left: 22%;
  right: 22%;
  bottom: 4%;
  height: 7%;
  border-radius: 50%;
  background: #142b3e70;
  filter: blur(2px);
  transform-origin: center;
}

.fighter.moving .step-shadow {
  animation: runShadow 0.34s linear infinite;
}

.run-dust {
  position: absolute;
  z-index: 3;
  left: 48%;
  bottom: 7%;
  width: 42%;
  height: 18%;
  pointer-events: none;
}

.fighter.facing-left .run-dust {
  left: 10%;
  transform: scaleX(-1);
}

.run-dust i {
  position: absolute;
  left: 5%;
  bottom: 0;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 48% 52% 45% 55%;
  background: #d9d2b4aa;
  box-shadow: 12px -5px 0 -4px #e9e0c5aa;
  opacity: 0;
}

.fighter.moving .run-dust i {
  animation: dustStep 0.34s ease-out infinite;
}

.fighter.moving .run-dust i:nth-child(2) {
  left: 36%;
  animation-delay: -0.17s;
}

.fighter.airborne .run-dust,
.fighter.airborne .step-shadow {
  opacity: 0;
}

@keyframes runBody {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg) scaleY(0.98);
  }
  18% {
    transform: translateY(-3.5%) rotate(1deg) scaleY(1.01);
  }
  38% {
    transform: translateY(-6%) rotate(4deg) scaleY(1.025);
  }
  50% {
    transform: translateY(-1%) rotate(1deg) scaleY(0.965);
  }
  68% {
    transform: translateY(-3.5%) rotate(-1deg) scaleY(1.01);
  }
  88% {
    transform: translateY(-6%) rotate(-4deg) scaleY(1.025);
  }
}

@keyframes runStride {
  0%,
  100% {
    transform: translateX(-1.5%);
    filter: drop-shadow(0 8px 3px #182a4255);
  }
  50% {
    transform: translateX(1.5%);
    filter: drop-shadow(0 12px 3px #182a4238);
  }
}

@keyframes runShadow {
  0%,
  50%,
  100% {
    transform: scaleX(1.12) scaleY(0.82);
    opacity: 0.68;
  }
  25%,
  75% {
    transform: scaleX(0.78) scaleY(0.62);
    opacity: 0.38;
  }
}

@keyframes dustStep {
  0%,
  45% {
    opacity: 0;
    transform: translate(0, 0) scale(0.25);
  }
  52% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translate(-145%, -55%) scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fighter.moving .fighter-body,
  .fighter.moving img,
  .fighter.moving .step-shadow,
  .fighter.moving .run-dust i {
    animation-duration: 0.68s;
  }
}