.motion-layer{height:100%;display:flex;align-items:flex-end;justify-content:center;flex:none;position:relative;transform-origin:50% 90%;will-change:transform}
.motion-layer .character-art{height:100%}
.hero:is([aria-pressed="true"],:hover):nth-child(1) .motion-layer{animation:rogue-step 3.6s ease-in-out infinite}
.hero:is([aria-pressed="true"],:hover):nth-child(2) .motion-layer{animation:druid-breathe 4.2s ease-in-out infinite}
.hero:is([aria-pressed="true"],:hover):nth-child(3) .motion-layer{animation:brute-stomp 3.8s ease-in-out infinite}
.hero:is([aria-pressed="true"],:hover):nth-child(4) .motion-layer{animation:wizard-hover 3.4s ease-in-out infinite}
.hero:is([aria-pressed="true"],:hover):nth-child(5) .motion-layer{animation:charmer-sway 4s ease-in-out infinite}
@keyframes rogue-step{0%,15%,100%{transform:translateX(0) rotate(0)}22%{transform:translateX(-8px) rotate(-2deg)}29%{transform:translateX(5px) rotate(1deg)}37%{transform:translateX(0) rotate(0)}}
@keyframes druid-breathe{0%,100%{transform:translateY(0) rotate(-1deg) scale(1)}50%{transform:translateY(-5px) rotate(1.5deg) scale(1.015)}}
@keyframes brute-stomp{0%,24%,44%,100%{transform:translateY(0) scaleY(1)}31%{transform:translateY(-8px) scaleY(1.01)}37%{transform:translateY(3px) scaleY(.985)}40%{transform:translateY(-2px) scaleY(1.005)}}
@keyframes wizard-hover{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes charmer-sway{0%,100%{transform:translateX(-2px) rotate(-1.5deg)}50%{transform:translateX(3px) rotate(1.5deg)}}
@media(prefers-reduced-motion:reduce){.motion-layer{animation:none!important;will-change:auto}}