/* Yaya · el Pana — animaciones de la marca.
   Requiere el markup de yaya-mark.js / YayaMark.jsx (clases .mk-*).
   El wrapper lleva .yaya-pana; las expresiones se activan con .ex-* en el wrapper. */

.yaya-pana{display:inline-flex;flex-shrink:0;transition:transform .22s ease-out}
.yaya-pana svg{width:100%;height:100%;overflow:visible;display:block}
.yaya-pana .mk-eyes{transition:transform .14s ease-out}

/* ── idle: parpadeo + sonrisa que respira ── */
.mk-eye{transform-box:fill-box;transform-origin:center;animation:mkblink 3.8s ease-in-out infinite}
@keyframes mkblink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.14)}}
.mk-smile{transform-box:fill-box;transform-origin:center;animation:mksmile 3.8s ease-in-out infinite}
@keyframes mksmile{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.1)}}

/* ── extras ocultos por defecto ── */
.mk-zzz,.mk-think,.mk-think circle,.mk-love,.mk-love path,.mk-dizzy{opacity:0}
.mk-love path{transform-box:fill-box;transform-origin:center}

/* ── 7 expresiones ocasionales ── */
.ex-wink .mk-eye-r{animation:exWink .55s ease-in-out}
@keyframes exWink{0%,100%{transform:scaleY(1)}45%,60%{transform:scaleY(.12)}}

.ex-happy .mk-eye{animation:exHappy .9s ease-in-out}
@keyframes exHappy{0%,100%{transform:scaleY(1)}35%,75%{transform:scaleY(.32)}}
.ex-happy .mk-smile{animation:exSmile .9s ease-in-out}
@keyframes exSmile{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.2)}}

.ex-surprise .mk-eye{animation:exSurprise .9s ease-in-out}
@keyframes exSurprise{0%,100%{transform:scale(1)}40%,70%{transform:scale(1.28)}}
.ex-surprise .mk-smile{animation:exSurpriseS .9s ease-in-out}
@keyframes exSurpriseS{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.7)}}

.ex-sleep .mk-eye{animation:exSleepEye 3.4s ease-in-out}
@keyframes exSleepEye{0%,100%{transform:scaleY(1)}12%,88%{transform:scaleY(.1)}}
.ex-sleep .mk-smile{transform-origin:center top;animation:exYawn 3.4s ease-in-out}
@keyframes exYawn{0%,100%{transform:scaleY(1) translateY(0)}45%,55%{transform:scaleY(1.9) translateY(3px)}}
.ex-sleep .mk-zzz{animation:exZzz 3.4s ease-in-out}
@keyframes exZzz{0%{opacity:0;transform:translateY(8px)}25%,70%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-10px)}}

.ex-think .mk-think circle{animation:exThink 3s ease-in-out}
.ex-think .mk-think circle:nth-child(2){animation-delay:.22s}
.ex-think .mk-think circle:nth-child(3){animation-delay:.44s}
@keyframes exThink{0%,100%{opacity:0}22%,80%{opacity:1}}

.ex-love .mk-love path{animation:exLove 3s ease-in-out}
.ex-love .mk-love path:nth-child(2){animation-delay:.3s}
@keyframes exLove{0%{opacity:0;transform:translateY(8px) scale(.5)}30%,65%{opacity:1;transform:translateY(-2px) scale(1)}100%{opacity:0;transform:translateY(-14px) scale(.9)}}

.ex-dizzy svg{transform-origin:center;animation:exDizzyHead 3s ease-in-out}
@keyframes exDizzyHead{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.ex-dizzy .mk-eye{opacity:0}
.ex-dizzy .mk-dizzy{animation:exDizzyShow 3s ease-in-out}
@keyframes exDizzyShow{0%,100%{opacity:0}20%,80%{opacity:1}}

/* ── estado de error: ojos en X (ver yaya-error) ── */
.yaya-pana[data-state="error"] .mk-eyes,
.yaya-pana[data-state="error"] .mk-think,
.yaya-pana[data-state="error"] .mk-love,
.yaya-pana[data-state="error"] .mk-zzz{opacity:0}
.yaya-pana[data-state="error"] .mk-x{opacity:1}
.mk-x{opacity:0;transform-box:fill-box;transform-origin:center;animation:mkblink 3.8s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .yaya-pana,.yaya-pana .mk-eyes{transition:none}
  .mk-eye,.mk-smile,.mk-x,.ex-wink .mk-eye-r,.ex-happy .mk-eye,.ex-happy .mk-smile,
  .ex-surprise .mk-eye,.ex-surprise .mk-smile,.ex-sleep .mk-eye,.ex-sleep .mk-smile,
  .ex-sleep .mk-zzz,.ex-think .mk-think circle,.ex-love .mk-love path,
  .ex-dizzy svg,.ex-dizzy .mk-dizzy{animation:none}
}