/* Emotion poses for monsterArt. The body pivots at the sprite's feet; marks animate around their own centres. */
.monster-art .monster-body{transform-box:view-box;transform-origin:200px 440px}
.monster-art .emotion-mark{transform-box:fill-box;transform-origin:50% 50%;animation:emotion-bob 2.4s ease-in-out infinite;animation-delay:calc(var(--mark-index,0) * -.35s)}

.monster-art[data-emotion=happy] .monster-body{animation:emotion-hop 1.6s ease-in-out infinite}
.monster-art[data-emotion=happy] .emotion-mark-sparkle{animation:emotion-twinkle 1.6s ease-in-out infinite;animation-delay:calc(var(--mark-index,0) * -.5s)}

.monster-art[data-emotion=love] .monster-body{animation:emotion-sway 3s ease-in-out infinite}
.monster-art[data-emotion=love] .emotion-mark-heart{animation:emotion-float 2.4s ease-in-out infinite;animation-delay:calc(var(--mark-index,0) * -.7s)}

.monster-art[data-emotion=sad]{filter:saturate(.72) brightness(.97)}
.monster-art[data-emotion=sad] .monster-body{transform:scale(1.03,.95);animation:none}
.monster-art[data-emotion=sad] .emotion-mark-tear{animation:emotion-drip 2.2s ease-in infinite}

.monster-art[data-emotion=surprised] .monster-body{animation:emotion-jolt 1.8s ease-out infinite}
.monster-art[data-emotion=surprised] .emotion-mark{animation:emotion-pop 1.8s ease-out infinite}

.monster-art[data-emotion=sleepy]{filter:saturate(.85)}
.monster-art[data-emotion=sleepy] .monster-body{animation:emotion-breathe 4s ease-in-out infinite}
.monster-art[data-emotion=sleepy] .emotion-mark-z{animation:emotion-drift 3s ease-in-out infinite;animation-delay:calc(var(--mark-index,0) * -1s)}

.monster-art[data-emotion=angry] .monster-body{animation:emotion-shake .5s linear infinite}
.monster-art[data-emotion=angry] .emotion-mark-vein{animation:emotion-throb .7s ease-in-out infinite}
.monster-art[data-emotion=angry] .emotion-mark-steam{animation:emotion-puff 1.4s ease-out infinite;animation-delay:calc(var(--mark-index,0) * -.7s)}

/* Shy stays upright so the blush stays on the cheeks; it shrinks in a little instead. */
.monster-art[data-emotion=shy] .monster-body{transform:scale(1.02,.97);animation:emotion-fidget 3.2s ease-in-out infinite}

.monster-art[data-emotion=worried] .monster-body{animation:emotion-wobble 1.4s ease-in-out infinite}
.monster-art[data-emotion=worried] .emotion-mark-sweat{animation:emotion-drip 2.6s ease-in infinite}

.monster-art[data-emotion=confused] .monster-body{transform:rotate(-7deg);animation:emotion-tilt 3s ease-in-out infinite}

@keyframes emotion-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes emotion-hop{0%,60%,100%{transform:none}20%{transform:translateY(-14px) scale(.98,1.03)}40%{transform:scale(1.04,.95)}}
@keyframes emotion-twinkle{0%,100%{transform:scale(.8) rotate(0);opacity:.7}50%{transform:scale(1.15) rotate(20deg);opacity:1}}
@keyframes emotion-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes emotion-float{0%{transform:translateY(6px) scale(.85);opacity:0}25%{opacity:1}100%{transform:translateY(-18px) scale(1.05);opacity:0}}
@keyframes emotion-drip{0%{transform:translateY(-4px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(22px);opacity:0}}
@keyframes emotion-jolt{0%{transform:none}8%{transform:translateY(-18px) scale(.96,1.06)}18%{transform:scale(1.05,.95)}28%,100%{transform:none}}
@keyframes emotion-pop{0%{transform:scale(.4);opacity:0}10%{transform:scale(1.2);opacity:1}22%,85%{transform:scale(1);opacity:1}100%{opacity:0}}
@keyframes emotion-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.97)}}
@keyframes emotion-drift{0%{transform:translate(0,6px) scale(.8);opacity:0}30%{opacity:1}100%{transform:translate(8px,-14px) scale(1.05);opacity:0}}
@keyframes emotion-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(3px) rotate(1deg)}}
@keyframes emotion-throb{0%,100%{transform:scale(.9)}50%{transform:scale(1.15)}}
@keyframes emotion-puff{0%{transform:translateY(4px) scale(.6);opacity:0}30%{opacity:1}100%{transform:translateY(-12px) scale(1.1);opacity:0}}
@keyframes emotion-fidget{0%,100%{transform:scale(1.02,.97)}50%{transform:scale(1.04,.95)}}
@keyframes emotion-wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-2.5deg)}75%{transform:rotate(2.5deg)}}
@keyframes emotion-tilt{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(-3deg)}}

/* Still frames keep each emotion readable: the marks and the resting pose stay, only the motion stops. */
@media(prefers-reduced-motion:reduce){
 .monster-art .emotion-mark,.monster-art[data-emotion] .monster-body{animation:none!important}
 .monster-art[data-emotion] .emotion-mark{opacity:1}
}
[data-message-effects=off] .monster-art .emotion-mark,[data-message-effects=off] .monster-art[data-emotion] .monster-body{animation:none!important}