/* Short, finite composited animation. No full-screen flashes or camera shake. */
.battle-motion{position:absolute;inset:0;z-index:30;pointer-events:none;overflow:hidden;contain:layout paint;background:linear-gradient(180deg,rgba(31,24,20,.7),rgba(31,24,20,.12) 40%,rgba(31,24,20,.72));color:#fff0c6;font-family:serif;text-align:center}
.battle-motion-title{position:absolute;top:8%;left:4%;right:4%;font-size:clamp(18px,3.8vw,42px);font-weight:800;text-shadow:0 2px 4px #201c15;letter-spacing:.12em}
.battle-motion-arena{position:absolute;inset:18% 5% 12%}
.battle-motion-actor{position:absolute;left:15%;bottom:0;width:30%;height:100%;transform-origin:50% 95%;animation:tf-strike 1000ms ease-out both}
.battle-motion-actor img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 8px 5px #1b170d70)}
.battle-motion-pose{opacity:0;animation:tf-pose 1000ms both}.has-strike-pose .battle-motion-idle{animation:tf-idle 1000ms both}
.battle-motion-target{position:absolute;left:66%;bottom:1%;height:79%;width:17%;transform-origin:50% 100%;opacity:.8}
.battle-motion-head{position:absolute;left:30%;top:0;width:40%;height:22%;border-radius:50%;background:#252a30;border:2px solid #baac83}
.battle-motion-body{position:absolute;inset:20% 4% 0;background:linear-gradient(100deg,#444951,#171e26);border:2px solid #a39675;border-radius:35% 35% 10% 10%;clip-path:polygon(25% 0,75% 0,100% 35%,78% 43%,94% 100%,55% 100%,50% 70%,45% 100%,6% 100%,22% 43%,0 35%)}
.battle-motion[data-hit="true"] .battle-motion-target{animation:tf-recoil 1000ms both}
.battle-motion[data-frozen="true"] .battle-motion-target{filter:drop-shadow(0 0 10px #a4dcf2)}
.training-dummy .battle-motion-head{border-radius:10%;background:#a97b49}.training-dummy .battle-motion-body{background:#8e6640}
.battle-motion-wave{position:absolute;left:40%;top:24%;width:30%;height:45%;opacity:0;animation:tf-wave 1000ms ease-out both}
.battle-motion-wave i{position:absolute;inset:0;border-right:5px solid #f6d384;border-radius:50%;transform:translateX(-25%)}.battle-motion-wave i:nth-child(2){inset:12%;transform:translateX(0)}.battle-motion-wave i:nth-child(3){inset:24%;transform:translateX(35%)}
.battle-motion[data-move="point"] .battle-motion-wave{height:14%;top:31%;width:30%}.battle-motion[data-move="point"] .battle-motion-wave i{border-right:0;border-top:3px solid #c5e7f0;border-radius:0;transform:rotate(-3deg)}
.battle-motion[data-move="support"] .battle-motion-wave,.battle-motion[data-move="scholar"] .battle-motion-wave{left:25%;width:15%;border:2px solid #dac493;border-radius:50%}.battle-motion[data-move="support"] .battle-motion-wave i,.battle-motion[data-move="scholar"] .battle-motion-wave i{display:none}
.battle-motion-result{position:absolute;bottom:3%;left:3%;right:3%;font-size:clamp(12px,1.8vw,20px);font-weight:700;text-shadow:0 2px 3px #000;animation:tf-result 1000ms both}
.battle-motion[data-outcome="victory"] .battle-motion-title{color:#ffe08b}.battle-motion[data-outcome="victory"] .battle-motion-target{animation:tf-defeat 1000ms both}
@keyframes tf-strike{0%,12%{transform:translateX(0) rotate(0)}25%{transform:translateX(-6%) rotate(-5deg)}42%,58%{transform:translateX(35%) rotate(5deg)}80%,100%{transform:translateX(0) rotate(0)}}
@keyframes tf-pose{0%,29%{opacity:0}30%,68%{opacity:1}69%,100%{opacity:0}}
@keyframes tf-idle{0%,29%{opacity:1}30%,68%{opacity:0}69%,100%{opacity:1}}
@keyframes tf-recoil{0%,40%{transform:translateX(0) rotate(0)}52%,62%{transform:translateX(15%) rotate(9deg)}90%,100%{transform:translateX(0) rotate(0)}}
@keyframes tf-wave{0%,31%{opacity:0;transform:scale(.4) translateX(-30%)}43%{opacity:.95}68%{opacity:0;transform:scale(1.3) translateX(40%)}100%{opacity:0}}
@keyframes tf-result{0%,55%{opacity:0;transform:translateY(6px)}70%,100%{opacity:1;transform:translateY(0)}}
@keyframes tf-defeat{0%,40%{transform:none;opacity:.8}75%,100%{transform:translateX(18%) rotate(16deg);opacity:.15}}
.motion-reduced *{animation:none!important}.motion-reduced .battle-motion-pose,.motion-reduced .battle-motion-wave{display:none}.motion-reduced .battle-motion-idle,.motion-reduced .battle-motion-result{opacity:1}
@media(prefers-reduced-motion:reduce){.battle-motion *{animation:none!important}.battle-motion-pose,.battle-motion-wave{display:none}.battle-motion-idle,.battle-motion-result{opacity:1}}
@media(max-width:600px){.battle-motion-title{top:7%;font-size:20px}.battle-motion-arena{inset:21% 0 15%}.battle-motion-actor{left:10%;width:36%}.battle-motion-result{font-size:12px}}

.battle-motion[data-outcome="defeat"] .battle-motion-actor{animation:tf-player-defeat 1000ms both}.battle-motion[data-move="enemy"] .battle-motion-wave{display:none}
@keyframes tf-player-defeat{0%,25%{transform:none}42%{transform:translateX(20%) rotate(3deg)}75%,100%{transform:translateX(-12%) rotate(-10deg);opacity:.6}}