/* MusCat motion kit: layered CSS animations over the flat illustrations. */
.mc-live{position:relative;display:inline-block;width:min(70vw,360px);aspect-ratio:1;user-select:none}
.mc-live img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mc-live .body{transform-origin:50% 100%;animation:mcBreathe 3.6s ease-in-out infinite}
.mc-live .tail{animation:none}
.mc-live .closed{opacity:0;animation:mcBlink 4.6s linear infinite;transform-origin:50% 100%}
.mc-live .closed.body{animation:mcBlink 4.6s linear infinite,mcBreathe 3.6s ease-in-out infinite}
.mc-live .shadow{position:absolute;left:22%;right:22%;bottom:1%;height:6%;border-radius:50%;background:rgba(0,0,0,.25);filter:blur(4px);animation:mcShadow 3.6s ease-in-out infinite}
@keyframes mcBreathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.018) translateY(-1px)}}
@keyframes mcShadow{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.03)}}
@keyframes mcTail{0%{transform:rotate(0)}30%{transform:rotate(8deg)}55%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}100%{transform:rotate(0)}}
@keyframes mcBlink{0%,92%,100%{opacity:0}93%,96%{opacity:1}}

/* whole figure variants (single image) */
.mc-move{position:relative;display:inline-block;width:min(60vw,300px);aspect-ratio:1}
.mc-move img{width:100%;height:100%;display:block}
.mc-move.run img{animation:mcRun .42s ease-in-out infinite}
.mc-move.run::before,.mc-move.run::after{content:"";position:absolute;left:-6%;height:3px;border-radius:3px;background:rgba(165,174,194,.55);animation:mcLines .7s linear infinite}
.mc-move.run::before{top:52%;width:22%}
.mc-move.run::after{top:62%;width:14%;animation-delay:.3s}
.mc-move.yoga img{transform-origin:55% 100%;animation:mcWobble 4s ease-in-out infinite}
.mc-move.squat img{transform-origin:50% 100%;animation:mcSquat 2.4s ease-in-out infinite}
.mc-move.pushup img{transform-origin:20% 90%;animation:mcPush 2s ease-in-out infinite}
.mc-move.curl img{transform-origin:50% 100%;animation:mcCurl 1.6s ease-in-out infinite}
.mc-move .drop{position:absolute;width:5%;height:7%;left:63%;top:16%;background:#8fc9ff;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;opacity:0;animation:mcDrop 4s ease-in infinite}
@keyframes mcRun{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-5%) rotate(1.5deg)}}
@keyframes mcLines{0%{transform:translateX(30%);opacity:0}20%{opacity:1}100%{transform:translateX(-90%);opacity:0}}
@keyframes mcWobble{0%,100%{transform:rotate(0)}15%{transform:rotate(-3deg)}30%{transform:rotate(3.5deg)}45%{transform:rotate(-2deg)}60%{transform:rotate(6deg)}68%{transform:rotate(-5deg)}76%{transform:rotate(2deg)}88%{transform:rotate(-1deg)}}
@keyframes mcSquat{0%,100%{transform:scaleY(1)}40%{transform:scaleY(.86) scaleX(1.04)}55%{transform:scaleY(.86) scaleX(1.04)}}
@keyframes mcPush{0%,100%{transform:rotate(0) translateY(0)}45%{transform:rotate(2deg) translateY(4%)}60%{transform:rotate(2deg) translateY(4%)}}
@keyframes mcCurl{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3%) rotate(-2deg)}}
@keyframes mcDrop{0%,50%{opacity:0;transform:translateY(0)}60%{opacity:1}100%{opacity:0;transform:translateY(120%)}}
@media(prefers-reduced-motion:reduce){.mc-live *,.mc-move img,.mc-move::before,.mc-move::after{animation:none!important}}