/* ===========================================================
   ComiX — mascota RIGGEADA (cabeza separada del cuerpo)
   Capas (cada transform en su propia capa, no chocan):
   .comix
     .comix-fx                 -> burbujas / lupa / chispas
     .comix-bob                -> rebote vertical / salto / flotar
       .comix-lean             -> inclinación / balanceo del cuerpo entero
         .comix-scale          -> respiración / squash & stretch
           img.comix-body      -> cuerpo (base)
           img.comix-head      -> CABEZA+antena (gira sola sobre el cuello)
     .comix-shadow             -> sombra en el piso
   Estado = data-state="idle|greet|walk|search|like|help"
   Pivote del cuello de la cabeza = 49.9% 41% (punto (225,252) del PNG)
   =========================================================== */

.comix{ position:relative; width:230px; display:flex; justify-content:center; align-items:flex-end;
        filter:drop-shadow(0 12px 14px rgba(0,0,0,.35)); }
.comix.mini{ width:150px; }
.comix.bare{ width:100%; filter:none; }

.comix-bob{ position:relative; z-index:2; transform-origin:50% 100%; will-change:transform; }
.comix-lean{ transform-origin:50% 95%; will-change:transform; }
.comix-scale{ position:relative; transform-origin:50% 90%; will-change:transform; }

.comix-body{ display:block; width:100%; height:auto; }
.comix-arm{ position:absolute; top:0; left:0; width:100%; height:auto;
            transform-origin:76.7% 48.3%; will-change:transform; }   /* pivote hombro derecho */
.comix-head{ position:absolute; top:0; left:0; width:100%; height:auto;
             transform-origin:49.9% 41%; will-change:transform; }   /* pivote cuello */

.comix-shadow{ position:absolute; bottom:4px; left:50%; width:56%; height:15px; z-index:1;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.45), rgba(0,0,0,0) 70%); }

.comix-fx{ position:absolute; inset:0; z-index:3; pointer-events:none; }

/* ============================ IDLE ============================ */
/* respira, flota y de vez en cuando ladea la cabeza (vivo) */
[data-state="idle"] .comix-bob  { animation:cx-float 3.4s ease-in-out infinite; }
[data-state="idle"] .comix-scale{ animation:cx-breathe 3.4s ease-in-out infinite; }
[data-state="idle"] .comix-head { animation:cx-idle-head 6.5s ease-in-out infinite; }
[data-state="idle"] .comix-shadow{ animation:cx-shadow 3.4s ease-in-out infinite; }
@keyframes cx-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes cx-breathe{ 0%,100%{transform:scale(1,1)} 50%{transform:scale(1.015,.99)} }
@keyframes cx-shadow{ 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(.86);opacity:.7} }
@keyframes cx-idle-head{ 0%,60%,100%{transform:rotate(0)} 72%{transform:rotate(-4deg)} 86%{transform:rotate(3deg)} }

/* ============================ WALK ============================ */
[data-state="walk"] .comix-bob  { animation:cx-walk-bob .5s ease-in-out infinite; }
[data-state="walk"] .comix-lean { animation:cx-walk-tilt 1s ease-in-out infinite; }
[data-state="walk"] .comix-scale{ animation:cx-walk-squash .5s ease-in-out infinite; }
[data-state="walk"] .comix-head { animation:cx-walk-head 1s ease-in-out infinite; }
[data-state="walk"] .comix-shadow{ animation:cx-walk-shadow .5s ease-in-out infinite; }
@keyframes cx-walk-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes cx-walk-tilt{ 0%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} 100%{transform:rotate(-4deg)} }
@keyframes cx-walk-squash{ 0%,100%{transform:scale(1.03,.97)} 50%{transform:scale(.98,1.02)} }
@keyframes cx-walk-head{ 0%{transform:rotate(3deg)} 50%{transform:rotate(-3deg)} 100%{transform:rotate(3deg)} }
@keyframes cx-walk-shadow{ 0%,100%{transform:translateX(-50%) scale(1);opacity:.5} 50%{transform:translateX(-50%) scale(.7);opacity:.75} }

/* ============================ SEARCH ============================ */
/* ComiX gira la cabeza y ESCANEA de un lado a otro; la antena se balancea
   con la cabeza; el cuerpo acompaña con leve inclinación; la lupa sigue la
   mirada. Movimiento genuino, no un emoji encima. */
