/* The pet's joints. Every layer sits on the graphics card, so moving one costs almost nothing. */
.pet3 { position: relative; width: 100%; padding-bottom: 110.34%; }
.pet3 .p, .pet3 .p-root, .pet3 .p-shade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.pet3 svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pet3 .p-root, .pet3 .p-body, .pet3 .p-head, .pet3 .p-armL, .pet3 .p-armR, .pet3 .p-legL, .pet3 .p-legR, .pet3 .p-tail, .pet3 .p-earL, .pet3 .p-earR, .pet3 .p-torso { will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pet3 .p-root { transform-origin: 50% 90%; }
.pw { position: absolute; font-size: calc(var(--pet-w, 300px) * .27); line-height: 1; transform: translate(-50%, 0); }
.pw.sm { font-size: calc(var(--pet-w, 300px) * .16); }

/* the face */
.pet3 .e, .pet3 .m { display: none; }
.pet3 .e-open, .pet3 .m-smile { display: inline; }
.pet3 .e-open { animation: blink-open 4.6s steps(1) infinite; }
.pet3 .e-shut { display: inline; opacity: 0; animation: blink-shut 4.6s steps(1) infinite; }
@keyframes blink-open { 0%, 96% { opacity: 1; } 97%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes blink-shut { 0%, 96% { opacity: 0; } 97%, 99% { opacity: 1; } 100% { opacity: 0; } }
.face-joy .e-open, .face-joy .e-shut, .face-sleep .e-open, .face-brow .e-open, .face-brow .e-shut { display: none; animation: none; }
.face-sleep .e-shut { display: inline; opacity: 1; animation: none; }
.face-joy .e-joy, .face-brow .e-brow { display: inline; }
.mouth-open .m-smile, .mouth-chew .m-smile, .mouth-yuck .m-smile, .mouth-yawn .m-smile, .mouth-lick .m-smile { display: none; }
.mouth-open .m-open, .mouth-chew .m-chew, .mouth-yuck .m-yuck, .mouth-yawn .m-yawn, .mouth-lick .m-lick { display: inline; }
.m-chew .chew { transform-box: fill-box; transform-origin: center; animation: chew .3s ease-in-out infinite; }
@keyframes chew { 50% { transform: scaleY(.3); } }

/* idle: breathing, an ear flick, a tail that won't sit still */
.st-idle .p-body { animation: breathe 3.4s ease-in-out infinite; }
.st-idle .p-head { animation: head-idle 6s ease-in-out infinite; }
.st-idle .p-armL { animation: arm-idle 3.4s ease-in-out infinite; }
.st-idle .p-armR { animation: arm-idle-r 3.4s ease-in-out infinite; }
.st-idle .p-earL { animation: ear-flick 7s ease-in-out infinite; }
.st-idle .p-earR { animation: ear-flick-r 9s ease-in-out infinite; }
.st-idle .p-tail { animation: tail-wag 2.2s ease-in-out infinite; }
.pet3[data-type=puppy].st-idle .p-tail { animation-duration: .5s; }
@keyframes breathe { 50% { transform: translateY(.9%) scale(1.012, .985); } }
@keyframes head-idle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2.5deg); } 70% { transform: rotate(2.5deg); } }
@keyframes arm-idle { 50% { transform: rotate(3.5deg); } }
@keyframes arm-idle-r { 50% { transform: rotate(-3.5deg); } }
@keyframes ear-flick { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-11deg); } 94% { transform: rotate(4deg); } }
@keyframes ear-flick-r { 0%, 80%, 100% { transform: rotate(0); } 83% { transform: rotate(11deg); } 86% { transform: rotate(-4deg); } }
@keyframes tail-wag { 50% { transform: rotate(9deg); } }

/* walking */
.st-walk .p-root { animation: walk-bob .44s ease-in-out infinite; }
.st-walk .p-legL { animation: step-l .88s ease-in-out infinite; }
.st-walk .p-legR { animation: step-r .88s ease-in-out infinite; }
.st-walk .p-armL { animation: step-r .88s ease-in-out infinite; }
.st-walk .p-armR { animation: step-l .88s ease-in-out infinite; }
.st-walk .p-head { animation: nod .44s ease-in-out infinite; }
.st-walk .p-tail { animation: tail-wag .44s ease-in-out infinite; }
@keyframes walk-bob { 50% { transform: translateY(-2.4%) rotate(1deg); } }
@keyframes step-l { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } }
@keyframes step-r { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(-20deg); } }
@keyframes nod { 50% { transform: rotate(2deg) translateY(1%); } }

/* a happy jump */
.st-happy .p-root { animation: jump .62s cubic-bezier(.3, .7, .5, 1) infinite; }
.st-happy .p-armL { animation: arms-up-l .62s ease-in-out infinite; }
.st-happy .p-armR { animation: arms-up-r .62s ease-in-out infinite; }
.st-happy .p-legL { animation: legs-l .62s ease-in-out infinite; }
.st-happy .p-legR { animation: legs-r .62s ease-in-out infinite; }
.st-happy .p-tail { animation: tail-wag .28s ease-in-out infinite; }
@keyframes jump { 0%, 100% { transform: translateY(0) scale(1.05, .93); } 18% { transform: translateY(-2%) scale(.96, 1.05); } 50% { transform: translateY(-17%) scale(1, 1); } 86% { transform: translateY(-1%) scale(.98, 1.03); } }
@keyframes arms-up-l { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(118deg); } }
@keyframes arms-up-r { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-118deg); } }
@keyframes legs-l { 50% { transform: rotate(-12deg); } }
@keyframes legs-r { 50% { transform: rotate(12deg); } }

