/* Two photographic poses share one anchored footprint. */
.stage{isolation:isolate;overflow:visible}
.cat,.bag{display:block;object-fit:initial;pointer-events:none}
.cat{aspect-ratio:.86;transform-origin:35% 92%}
.bag{aspect-ratio:.88;transform-origin:55% 92%}
.sprite{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;user-select:none;-webkit-user-drag:none}
.cat .strike{width:125%;max-width:none;left:-9%;object-position:center bottom}
.strike{opacity:0}
/* Match the softer colour of the original idle photos at contact. */
.cat .sprite{filter:saturate(.9) contrast(.98) brightness(1.01)}
.bag .strike{filter:saturate(.78) contrast(.97) brightness(1.01)}
.stage.striking .cat{animation:catPunch var(--combat-duration,460ms) linear both}
.stage.striking .bag{animation:bagSquash var(--combat-duration,460ms) linear both}
.stage.striking{animation:contactShake var(--combat-duration,460ms) linear both}
.stage.striking.poses-ready .strike{animation:showStrike var(--combat-duration,460ms) steps(1,end) both}
.stage.striking.poses-ready .idle{animation:hideIdle var(--combat-duration,460ms) steps(1,end) both}
@keyframes showStrike{0%,23%{opacity:0}24%,72%{opacity:1}73%,100%{opacity:0}}
@keyframes hideIdle{0%,23%{opacity:1}24%,72%{opacity:0}73%,100%{opacity:1}}
@keyframes catPunch{
 0%{transform:translate(0,0) rotate(0)}
 18%{transform:translate(-10px,3px) rotate(-9deg) scale(.98,1.02)}
 30%{transform:translate(var(--punch-x,27px),var(--punch-y,-5px)) rotate(var(--punch-r,5deg)) scale(1.04,.98)}
 42%{transform:translate(var(--punch-x,27px),var(--punch-y,-5px)) rotate(var(--punch-r,5deg)) scale(1.04,.98)}
 60%{transform:translate(12px,0) rotate(2deg)}
 78%{transform:translate(-5px,1px) rotate(-3deg)}
 100%{transform:translate(0,0) rotate(0)}
}
@keyframes bagSquash{
 0%,25%{transform:translate(0,0) rotate(0) skewX(0) scale(1)}
 31%,42%{transform:translate(var(--bag-x,13px),2px) rotate(var(--bag-r,8deg)) skewX(-7deg) scale(.89,1.05)}
 53%{transform:translate(5px,-3px) rotate(-5deg) skewX(5deg) scale(1.055,.95)}
 67%{transform:translate(7px,1px) rotate(4deg) skewX(-3deg) scale(.96,1.025)}
 82%{transform:translate(1px,0) rotate(-2deg) skewX(1deg) scale(1.015,.99)}
 100%{transform:translate(0,0) rotate(0) skewX(0) scale(1)}
}
@keyframes contactShake{
 0%,27%,70%,100%{transform:translate(0,0)}
 31%{transform:translate(-4px,2px)}
 36%{transform:translate(4px,-2px)}
 42%{transform:translate(-3px,1px)}
 49%{transform:translate(2px,-1px)}
 57%{transform:translate(-1px,0)}
}
@media(prefers-reduced-motion:reduce){
 .stage.striking,.stage.striking .cat,.stage.striking .bag{animation:none}
 .stage.striking.poses-ready .strike,.stage.striking.poses-ready .idle{animation-duration:180ms}
}