/* A flat drawing with separately articulated eyes, ears, arms and body. */
.toy-stage {
  background: #f0f2e3;
  background-image: radial-gradient(#b1bc9740 .8px, transparent .8px);
  background-size: 14px 14px;
}
.toy-stage:before { content: ''; position: absolute; inset: auto -10% -57% -10%; height: 81%; border-radius: 50%; background: #ccd8ad; opacity: .3; }
.mascot-float { animation: none; }
.mascot { transform: none; }
.critter { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.critter-rig { transform-origin: 160px 260px; }
.mascot .critter-rig { animation: imp-breathe 3.5s ease-in-out infinite; }
.critter-face { transform-origin: 160px 157px; transform: translateX(var(--head-x,0px)) rotate(var(--head-turn,0deg)); transition: transform .22s ease-out; }
.critter-pupil { transform: translate(var(--gaze-x,0px),var(--gaze-y,0px)); transition: transform .12s ease-out; }
.critter-eye-group { transform-origin: 160px 152px; transition: transform .065s ease-in; }
.critter-ear-left { transform-origin: 133px 119px; }
.critter-ear-right { transform-origin: 186px 116px; }
.mascot .critter-ear-left { animation: imp-ear-left 7.3s ease-in-out infinite; }
.mascot .critter-ear-right { animation: imp-ear-right 5.7s ease-in-out infinite; }
.critter-arm-left { transform-origin: 109px 178px; transition: transform .3s; }
.critter-arm-right { transform-origin: 216px 181px; transition: transform .3s; }
.critter-foot-left { transform-origin: 128px 255px; }
.critter-foot-right { transform-origin: 194px 255px; }
.mascot .critter-foot-right { animation: imp-foot-tap 8s ease-in-out infinite; }
.critter-brow-left { transform-origin: 123px 116px; transition: transform .25s; }
.critter-brow-right { transform-origin: 188px 111px; transition: transform .25s; }
.critter-blush { transition: opacity .25s; }
.critter-eye-happy { transform-origin: 160px 152px; }
.critter-zzz { transform-origin: 265px 110px; }
.mascot-shadow { position: absolute; bottom: 50px; width: 108px; height: 9px; border-radius: 50%; background: #99aa72; opacity: .2; }

.mascot.is-blinking .critter-eye-group { transform: scaleY(.08); }
.mascot[data-mood="greeting"] .critter-arm-right { animation: imp-wave .38s ease-in-out 4; }
.mascot[data-mood="curious"] .critter-face { transform: translateX(-3px) rotate(-7deg); }
.mascot[data-mood="curious"] .critter-brow-left { transform: translateY(-8px) rotate(-12deg); }
.mascot[data-mood="curious"] .critter-ear-right { animation: none; transform: rotate(-14deg); }

.mascot[data-mood="worried"] .critter-rig { animation: imp-nervous .35s ease-in-out infinite; }
.mascot[data-mood="worried"] .critter-ear-left { animation: none; transform: rotate(-24deg); }
.mascot[data-mood="worried"] .critter-ear-right { animation: none; transform: rotate(22deg); }
.mascot[data-mood="worried"] .critter-brow-left { transform: translateY(-6px) rotate(22deg); }
.mascot[data-mood="worried"] .critter-brow-right { transform: translateY(-6px) rotate(-22deg); }
.mascot[data-mood="worried"] .critter-arm-left { transform: rotate(55deg); }
.mascot[data-mood="worried"] .critter-arm-right { transform: rotate(-35deg); }
.mascot[data-mood="worried"] .critter-mouth-rest { display: none; }
.mascot[data-mood="worried"] .critter-mouth-oh { display: inline; }

.mascot[data-mood="loved"] .critter-rig { animation: imp-delighted .65s ease-in-out 2; }
.mascot[data-mood="loved"] .critter-eye-group,
.mascot[data-mood="loved"] .critter-mouth-rest { display: none; }
.mascot[data-mood="loved"] .critter-eye-happy,
.mascot[data-mood="loved"] .critter-mouth-happy { display: inline; }
.mascot[data-mood="loved"] .critter-blush { opacity: .65; }
.mascot[data-mood="loved"] .critter-ear-left { animation: imp-happy-ear .4s ease-in-out infinite alternate; }
.mascot[data-mood="loved"] .critter-ear-right { animation: imp-happy-ear .4s -.2s ease-in-out infinite alternate-reverse; }
.mascot[data-mood="loved"] .critter-arm-right { transform: rotate(22deg); }
.mascot[data-mood="loved"] .critter-arm-left { transform: rotate(-25deg); }

.mascot[data-mood="playful"] .critter-rig { animation: imp-tickle .18s ease-in-out infinite alternate; }
.mascot[data-mood="playful"] .critter-eye-left { transform-origin: 134px 153px; transform: scaleY(.18); }
.mascot[data-mood="playful"] .critter-mouth-rest { display: none; }
.mascot[data-mood="playful"] .critter-mouth-happy,
.mascot[data-mood="playful"] .critter-tongue { display: inline; }
.mascot[data-mood="playful"] .critter-arm-left { transform: rotate(-35deg); }
.mascot[data-mood="playful"] .critter-arm-right { animation: imp-wave .3s ease-in-out infinite; }

.mascot[data-mood="sleeping"] .critter-rig { animation: imp-sleep 3s ease-in-out infinite; }
.mascot[data-mood="sleeping"] .critter-eye-group,
.mascot[data-mood="sleeping"] .critter-mouth-rest { display: none; }
.mascot[data-mood="sleeping"] .critter-eye-happy,
.mascot[data-mood="sleeping"] .critter-mouth-sleep,
.mascot[data-mood="sleeping"] .critter-zzz { display: inline; }
.mascot[data-mood="sleeping"] .critter-eye-happy { transform: scaleY(-1); }
.mascot[data-mood="sleeping"] .critter-brow-left,
.mascot[data-mood="sleeping"] .critter-brow-right { transform: translateY(8px); }
.mascot[data-mood="sleeping"] .critter-ear-left { animation: none; transform: rotate(-28deg); }
.mascot[data-mood="sleeping"] .critter-ear-right { animation: none; transform: rotate(29deg); }
.mascot[data-mood="sleeping"] .critter-arm-right { transform: rotate(45deg); }
.mascot[data-mood="sleeping"] .critter-zzz { animation: imp-snore 2.8s ease-out infinite; }

.loose-toy { filter: drop-shadow(2px 4px 0 #2831241a); }
.loose-toy.is-dragging { filter: drop-shadow(4px 8px 0 #2831241a); }
.loose-toy .critter-eye-group { animation: imp-toy-blink 4.5s var(--blink-delay,0s) infinite; }
.loose-toy .critter-arm-right { animation: imp-wave .55s ease-in-out infinite; }
.loose-toy.is-dragging .critter-eye-group { animation: none; transform: scaleY(1.1); }
.loose-toy.is-dragging .critter-mouth-rest { display: none; }
.loose-toy.is-dragging .critter-mouth-oh { display: inline; }
.loose-toy.is-dragging .critter-ear-left { transform: rotate(-22deg); }
.loose-toy.is-dragging .critter-ear-right { transform: rotate(22deg); }

@keyframes imp-breathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.018,.982) translateY(1px); } }
@keyframes imp-ear-left { 0%,75%,100% { transform: rotate(0); } 80% { transform: rotate(-10deg); } 85% { transform: rotate(5deg); } 90% { transform: rotate(-4deg); } }
@keyframes imp-ear-right { 0%,70%,100% { transform: rotate(0); } 77% { transform: rotate(11deg); } 83% { transform: rotate(-7deg); } 90% { transform: rotate(4deg); } }
@keyframes imp-foot-tap { 0%,70%,100% { transform: rotate(0); } 75%,85% { transform: rotate(-12deg); } 80%,90% { transform: rotate(0); } }
@keyframes imp-wave { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(16deg); } }
@keyframes imp-nervous { 0%,100% { transform: translateX(-1px) scale(.97,1.02); } 50% { transform: translateX(1px) scale(.97,1.02); } }
@keyframes imp-delighted { 0%,100% { transform: scale(1.03,.97); } 50% { transform: translateY(-9px) rotate(-3deg) scale(.98,1.02); } }
@keyframes imp-happy-ear { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes imp-tickle { from { transform: rotate(-4deg) scale(1.025,.98); } to { transform: rotate(4deg) scale(.98,1.025); } }
@keyframes imp-sleep { 0%,100% { transform: rotate(5deg) scale(1.04,.96); } 50% { transform: rotate(6deg) scale(1.055,.945); } }
@keyframes imp-snore { 0% { opacity: 0; transform: translateY(4px); } 35%,65% { opacity: .8; } 100% { opacity: 0; transform: translateY(-9px); } }
@keyframes imp-toy-blink { 0%,43%,49%,100% { transform: scaleY(1); } 45%,47% { transform: scaleY(.1); } }

/* Stop background work as well as animation when the character is unavailable. */
.mascot.life-paused .critter *, html.motion-paused .critter * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .critter * { animation: none !important; transition: none !important; }
}