/* MIGUEL ÁNGEL · cara viva sobre el arte final (ojos + bigote recortados del render)
   Uso: <div class="ma is-idle"> … </div>  ·  escala: .ma{--ma-size:620px} */
.ma{--ma-cyan:#4DDAFC;--ma-blue:#0108F5;--ma-hair:#63EAFF;
--ma-glow-near:rgba(77,218,252,.5);--ma-glow-far:rgba(56,170,255,.28);
--ma-size:var(--robi-size,var(--ma-face-size,620px));--u:calc(var(--ma-size)/868);
position:relative;display:grid;justify-items:center;align-content:start;
width:calc(868*var(--u));height:calc(714*var(--u));row-gap:calc(120*var(--u));
animation:ma-breathe 5.6s ease-in-out infinite,ma-drift 8.3s ease-in-out infinite;rotate:0deg;will-change:transform}
.ma__eyes{display:flex;gap:calc(20*var(--u));
translate:calc(var(--gaze-x,0)*26*var(--u)) calc(var(--gaze-y,0)*16*var(--u));
transition:translate .34s cubic-bezier(.2,.9,.2,1);animation:ma-saccade 9.5s linear infinite}
.ma.is-tracking .ma__eyes{animation:none}
.ma__eye{width:calc(407*var(--u));height:auto;display:block;transform-origin:50% 78%;
animation:ma-blink 6.4s infinite;filter:drop-shadow(0 0 calc(10*var(--u)) var(--ma-glow-near))}
.ma__eye--r{animation-delay:.03s}
.ma__mouth{width:calc(849*var(--u));height:auto;display:block;transform-origin:50% 12%;
filter:drop-shadow(0 0 calc(10*var(--u)) var(--ma-glow-near)) drop-shadow(0 0 calc(34*var(--u)) var(--ma-glow-far))}

@keyframes ma-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-7*var(--u)))}}
@keyframes ma-drift{0%,100%{rotate:-.5deg}50%{rotate:.6deg}}
@keyframes ma-saccade{0%,16%{transform:translate(0,0)}16.8%,33%{transform:translate(calc(15*var(--u)),calc(-5*var(--u)))}
33.8%,46%{transform:translate(calc(-13*var(--u)),calc(-3*var(--u)))}46.8%,62%{transform:translate(0,0)}
62.8%,72%{transform:translate(calc(7*var(--u)),calc(7*var(--u)))}72.8%,100%{transform:translate(0,0)}}
@keyframes ma-blink{0%,88%,100%{transform:scaleY(1)}90%{transform:scaleY(.07)}92%{transform:scaleY(1)}94.5%{transform:scaleY(.07)}97%{transform:scaleY(1)}}

/* hablando */
.ma.is-talking .ma__mouth{animation:ma-talk 1.15s ease-in-out infinite,ma-glow 1.15s ease-in-out infinite}
.ma.is-talking .ma__eye{animation:ma-blink 5s infinite}
@keyframes ma-talk{0%{transform:scaleY(1)}10%{transform:scaleY(.82) translateY(3px)}20%{transform:scaleY(1.06)}
32%{transform:scaleY(.88) translateY(2px)}44%{transform:scaleY(1.01)}56%{transform:scaleY(.76) translateY(4px)}
68%{transform:scaleY(1.04)}80%{transform:scaleY(.91)}100%{transform:scaleY(1)}}
@keyframes ma-glow{0%,100%{filter:drop-shadow(0 0 calc(10*var(--u)) var(--ma-glow-near)) drop-shadow(0 0 calc(34*var(--u)) var(--ma-glow-far))}
50%{filter:drop-shadow(0 0 calc(18*var(--u)) var(--ma-glow-near)) drop-shadow(0 0 calc(58*var(--u)) var(--ma-glow-far))}}

/* escuchando */
.ma.is-listening .ma__eye{animation:ma-listen 1.7s ease-in-out infinite}
.ma.is-listening .ma__mouth{animation:ma-listen-m 1.7s ease-in-out infinite}
@keyframes ma-listen{0%,100%{transform:scale(1);filter:drop-shadow(0 0 calc(10*var(--u)) var(--ma-glow-near))}
50%{transform:scale(1.045);filter:drop-shadow(0 0 calc(20*var(--u)) var(--ma-glow-near))}}
@keyframes ma-listen-m{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.96) translateY(1px)}}

