/* Chrono-style battle choreography: stable anchors, travel, contact, and return. */

.combatant {
  translate: 0 0;
}

.battle-viewport .actor-layer {
  z-index: 2;
}

.battle-viewport .actor-layer:has(.aot-motion-active) {
  z-index: 5;
}

.combatant.aot-motion-active {
  z-index: 9;
  pointer-events: none;
  will-change: translate;
}

/* Keep hand-authored Cael attack and casting poses at their native scale. */
.combatant.acting.aot-motion-authored-pose {
  animation: none;
}

.combatant.aot-motion-active .party-sprite,
.combatant.aot-motion-active .enemy-sprite,
.combatant.aot-motion-active .enemy-sprite-fallback,
.combatant.aot-motion-active .enemy-body {
  will-change: transform;
}

.combatant .actor-nameplate {
  transition:
    opacity 150ms ease,
    translate 150ms ease;
}

.combatant.aot-motion-active .actor-nameplate {
  opacity: 0.18;
  translate: 0 5px;
}

.combatant.aot-motion-charge .party-sprite,
.combatant.aot-motion-charge .enemy-sprite,
.combatant.aot-motion-charge .enemy-body {
  filter:
    drop-shadow(0 8px 3px rgba(0, 0, 0, 0.36))
    drop-shadow(-8px 0 7px rgba(255, 202, 103, 0.24));
}

.combatant.aot-motion-cast,
.combatant.aot-motion-support {
  filter: brightness(1.08);
}

.combatant.aot-motion-reaction {
  z-index: 8;
}

.combatant.aot-motion-dodge {
  z-index: 8;
  filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 255, 255, 0.38));
}

.combatant.aot-motion-support-reaction {
  z-index: 7;
  filter: brightness(1.12) drop-shadow(0 0 9px rgba(121, 242, 192, 0.35));
}

.aot-motion-streak {
  --motion-angle: 0deg;
  --motion-life: 620ms;
  position: absolute;
  display: block;
  height: 4px;
  border-radius: 999px;
  opacity: 0;
  transform: rotate(var(--motion-angle)) scaleX(0.08);
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(248, 234, 190, 0.1) 12%,
    rgba(248, 234, 190, 0.72) 60%,
    transparent 100%
  );
  filter: blur(0.45px) drop-shadow(0 0 4px rgba(248, 218, 142, 0.44));
  animation: aot-motion-streak var(--motion-life) ease-out forwards;
  pointer-events: none;
}

.aot-motion-streak--charge {
  height: 7px;
  background: linear-gradient(90deg, transparent, rgba(255, 156, 75, 0.82), transparent);
  filter: blur(0.7px) drop-shadow(0 0 7px rgba(255, 132, 56, 0.54));
}

.aot-motion-streak--leap {
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(121, 242, 192, 0.76), transparent);
  filter: drop-shadow(0 0 5px rgba(121, 242, 192, 0.46));
}

.aot-motion-streak--multi,
.aot-motion-streak--combo {
  height: 5px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 117, 91, 0.22) 20%,
    rgba(255, 231, 163, 0.9) 70%,
    transparent
  );
  filter: drop-shadow(0 0 6px rgba(255, 109, 80, 0.5));
}

.aot-motion-projectile {
  --motion-projectile-dx: 0px;
  --motion-projectile-dy: 0px;
  --motion-projectile-angle: 0deg;
  --motion-projectile-delay: 90ms;
  --motion-projectile-life: 420ms;
  --motion-projectile-color: #f2dfaa;
  position: absolute;
  z-index: 9;
  display: block;
  width: clamp(30px, 5vw, 58px);
  height: 4px;
  border-radius: 999px;
  opacity: 0;
  translate: 0 0;
  transform: translate(-50%, -50%) rotate(var(--motion-projectile-angle));
  transform-origin: center;
  color: var(--motion-projectile-color);
  background: linear-gradient(90deg, transparent, currentColor 42%, #fff 78%, currentColor);
  box-shadow: 0 0 7px currentColor;
  animation: aot-motion-projectile var(--motion-projectile-life) linear var(--motion-projectile-delay) both;
  pointer-events: none;
}

.aot-motion-projectile::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  filter: drop-shadow(0 0 4px currentColor);
}

.aot-motion-projectile--cast {
  width: 34px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 78% 50%, #fff 0 14%, currentColor 28%, transparent 72%);
  box-shadow: 0 0 12px currentColor;
}

/* Katia's ordinary wooden arrow, distinct from elemental magic projectiles. */
.aot-motion-projectile--arrow {
  width: 38px;
  height: 2px;
  background: #b8874c;
  color: #e4dbc5;
  box-shadow: 0 1px 1px #21170c;
  border-radius: 0;
}
.aot-motion-projectile--arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 10px;
  height: 8px;
  background: #eee4cd;
  clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%, 25% 50%);
}
.aot-motion-projectile--arrow::after {
  border: 0;
  background: #dedccf;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 25% 50%);
  transform: translateY(-50%);
  filter: none;
}

.aot-motion-projectile--cast::after {
  right: -2px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translateY(-50%);
}

.aot-motion-projectile-hit {
  --motion-projectile-hit-delay: 0ms;
  --motion-projectile-color: #f2dfaa;
  position: absolute;
  z-index: 10;
  width: 28px;
  height: 28px;
  border: 3px solid var(--motion-projectile-color);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  box-shadow:
    0 0 7px #fff,
    0 0 14px var(--motion-projectile-color);
  animation: aot-motion-projectile-hit 260ms ease-out var(--motion-projectile-hit-delay) both;
  pointer-events: none;
}

.aot-motion-projectile-hit::before,
.aot-motion-projectile-hit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: translate(-50%, -50%);
}

.aot-motion-projectile-hit::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.aot-motion-projectile-hit--cast {
  border-style: double;
  box-shadow:
    inset 0 0 10px var(--motion-projectile-color),
    0 0 16px var(--motion-projectile-color);
}

@keyframes aot-motion-streak {
  0% {
    opacity: 0;
    transform: rotate(var(--motion-angle)) scaleX(0.06);
  }
  20% {
    opacity: 0.72;
  }
  58% {
    opacity: 0.42;
    transform: rotate(var(--motion-angle)) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--motion-angle)) scaleX(0.68);
  }
}

@keyframes aot-motion-projectile {
  0% {
    opacity: 0;
    translate: 0 0;
    filter: brightness(1);
  }
  10% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: var(--motion-projectile-dx) var(--motion-projectile-dy);
    filter: brightness(1.8);
  }
}

@keyframes aot-motion-projectile-hit {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18) rotate(-20deg);
  }
  32% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35) rotate(12deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aot-motion-streak {
    display: none;
  }

  .aot-motion-projectile {
    display: none;
  }

  .aot-motion-projectile-hit {
    display: none;
  }

  .combatant.aot-motion-active .actor-nameplate {
    opacity: 0.55;
    translate: 0 0;
  }
}