/* CabBee Live Mascot 4K v1.0 */
.cabbee-motion{
  --cbm-w:250px;
  --cbm-ratio:418/470;
  width:var(--cbm-w);
  aspect-ratio:var(--cbm-ratio);
  display:block;
  position:relative;
  z-index:2;
  flex:0 0 auto;
  background-image:url('/assets/img/cabbee-motion-4k.webp');
  background-repeat:no-repeat;
  background-size:400% 200%;
  background-position:100% 100%;
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.22));
  transform-origin:50% 55%;
  will-change:transform,background-position;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.cabbee-motion:after{
  content:"";
  position:absolute;
  left:15%;right:15%;bottom:-4%;height:10%;
  border-radius:50%;
  background:rgba(0,0,0,.18);
  filter:blur(12px);
  opacity:.42;
  transform:scaleX(.86);
  z-index:-1;
}
.cabbee-motion.is-hovering{animation:cbmHover 2.7s ease-in-out infinite}
.cabbee-motion.is-entering{animation:cbmEnter .7s cubic-bezier(.2,.86,.24,1) both}
.cabbee-motion.is-winking{animation:cbmWinkNudge .55s ease-out both}
.cabbee-motion--cabbee-plate{--cbm-w:min(300px,74%)}
.cabbee-motion--family-stage{--cbm-w:min(300px,66%)}
.cabbee-motion--taxi-stage{--cbm-w:min(310px,64%)}
@keyframes cbmHover{0%,100%{transform:translate3d(0,0,0) rotate(-.35deg)}50%{transform:translate3d(0,-8px,0) rotate(.5deg)}}
@keyframes cbmEnter{0%{transform:translate3d(-34px,22px,0) rotate(-10deg) scale(.92);opacity:0}55%{opacity:1}100%{transform:translate3d(0,0,0) rotate(0) scale(1);opacity:1}}
@keyframes cbmWinkNudge{0%,100%{transform:translate3d(0,0,0) scale(1)}45%{transform:translate3d(0,-5px,0) scale(1.025)}}
@media(max-width:760px){
  .cabbee-motion--cabbee-plate{--cbm-w:min(230px,76%)}
  .cabbee-motion--family-stage,.cabbee-motion--taxi-stage{--cbm-w:min(235px,72%)}
}
@media(prefers-reduced-motion:reduce){
  .cabbee-motion{background-position:100% 100%!important;animation:none!important;transform:none!important}
}