/* pensando */
.ma.is-thinking .ma__eyes{animation:ma-think 3.4s ease-in-out infinite}
.ma.is-thinking .ma__eye--l{animation:ma-squint 3.4s ease-in-out infinite}
.ma.is-thinking .ma__mouth{transform:translateX(14px) scaleY(.94)}
@keyframes ma-think{0%,100%{transform:translate(calc(10*var(--u)),calc(-6*var(--u)))}50%{transform:translate(calc(-14*var(--u)),calc(-2*var(--u)))}}
@keyframes ma-squint{0%,100%{transform:scaleY(.72)}50%{transform:scaleY(.86)}}

/* contento */
.ma.is-happy .ma__eye{animation:ma-happy-e 4.4s ease-in-out infinite}
.ma.is-happy .ma__mouth{animation:ma-happy-m 4.4s ease-in-out infinite}
@keyframes ma-happy-e{0%,100%{transform:scaleY(.44)}50%{transform:scaleY(.52)}}
@keyframes ma-happy-m{0%,100%{transform:scale(1.05,.92) translateY(calc(-8*var(--u)))}50%{transform:scale(1.08,.98) translateY(calc(-12*var(--u)))}}

/* guiño */
.ma.is-wink .ma__eye--r{animation:ma-wink 2.6s ease-in-out infinite}
@keyframes ma-wink{0%,18%,42%,100%{transform:scaleY(1)}24%,36%{transform:scaleY(.1)}}

/* durmiendo */
.ma.is-sleeping{animation:ma-breathe 8s ease-in-out infinite;--ma-glow-near:rgba(77,218,252,.2);--ma-glow-far:rgba(56,170,255,.1)}
.ma.is-sleeping .ma__eyes{animation:none}
.ma.is-sleeping .ma__eye{animation:ma-sleep 8s ease-in-out infinite}
.ma.is-sleeping .ma__mouth{transform:scaleY(.9) translateY(6px)}
@keyframes ma-sleep{0%,100%{transform:scaleY(.06)}50%{transform:scaleY(.1)}}

/* confuso */
.ma.is-confused{animation:ma-shake .5s ease-in-out 2,ma-breathe 5.6s ease-in-out infinite}
.ma.is-confused .ma__eye--l{transform:scaleY(.74) rotate(-7deg)}
.ma.is-confused .ma__eye--r{transform:scaleY(1.04) rotate(6deg)}
.ma.is-confused .ma__mouth{transform:rotate(-3deg) scaleY(.92)}
@keyframes ma-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(calc(-9*var(--u)))}75%{transform:translateX(calc(9*var(--u)))}}

/* encendido */
.ma.is-booting .ma__eye{animation:ma-boot 1s cubic-bezier(.2,.9,.2,1) both}
.ma.is-booting .ma__eye--r{animation-delay:.09s}
.ma.is-booting .ma__mouth{animation:ma-boot .9s .25s cubic-bezier(.2,.9,.2,1) both}
@keyframes ma-boot{0%{transform:scaleY(.02) scaleX(.35);opacity:0}22%{transform:scaleY(.04) scaleX(1);opacity:1}
60%{transform:scaleY(1.1) scaleX(1.02)}80%{transform:scaleY(.94)}100%{transform:scaleY(1) scaleX(1)}}

/* emocionado */
.ma.is-excited{animation:ma-bounce .62s cubic-bezier(.28,.9,.3,1) infinite,ma-drift 3s ease-in-out infinite}
.ma.is-excited .ma__eyes{animation:none}
.ma.is-excited .ma__eye{animation:ma-exc-e 1.9s ease-in-out infinite}
.ma.is-excited .ma__mouth{animation:ma-happy-m 1.9s ease-in-out infinite}
@keyframes ma-bounce{0%,100%{transform:translateY(0) scale(1,1)}30%{transform:translateY(calc(-22*var(--u))) scale(.97,1.05)}
62%{transform:translateY(0) scale(1.04,.94)}78%{transform:translateY(calc(-5*var(--u))) scale(1,1.01)}}
@keyframes ma-exc-e{0%,100%{transform:scale(1.06)}40%{transform:scale(1.1)}70%{transform:scaleY(.12) scaleX(1.08)}76%{transform:scale(1.06)}}

/* curioso · escaneando */
.ma.is-curious{rotate:-6deg;animation:ma-breathe 4.4s ease-in-out infinite}
.ma.is-curious .ma__eye--l{transform:scale(1.08)}
.ma.is-curious .ma__eye--r{transform:scale(.9)}
.ma.is-scanning .ma__eyes{animation:ma-scan 3.6s ease-in-out infinite alternate}
@keyframes ma-scan{0%{transform:translate(calc(-22*var(--u)),0)}100%{transform:translate(calc(22*var(--u)),0)}}

.ma.is-flat .ma__eye,.ma.is-flat .ma__mouth{filter:none}
.ma.is-paused,.ma.is-paused *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ma,.ma *{animation:none!important}}