/* One silhouette scale and ground line for the five campaign opponents. */
.action-fighter--enemy #combat-enemy-image {
  width: clamp(124px, 17vw, 230px) !important;
  height: clamp(124px, 17vw, 230px) !important;
  margin: 0 auto -26px !important;
  border: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
  background: var(--enemy-art, url('../assets/spideytracker/street-thug-minion.png')) center bottom / contain no-repeat !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(5px 7px 0 rgba(0, 0, 0, .65));
  transform-origin: 50% 90%;
  will-change: transform, filter;
}

.action-fighter--enemy #combat-enemy-image::before,
.action-fighter--enemy #combat-enemy-image b { display: none !important; }

.action-fighter--enemy #combat-enemy-image[data-motion="idle"] {
  animation: enemy-breathe 1.15s steps(3, end) infinite;
}
.action-fighter--enemy #combat-enemy-image[data-motion="enter"] {
  animation: enemy-enter .55s steps(5, end) both;
}
.action-fighter--enemy #combat-enemy-image[data-motion="hurt"] {
  animation: enemy-hurt .44s steps(4, end) both;
}
.action-fighter--enemy #combat-enemy-image[data-motion="attack"] {
  animation: enemy-attack .52s steps(5, end) both;
}
.action-fighter--enemy #combat-enemy-image[data-motion="phase"] {
  animation: enemy-phase .65s steps(5, end) both;
}
.action-fighter--enemy #combat-enemy-image[data-motion="defeat"] {
  animation: enemy-defeat .8s steps(6, end) both;
}
.action-fighter--enemy.enemy--boss #combat-enemy-image {
  filter: drop-shadow(0 0 10px rgba(136, 248, 94, .5)) drop-shadow(6px 8px 0 rgba(0, 0, 0, .65));
}
.action-fighter--enemy.enemy--boss #combat-enemy-image[data-motion="idle"] {
  animation: enemy-hover 1.4s steps(4, end) infinite;
}

@keyframes enemy-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.025, .985); }
}
@keyframes enemy-hover {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}
@keyframes enemy-enter {
  0% { transform: translate(32px, -16px) scale(.78); opacity: 0; }
  70% { transform: translate(-4px, 1px) scale(1.06); opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes enemy-hurt {
  0%, 100% { transform: translateX(0); filter: brightness(1); }
  25% { transform: translateX(12px) rotate(5deg); filter: brightness(2.6); }
  55% { transform: translateX(-5px) rotate(-3deg); filter: brightness(1.35); }
}
@keyframes enemy-attack {
  0%, 100% { transform: translateX(0) rotate(0); }
  35% { transform: translateX(-16px) rotate(-6deg); }
  65% { transform: translateX(-26px) rotate(4deg) scale(1.07); }
}
@keyframes enemy-phase {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  45% { transform: translateY(-12px) scale(1.16); filter: brightness(2) hue-rotate(24deg); }
}
@keyframes enemy-defeat {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(30px) rotate(18deg) scale(.82); opacity: .15; }
}

body.game-reduce-motion .action-fighter--enemy #combat-enemy-image {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .action-fighter--enemy #combat-enemy-image { animation: none !important; }
}

/* Notion artwork replaces the local silhouette when the database has an image. */
.action-fighter--enemy #combat-enemy-image.has-notion-art {
  background: transparent !important;
  border: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
}
.action-fighter--enemy #combat-enemy-image.has-notion-art img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
  filter: drop-shadow(5px 7px 0 rgba(0, 0, 0, .65)) !important;
}