/* ============================================================
   Mavi mascot — styles & mood animations
   Pair with assets/js/mavi.js
   ============================================================ */
mavi-mascot{display:inline-block;width:160px;aspect-ratio:200/232;line-height:0;vertical-align:bottom}
mavi-mascot .mv{width:100%;height:100%;overflow:visible}

mavi-mascot .mv-shadow{fill:rgba(29,39,66,.16);transform-box:fill-box;transform-origin:center;animation:mv-shadow 2.4s ease-in-out infinite}
[data-theme="dark"] mavi-mascot .mv-shadow{fill:rgba(0,0,0,.45)}
mavi-mascot .mv-bob{animation:mv-bob 2.4s ease-in-out infinite}

/* moving parts pivot around their joints */
mavi-mascot .mv-arm,mavi-mascot .mv-antenna,mavi-mascot .mv-eye,mavi-mascot .mv-pupil,mavi-mascot .mv-brows path,mavi-mascot .mv-foot{transform-box:view-box}
mavi-mascot .mv-arm-l{transform-origin:34px 132px;animation:mv-sway-l 3s ease-in-out infinite}
mavi-mascot .mv-arm-r{transform-origin:166px 132px;animation:mv-sway-r 3s ease-in-out infinite}
mavi-mascot .mv-antenna{transform-origin:100px 48px;animation:mv-wobble 2.6s ease-in-out infinite}
mavi-mascot .mv-eye-l{transform-origin:74px 100px}
mavi-mascot .mv-eye-r{transform-origin:126px 100px}
mavi-mascot .mv-eye{animation:mv-blink 4.2s infinite}
mavi-mascot .mv-pupil{transition:transform .4s ease}
mavi-mascot .mv-brows{opacity:0;transition:opacity .3s}
mavi-mascot .mv-brow-l{transform-origin:73px 70px} mavi-mascot .mv-brow-r{transform-origin:127px 70px}
mavi-mascot .mv-brows path{transition:transform .3s}
mavi-mascot .mv-mouth{opacity:0;transition:opacity .2s}
mavi-mascot .mv-mouth-smile{opacity:1}
mavi-mascot .mv-foot-l{transform-origin:74px 203px} mavi-mascot .mv-foot-r{transform-origin:126px 203px}

/* ---------- moods ---------- */
mavi-mascot[mood="wave"] .mv-arm-r{animation:mv-wave .9s ease-in-out infinite}

mavi-mascot[mood="cheer"] .mv-arm-r{animation:mv-cheer-r .6s ease-in-out infinite alternate}
mavi-mascot[mood="cheer"] .mv-arm-l{animation:mv-cheer-l .6s ease-in-out infinite alternate}
mavi-mascot[mood="cheer"] .mv-bob{animation:mv-jump .6s ease-in-out infinite alternate}
mavi-mascot[mood="cheer"] .mv-shadow{animation:mv-shadow-jump .6s ease-in-out infinite alternate}

mavi-mascot[mood="think"] .mv-arm-r{animation:mv-scratch 1.2s ease-in-out infinite}
mavi-mascot[mood="think"] .mv-pupil{transform:translate(4px,-6px)}
mavi-mascot[mood="think"] .mv-brows{opacity:1}
mavi-mascot[mood="think"] .mv-brow-r{transform:translateY(-5px) rotate(-6deg)}
mavi-mascot[mood="think"] .mv-mouth-smile{opacity:0}
mavi-mascot[mood="think"] .mv-mouth-hmm{opacity:1}

mavi-mascot[mood="wow"] .mv-arm-r{animation:none;transform:rotate(-58deg)}
mavi-mascot[mood="wow"] .mv-arm-l{animation:none;transform:rotate(58deg)}
mavi-mascot[mood="wow"] .mv-eye{animation:none;transform:scale(1.12)}
mavi-mascot[mood="wow"] .mv-brows{opacity:1}
mavi-mascot[mood="wow"] .mv-brows path{transform:translateY(-7px)}
mavi-mascot[mood="wow"] .mv-mouth-smile{opacity:0}
mavi-mascot[mood="wow"] .mv-mouth-o{opacity:1}

mavi-mascot[mood="point"] .mv-arm-r{animation:mv-point 1.4s ease-in-out infinite}
mavi-mascot[mood="point"] .mv-pupil{transform:translate(5px,0)}

mavi-mascot[mood="walk"] .mv-foot-l{animation:mv-step .5s ease-in-out infinite alternate}
mavi-mascot[mood="walk"] .mv-foot-r{animation:mv-step .5s ease-in-out infinite alternate-reverse}
mavi-mascot[mood="walk"] .mv-bob{animation:mv-bob-walk .25s ease-in-out infinite alternate}
mavi-mascot[mood="walk"] .mv-arm-r{animation:mv-swing-r .5s ease-in-out infinite alternate}
mavi-mascot[mood="walk"] .mv-arm-l{animation:mv-swing-l .5s ease-in-out infinite alternate}

/* quick "boing" when the mood changes */
mavi-mascot.mv-react .mv{animation:mv-boing .5s cubic-bezier(.3,1.6,.5,1)}

/* ---------- keyframes ---------- */
@keyframes mv-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes mv-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.86);opacity:.7}}
@keyframes mv-jump{from{transform:translateY(0)}to{transform:translateY(-18px)}}
@keyframes mv-shadow-jump{from{transform:scaleX(1)}to{transform:scaleX(.7);opacity:.5}}
@keyframes mv-bob-walk{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes mv-sway-l{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-4deg)}}
@keyframes mv-sway-r{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(4deg)}}
@keyframes mv-wave{0%,100%{transform:rotate(-138deg)}50%{transform:rotate(-104deg)}}
@keyframes mv-cheer-r{from{transform:rotate(-118deg)}to{transform:rotate(-142deg)}}
@keyframes mv-cheer-l{from{transform:rotate(118deg)}to{transform:rotate(142deg)}}
@keyframes mv-scratch{0%,100%{transform:rotate(-158deg)}50%{transform:rotate(-166deg)}}
@keyframes mv-point{0%,100%{transform:rotate(-92deg)}50%{transform:rotate(-86deg) translateX(3px)}}
@keyframes mv-swing-r{from{transform:rotate(-18deg)}to{transform:rotate(14deg)}}
@keyframes mv-swing-l{from{transform:rotate(-14deg)}to{transform:rotate(18deg)}}
@keyframes mv-step{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-6px) rotate(6deg)}}
@keyframes mv-wobble{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes mv-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes mv-boing{0%{transform:scale(1)}40%{transform:scale(1.1,.9)}70%{transform:scale(.95,1.05)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  mavi-mascot *,mavi-mascot .mv{animation-duration:0s!important;animation-iteration-count:1!important}
}