/* BeanMood mascots: the design-sheet art, given a little life. Transform only; still under reduced motion. */
.mascot{display:inline-block;width:var(--mw);height:var(--mh);line-height:0;vertical-align:bottom}
.mascot img{display:block;width:100%;height:100%;background:none;object-fit:contain;transform-origin:50% 100%;user-select:none;-webkit-user-drag:none}
@media (prefers-reduced-motion:no-preference){
 .mascot img{animation:m-breathe 3.4s ease-in-out infinite}
 .roast.pose-happy img,.sniff.pose-celebrating img{animation:m-hop 1s cubic-bezier(.3,0,.3,1) infinite}
 .roast.pose-sleepy img{animation:m-snooze 4.6s ease-in-out infinite}
 .roast.pose-curious img{animation:m-tilt 2.6s ease-in-out infinite}
 .roast.pose-caffeinated img{animation:m-jitter .16s steps(2) infinite}
 .roast.pose-ready img,.sniff.pose-adventure img{animation:m-march .7s ease-in-out infinite alternate}
 .sniff.pose-standby img,.sniff.pose-proud img{animation:m-wiggle 1.8s ease-in-out infinite}
 .sniff.pose-sniffing img{animation:m-sniff .45s ease-in-out infinite alternate}
 .sniff.pose-found img{animation:m-bounce 1.4s cubic-bezier(.3,0,.3,1) infinite}
 /* a mascot that has just changed pose pops in once */
 .mascot.is-new img{animation:m-pop-in .5s cubic-bezier(.3,1.6,.5,1) both}
}
@keyframes m-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,.98)}}
@keyframes m-hop{0%,100%{transform:translateY(0) scale(1.04,.96)}15%{transform:translateY(0) scale(.97,1.04)}45%{transform:translateY(-9%) scale(1,1)}75%{transform:translateY(0) scale(1.04,.96)}}
@keyframes m-snooze{0%,100%{transform:scale(1,1) rotate(0)}50%{transform:scale(1.03,.97) rotate(-2deg)}}
@keyframes m-tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-6deg)}60%{transform:rotate(3deg)}}
@keyframes m-jitter{from{transform:translateX(-1px)}to{transform:translateX(1px)}}
@keyframes m-march{from{transform:rotate(-3deg) translateY(0)}to{transform:rotate(3deg) translateY(-3%)}}
@keyframes m-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes m-sniff{from{transform:translateX(-1.5%) rotate(-1deg)}to{transform:translateX(1.5%) rotate(1deg)}}
@keyframes m-bounce{0%,100%{transform:translateY(0)}35%{transform:translateY(-6%)}55%{transform:translateY(0) scale(1.03,.97)}}
@keyframes m-pop-in{0%{transform:scale(.6) translateY(8%)}100%{transform:none}}