[data-state="search"] .comix-head { animation:cx-search-head 3.4s ease-in-out infinite; }
[data-state="search"] .comix-lean { animation:cx-search-lean 3.4s ease-in-out infinite; }
[data-state="search"] .comix-scale{ animation:cx-breathe 3.4s ease-in-out infinite; }
[data-state="search"] .comix-fx::before{ content:"🔍"; position:absolute; font-size:28px; top:18%; left:50%; margin-left:-15px;
  filter:drop-shadow(0 3px 4px #0006); animation:cx-search-glass 3.4s ease-in-out infinite; }
@keyframes cx-search-head{
  0%   {transform:rotate(0deg)   translateY(0)}
  14%  {transform:rotate(-10deg) translateY(-2px)}   /* mira izquierda */
  38%  {transform:rotate(-10deg) translateY(-2px)}
  50%  {transform:rotate(2deg)   translateY(2px)}     /* echa un ojo abajo */
  62%  {transform:rotate(10deg)  translateY(-2px)}    /* mira derecha */
  86%  {transform:rotate(10deg)  translateY(-2px)}
  100% {transform:rotate(0deg)   translateY(0)}
}
@keyframes cx-search-lean{
  0%,100%{transform:rotate(0)} 26%{transform:rotate(-3deg)} 74%{transform:rotate(3deg)}
}
@keyframes cx-search-glass{
  0%   {transform:translate(0,4px)     scale(.9);  opacity:.55}
  14%  {transform:translate(-78px,-14px) scale(1.05); opacity:1}  /* junto al ojo izquierdo */
  38%  {transform:translate(-78px,-14px) scale(1.05); opacity:1}
  50%  {transform:translate(0,24px)    scale(.9);  opacity:.9}   /* mira abajo */
  62%  {transform:translate(78px,-14px)  scale(1.05); opacity:1}  /* junto al ojo derecho */
  86%  {transform:translate(78px,-14px)  scale(1.05); opacity:1}
  100% {transform:translate(0,4px)     scale(.9);  opacity:.55}
}

/* ============================ LIKE / APROBACIÓN ============================ */
/* ComiX CAMBIA LA POSE: alza el brazo derecho y sube el pulgar bien alto,
   con rebote; el cuerpo da un saltito orgulloso y la cabeza asiente.
   El pulgar REAL es la estrella (sin emoji), con chispitas de festejo. */
[data-state="like"] .comix-arm  { animation:cx-like-arm 1.5s cubic-bezier(.34,1.56,.5,1) 1; }
[data-state="like"] .comix-bob  { animation:cx-like-hop 1.5s ease-in-out 1; }
[data-state="like"] .comix-scale{ animation:cx-like-pop 1.5s ease-out 1; }
[data-state="like"] .comix-head { animation:cx-like-nod 1.5s ease-out 1; }
[data-state="like"] .comix-fx::after{ content:"✨"; position:absolute; top:14%; right:14%; font-size:26px;
  animation:cx-like-spark 1.5s ease-out 1; }
@keyframes cx-like-arm{
  0%   {transform:rotate(0deg)}
  18%  {transform:rotate(-34deg)}   /* sube de golpe (rebote) */
  30%  {transform:rotate(-26deg)}   /* asienta arriba */
  72%  {transform:rotate(-26deg)}   /* MANTIENE el pulgar alzado */
  100% {transform:rotate(0deg)}     /* baja al reposo (= idle) */
}
@keyframes cx-like-hop{
  0%,100%{transform:translateY(0)} 16%{transform:translateY(-22px)} 30%{transform:translateY(0)} 40%{transform:translateY(-6px)} 50%{transform:translateY(0)}
}
@keyframes cx-like-pop{
  0%{transform:scale(1)} 16%{transform:scale(1.06,1.02)} 30%{transform:scale(.98,1.01)} 45%{transform:scale(1)} 100%{transform:scale(1)}
}
@keyframes cx-like-nod{
  0%{transform:rotate(0)} 20%{transform:rotate(6deg)} 40%{transform:rotate(-3deg)} 60%{transform:rotate(2deg)} 100%{transform:rotate(0)}
}
@keyframes cx-like-spark{
  0%{opacity:0;transform:scale(.4) rotate(0)} 25%{opacity:1;transform:scale(1.2) rotate(15deg)}
  60%{opacity:1} 100%{opacity:0;transform:scale(1) translateY(-20px) rotate(30deg)}
}

/* ============================ GREET (login/bienvenida — ya aprobado) ============================ */
[data-state="greet"] .comix-bob { animation:cx-greet-in .6s cubic-bezier(.2,1.3,.4,1) 1; }
[data-state="greet"] .comix-lean{ animation:cx-greet-wave 2.2s ease-in-out .55s 1; }
[data-state="greet"] .comix-scale{ animation:cx-breathe 2.6s ease-in-out infinite; }
[data-state="greet"] .comix-head{ animation:cx-greet-nod 2.2s ease-in-out .55s 1; }
[data-state="greet"] .comix-fx::before{ content:"¡Hola! 👋"; position:absolute; top:2%; left:60%;
  background:#fff; color:#111; font-weight:800; font-size:14px; padding:7px 11px; border-radius:12px 12px 12px 3px;
  box-shadow:0 6px 18px #0007; white-space:nowrap; animation:cx-greet-bubble 2.6s ease-out 1; }
@keyframes cx-greet-in{ 0%{transform:translateY(60px) scale(.8);opacity:0} 60%{transform:translateY(-10px) scale(1.04)} 100%{transform:translateY(0) scale(1);opacity:1} }
@keyframes cx-greet-wave{ 0%,100%{transform:rotate(0)} 20%{transform:rotate(-7deg)} 40%{transform:rotate(6deg)} 60%{transform:rotate(-6deg)} 80%{transform:rotate(5deg)} }
@keyframes cx-greet-nod{ 0%,100%{transform:rotate(0)} 30%{transform:rotate(4deg)} 60%{transform:rotate(-3deg)} }
@keyframes cx-greet-bubble{ 0%{opacity:0;transform:translateY(10px) scale(.6)} 20%{opacity:1;transform:translateY(0) scale(1)} 85%{opacity:1} 100%{opacity:0} }

/* ============================ HELP (FAB "Pregúntale a ComiX") ============================ */
[data-state="help"] .comix-scale{ animation:cx-breathe 3s ease-in-out infinite; }
[data-state="help"] .comix-head{ animation:cx-help-wiggle 3s ease-in-out infinite; }
@keyframes cx-help-wiggle{ 0%,80%,100%{transform:rotate(0)} 86%{transform:rotate(-9deg)} 91%{transform:rotate(9deg)} 96%{transform:rotate(-5deg)} }

@media (prefers-reduced-motion:reduce){
  .comix *{ animation-duration:.001s !important; animation-iteration-count:1 !important; }
}