/* idle by character (pets.js). transforms compose with the seal's own placement of the pet group. the box is the pet's
   silhouette; origins are where the pet stands or hangs. every loop is mostly rest: the act is a short cue inside it. */
.pet{transform-box:fill-box;transform-origin:50% 100%;animation-timing-function:ease-in-out;animation-iteration-count:infinite;will-change:transform}

/* puddle: sits, then a grumpy shudder, a hmph */
.pet.grumble{animation-name:grumble}
@keyframes grumble{0%,78%{transform:none}80%{transform:scale(1.06,.94)}83%{transform:scale(.97,1.03) translateX(-2px)}86%{transform:scale(1.05,.95) translateX(2px)}89%{transform:scale(.99,1.01) translateX(-1px)}92%,100%{transform:none}}

/* dabble: floats on the water, a slow bob and lean */
.pet.bob{transform-origin:50% 60%;animation-name:bob}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-4px) rotate(1.8deg)}}

/* scoot: a long yawn, stretched up from the foot, then settles */
.pet.yawn{animation-name:yawn}
@keyframes yawn{0%,66%{transform:none}74%{transform:scale(.95,1.11)}84%{transform:scale(.96,1.1)}91%{transform:scale(1.04,.96)}96%,100%{transform:none}}

/* blub: swims on the spot, a sway with a lean into it */
.pet.swim{transform-origin:50% 50%;animation-name:swim}
@keyframes swim{0%,100%{transform:translateX(-4px) rotate(2.5deg)}50%{transform:translateX(4px) rotate(-2.5deg)}}

/* thump: still, then a burst of trembling */
.pet.tremble{animation-name:tremble;animation-timing-function:linear}
@keyframes tremble{0%,55%{transform:none}56%{transform:translateX(1.3px)}57%{transform:translateX(-1.3px)}58%{transform:translateX(1.2px)}59%{transform:translateX(-1.2px)}60%{transform:translateX(1.1px) scale(.99,1.01)}61%{transform:translateX(-1.1px)}62%{transform:translateX(1px)}63%{transform:translateX(-1px)}64%{transform:translateX(.8px)}65%{transform:translateX(-.8px)}66%{transform:translateX(.5px)}67%,100%{transform:none}}

/* inky: a jelly wobble, tentacles and all */
.pet.wobble{animation-name:wobble}
@keyframes wobble{0%,100%{transform:rotate(-2.5deg) scale(1.02,.98)}50%{transform:rotate(2.5deg) scale(.98,1.02)}}

/* frill: breathes */
.pet.breathe{transform-origin:50% 70%;animation-name:breathe}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035,1.03)}}

/* flit: printed hanging upside down already (the MJ pose); it swings from the feet */
.pet.hang{transform-origin:50% 0%;animation-name:hang}
@keyframes hang{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* snuff: ducks under the ground, peeks, comes back up */
.pet.hide{animation-name:hide;animation-timing-function:cubic-bezier(.34,1.25,.64,1)}
@keyframes hide{0%,52%{transform:translateY(0)}58%{transform:translateY(72%)}66%{transform:translateY(72%)}70%{transform:translateY(46%)}74%{transform:translateY(50%)}80%{transform:translateY(72%)}88%,100%{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){.pet{animation:none}}