/* eating: it leans in, chews, and its cheeks puff */
.st-reach .p-head { animation: none; transform: rotate(3deg) translateY(3%); transition: transform .2s; }
.st-eat .p-head { animation: munch .34s ease-in-out infinite; }
.st-eat .p-body { animation: munch-body .68s ease-in-out infinite; }
.st-eat .p-armL { animation: none; transform: rotate(-112deg); transition: transform .2s; }
.st-eat .p-armR { animation: none; transform: rotate(112deg); transition: transform .2s; }
.st-eat .p-earL { animation: ear-bob .34s ease-in-out infinite; }
.st-eat .p-earR { animation: ear-bob-r .34s ease-in-out infinite; }
@keyframes munch { 50% { transform: translateY(2.3%) rotate(1.4deg); } }
@keyframes munch-body { 50% { transform: scale(1.02, .975); } }
@keyframes ear-bob { 50% { transform: rotate(-6deg); } }
@keyframes ear-bob-r { 50% { transform: rotate(6deg); } }
.st-swallow .p-head { animation: gulp .7s ease-in-out 1; }
.st-swallow .p-body { animation: belly-pat .7s ease-in-out 1; }
.st-swallow .p-armL { transform: rotate(-62deg); transition: transform .25s; }
@keyframes gulp { 40% { transform: translateY(-3%) rotate(-3deg); } 62% { transform: translateY(1.6%); } }
@keyframes belly-pat { 62% { transform: scale(1.03, .97); } }

/* drinking: head back, arm up, glug glug */
.st-drink .p-head { transform: rotate(-13deg); transition: transform .25s; }
.st-drink .p-armR { transform: rotate(128deg); transition: transform .25s; }
.st-drink .p-body { animation: glug .42s ease-in-out infinite; }
@keyframes glug { 50% { transform: translateY(.9%) scale(1.01, .985); } }

/* yuck: a full body shudder, then a head shake */
.st-yuck .p-head { animation: shake-no .4s ease-in-out infinite; }
.st-yuck .p-body { animation: shudder .2s linear infinite; }
.st-yuck .p-armL { transform: rotate(40deg); } .st-yuck .p-armR { transform: rotate(-40deg); }
@keyframes shake-no { 25% { transform: rotate(-11deg); } 75% { transform: rotate(11deg); } }
@keyframes shudder { 25% { transform: translateX(-1%); } 75% { transform: translateX(1%); } }

/* dancing */
.st-dance .p-body { animation: hips 1s ease-in-out infinite; }
.st-dance .p-root { animation: dance-bob .5s ease-in-out infinite; }
.st-dance .p-head { animation: head-bop .5s ease-in-out infinite; }
.st-dance .p-armL { animation: dance-l 1s ease-in-out infinite; }
.st-dance .p-armR { animation: dance-r 1s ease-in-out infinite; }
.st-dance .p-legL { animation: legs-l 1s ease-in-out infinite; }
.st-dance .p-legR { animation: legs-r 1s ease-in-out infinite .5s; }
.st-dance .p-tail { animation: tail-wag .25s ease-in-out infinite; }
@keyframes hips { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes dance-bob { 50% { transform: translateY(-5%); } }
@keyframes head-bop { 25% { transform: rotate(7deg); } 75% { transform: rotate(-7deg); } }
@keyframes dance-l { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(130deg); } }
@keyframes dance-r { 0%, 100% { transform: rotate(-130deg); } 50% { transform: rotate(-20deg); } }

/* a twirl, for new clothes */
.st-twirl .p-root { animation: twirl 1.1s ease-in-out 1; }
@keyframes twirl { 0% { transform: scaleX(1); } 25% { transform: scaleX(.12); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(-.12); } 100% { transform: scaleX(1); } }
.st-wave .p-armR { animation: wave-arm .5s ease-in-out infinite; }
@keyframes wave-arm { 0%, 100% { transform: rotate(-136deg); } 50% { transform: rotate(-96deg); } }
.st-wave .p-head { animation: head-idle 2s ease-in-out infinite; }

/* tired: slow, drooping, a big yawn */
.st-tired .p-head { animation: droop 3.8s ease-in-out infinite; }
.st-tired .p-body { animation: breathe 4.8s ease-in-out infinite; }
.st-tired .p-armL { transform: rotate(-5deg); } .st-tired .p-armR { transform: rotate(5deg); }
@keyframes droop { 50% { transform: rotate(7deg) translateY(2.5%); } }

/* asleep: lying down, slow breathing, one ear twitching in a dream */
.st-sleep .p-body { animation: sleep-breathe 4.8s ease-in-out infinite; }
.lying .p-head { animation: none; transform: rotate(74deg); transition: transform .6s ease-in-out; }
.lying .p-tail { animation: none; }
.st-sleep .p-earR { animation: ear-flick-r 14s ease-in-out infinite; }
@keyframes sleep-breathe { 50% { transform: scale(1.03, 1); } }
.st-stretch .p-armL { animation: arms-up-l 1.8s ease-in-out 1; }
.st-stretch .p-armR { animation: arms-up-r 1.8s ease-in-out 1; }
.st-stretch .p-body { animation: stretchy 1.8s ease-in-out 1; }
@keyframes stretchy { 50% { transform: scale(.96, 1.06); } }
.pet-thumb { display: block; }

/* things it wears that move by themselves */
.p-back { will-change: transform; }
.p-back.b-wings { animation: wings .55s ease-in-out infinite; }
.p-back.b-cape { animation: cape 2.2s ease-in-out infinite; }
.p-back.b-bag { animation: none; }
.st-walk .p-back.b-cape, .st-happy .p-back.b-cape { animation-duration: .5s; }
@keyframes wings { 50% { transform: scaleX(.8); } }
@keyframes cape { 50% { transform: skewX(4deg) scaleX(1.05); } }