/* KURI · movimiento.
   La emoción de un pájaro no está en la boca: el pico no se curva. Va en el
   PÁRPADO (cuánto baja), la CEJA (hacia dónde cae) y la POSTURA (cuánto se
   encoge). Una ceja que baja hacia el pico es ENFADO; la tristeza sube el
   extremo interno. Kuri no regaña nunca: el producto entero se apoya en que el
   error no se viva como castigo.

   El estado base es el pájaro completo y visible. La animación se AÑADE encima,
   nunca lo sustituye: si no hay compositor (pestaña de fondo, headless), lo que
   queda es un colibrí quieto, no un hueco. */

.kuri{overflow:visible;display:block}
.kuerpo{transform-origin:82px 90px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.cola{transform-origin:46px 100px;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.parpado{transform-origin:110px 45px;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.ceja{transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1);transform-origin:110px 47px}
.pupila{transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.halo{opacity:0;transform-origin:82px 82px;transition:opacity .25s ease}
.lagrima{opacity:0}
.puntos,.zzz{opacity:0}
.flor{opacity:0;transform-origin:166px 64px;transition:opacity .25s ease}

/* ── ALETEO ───────────────────────────────────────────────────────────────
   Dos alas en posiciones distintas alternando rápido leen como movimiento; una
   sola girando lee como un molino. Es el mismo truco que la hélice borrosa del
   dibujo animado. 14 fotogramas por segundo bastan para el efecto: el ojo
   completa el resto. */
.ala-a,.ala-b{transform-origin:74px 78px}
.kuri-vive .ala-a{animation:aleteoA .07s steps(1) infinite}
.kuri-vive .ala-b{animation:aleteoB .07s steps(1) infinite}
@keyframes aleteoA{0%,49%{opacity:.92}50%,100%{opacity:.34}}
@keyframes aleteoB{0%,49%{opacity:.34}50%,100%{opacity:.92}}
.kuri-vive .ala-tras{animation:aleteoTras .07s steps(1) infinite;transform-origin:82px 70px}
@keyframes aleteoTras{0%,49%{opacity:.28;transform:rotate(-6deg)}50%,100%{opacity:.6;transform:rotate(8deg)}}

/* ── SUSPENSIÓN ─────────────────────────────────────────────────────────────
   Un colibrí quieto en el aire no está quieto: corrige todo el tiempo. La deriva
   es minúscula y ligeramente irregular, porque una oscilación perfecta lee como
   un péndulo, no como un ser vivo. */
.kuri-vive .kuerpo{animation:suspende 2.6s ease-in-out infinite alternate}
@keyframes suspende{
  0%{transform:translate(0,0) rotate(0)}
  40%{transform:translate(-1px,-3px) rotate(-.6deg)}
  100%{transform:translate(1px,-5px) rotate(.5deg)}}
.kuri-vive .ojo{animation:pestanea 5.7s infinite}
@keyframes pestanea{0%,96.2%,100%{transform:none}97.4%{transform:translateY(-9px)}}

/* ── ESTADOS ──────────────────────────────────────────────────────────────── */
/* saluda: se inclina hacia adelante y abre la cola */
.e-saluda .kuerpo{animation:saluda .9s cubic-bezier(.16,1,.3,1)}
@keyframes saluda{0%{transform:translateY(10px) scale(.9)}55%{transform:translateY(-8px) rotate(-7deg)}
  100%{transform:none}}
.e-saluda .cola{transform:rotate(-9deg)}

/* atento: se acerca un poco */
.e-atento .kuerpo{transform:translateX(3px) scale(1.03)}

/* piensa: tres puntos que orbitan; el cuerpo baja el ritmo */
.e-piensa .kuerpo{animation:suspende 4.2s ease-in-out infinite alternate}
.e-piensa .puntos{opacity:1}
.e-piensa .p1{animation:orbita 1.15s ease-in-out infinite}
.e-piensa .p2{animation:orbita 1.15s ease-in-out .17s infinite}
.e-piensa .p3{animation:orbita 1.15s ease-in-out .34s infinite}
@keyframes orbita{0%,100%{transform:translateY(0);opacity:.35}45%{transform:translateY(-8px);opacity:1}}

/* acierto: sube de golpe, la cola se abre. Sin rebote elástico: un colibrí
   acelera y frena, no rebota como una pelota. */
.e-acierto .kuerpo{animation:brinca .55s cubic-bezier(.16,1,.3,1)}
@keyframes brinca{0%{transform:none}35%{transform:translateY(-22px) rotate(-8deg) scale(1.04)}
  100%{transform:none}}
.e-acierto .cola{transform:rotate(-13deg) scale(1.06)}
.e-acierto .parpado{transform:translateY(-2px)}

/* celebra: sube, gira sobre sí mismo y aparece la flor. Un colibrí que logra
   algo come: la flor es la recompensa dicha en su propio idioma. */
.e-celebra .kuerpo{animation:celebra 1.15s cubic-bezier(.16,1,.3,1)}
@keyframes celebra{0%{transform:none}22%{transform:translateY(-34px) rotate(-14deg)}
  55%{transform:translateY(-26px) rotate(9deg) scale(1.06)}100%{transform:none}}
.e-celebra .cola{transform:rotate(-20deg) scale(1.12)}
.e-celebra .flor{opacity:1;animation:floreceF 1.15s cubic-bezier(.16,1,.3,1)}
@keyframes floreceF{0%{transform:scale(0)}45%{transform:scale(1.18)}100%{transform:scale(1)}}

/* error: se echa atrás. Ni rojo, ni ceño de enfado. */
.e-error .kuerpo{animation:retrocede .5s cubic-bezier(.16,1,.3,1)}
@keyframes retrocede{0%,100%{transform:none}40%{transform:translateX(-7px) rotate(4deg)}}
.e-error .ceja{opacity:1;transform:rotate(-7deg)}
.e-error .parpado{transform:translateY(2px)}
.e-error .cola{transform:rotate(6deg)}

/* triste: se encoge, el párpado baja, la ceja SUBE por dentro y la cola cae.
   Si la ceja bajara hacia el pico sería enfado, que es lo contrario de lo que
   hace falta aquí. */
.e-triste .kuerpo{transform:translateY(6px) scale(.96) rotate(3deg);
  animation:suspende 5.4s ease-in-out infinite alternate}
.e-triste .parpado{transform:translateY(5px)}
.e-triste .ceja{opacity:1;transform:rotate(-13deg) translateY(-2px)}
.e-triste .cola{transform:rotate(14deg)}
.e-triste .ala-a,.e-triste .ala-b,.e-triste .ala-tras{animation-duration:.13s}

/* llora: como triste, más hondo, y le caen lágrimas */
.e-llora .kuerpo{transform:translateY(9px) scale(.94) rotate(4deg);
  animation:tiembla 2.6s ease-in-out infinite}
@keyframes tiembla{0%,100%{transform:translateY(9px) scale(.94) rotate(4deg)}
  30%{transform:translateY(10px) scale(.94) rotate(2.4deg)}
  70%{transform:translateY(10px) scale(.94) rotate(5.6deg)}}
.e-llora .parpado{transform:translateY(7px)}
.e-llora .ceja{opacity:1;transform:rotate(-16deg) translateY(-3px)}
.e-llora .cola{transform:rotate(18deg)}
.e-llora .lagrima{animation:cae 1.6s ease-in infinite}
@keyframes cae{0%{opacity:0;transform:translateY(0) scale(.5)}
  18%{opacity:.95;transform:translateY(3px) scale(1)}
  100%{opacity:0;transform:translateY(30px) scale(.8)}}
.e-llora .ala-a,.e-llora .ala-b,.e-llora .ala-tras{animation-duration:.16s}

/* explica: se orienta hacia el texto */
.e-explica .kuerpo{transform:translateX(-4px) rotate(-3deg)}

/* anima: dos respiraciones */
.e-anima .kuerpo{animation:respira 1s ease-in-out 2}
@keyframes respira{0%,100%{transform:none}50%{transform:scale(1.06) translateY(-4px)}}
.e-anima .cola{transform:rotate(-10deg)}

/* escucha: el halo respira con el nivel real del micrófono */
.e-escucha .halo{opacity:1;animation:respiraHalo .95s ease-in-out infinite alternate}
@keyframes respiraHalo{from{transform:scale(1);opacity:.14}to{transform:scale(1.18);opacity:.4}}

/* habla: el pico se abre y se cierra por pasos, al compás de la amplitud */
.e-habla .pico{animation:picoHabla .3s steps(1) infinite;transform-origin:126px 71px}
@keyframes picoHabla{0%{transform:rotate(0)}33%{transform:rotate(-7deg)}66%{transform:rotate(-3deg)}}
.e-habla .kuerpo{animation:suspende 2s ease-in-out infinite alternate}

/* duerme: se posa, cierra el ojo y baja el aleteo casi a cero */
.e-duerme .kuerpo{transform:translateY(8px) scale(.95);animation:suspende 6.5s ease-in-out infinite alternate}
.e-duerme .parpado{transform:translateY(9px)}
.e-duerme .cola{transform:rotate(10deg)}
.e-duerme .ala-a,.e-duerme .ala-b{animation:none;opacity:.5}
.e-duerme .ala-tras{animation:none;opacity:.3}
.e-duerme .zzz{opacity:1}
.e-duerme .z1{animation:sube 2.6s infinite}
.e-duerme .z2{animation:sube 2.6s .5s infinite}
.e-duerme .z3{animation:sube 2.6s 1s infinite}
@keyframes sube{0%{transform:translate(0,0);opacity:0}22%{opacity:.95}
  100%{transform:translate(11px,-26px);opacity:0}}

/* sin motor: el aleteo se detiene. Un fallo del sistema no se anima: la
   quietud ES el mensaje, y en un colibrí la quietud se nota más que en nada. */
.e-sin-motor .kuerpo{animation:none;transform:translateY(10px) rotate(6deg);filter:grayscale(.75);opacity:.65}
.e-sin-motor .ala-a,.e-sin-motor .ala-b,.e-sin-motor .ala-tras{animation:none;opacity:.35}
.e-sin-motor .parpado{transform:translateY(6px)}

@media (prefers-reduced-motion:reduce){
  /* Se conserva la INFORMACIÓN y se quita el movimiento: las alas quedan
     abiertas y quietas, y los estados siguen distinguiéndose por postura,
     párpado y ceja, que no son animación sino forma. */
  .kuri-vive .kuerpo,.kuri-vive .ojo,.e-piensa .p1,.e-piensa .p2,.e-piensa .p3,
  .e-llora .lagrima,.e-duerme .z1,.e-duerme .z2,.e-duerme .z3{animation:none !important}
  .kuri-vive .ala-a{opacity:.9;animation:none}
  .kuri-vive .ala-b{opacity:.35;animation:none}
  .kuri-vive .ala-tras{opacity:.4;animation:none}
  .e-llora .lagrima{opacity:.9}
}