/* ═══ La perrovaquita — HIPO ═══════════════════════════════════════════
   Conducta espontánea del repertorio, clase edu-mascota--hipando, sobre la
   vista de frente con la pose sentada. Tres hipos seguidos: el cuerpo da un
   respingo hacia arriba en cada uno, las cejas saltan de sorpresa y las orejas
   dan un tirón. La da de alta js/compartido/mascota/conducta/hipo.js, que dice
   cuánto dura: 2.1 s, lo mismo que sus animaciones, que corren una sola vez y
   empiezan y acaban en reposo para que al quitarse la clase no haya salto. ═══ */

/* LOS TRES HIPOS van al mismo reloj en todas las piezas: al 16 %, al 50 % y al
   84 % de los 2,1 s. Cada uno es un respingo seco —sube y vuelve en un 10 %— con
   quietud entre medias, que es lo que lo hace leerse como hipo y no como saltos. */

/* El cuerpo da el respingo; lleva dentro la cabeza, que viaja con él. */
.edu-mascota--hipando .edu-mascota__tronco {
    animation: edu-pv-hipo-tronco 2.1s ease-out 1 both;
}

@keyframes edu-pv-hipo-tronco {
    0%, 12%, 22%, 46%, 56%, 80%, 90%, 100% {
        transform: none;
    }

    16%, 50%, 84% {
        transform: translateY(-5px) scale(.97, 1.04);
    }
}

/* Las cejas saltan con cada hipo: la sorpresa es lo gracioso. */
.edu-mascota--hipando .edu-mascota__ceja {
    animation: edu-pv-hipo-ceja 2.1s ease-out 1 both;
}

@keyframes edu-pv-hipo-ceja {
    0%, 12%, 26%, 46%, 60%, 80%, 94%, 100% {
        transform: none;
    }

    16%, 50%, 84% {
        transform: translateY(-3px);
    }
}

/* Las orejas dan un tirón hacia fuera en cada hipo. */
.edu-mascota--hipando .edu-mascota__oreja--izq {
    animation: edu-pv-hipo-oreja-izq 2.1s ease-out 1 both;
}

.edu-mascota--hipando .edu-mascota__oreja--der {
    animation: edu-pv-hipo-oreja-der 2.1s ease-out 1 both;
}

@keyframes edu-pv-hipo-oreja-izq {
    0%, 14%, 26%, 48%, 60%, 82%, 94%, 100% {
        transform: none;
    }

    18%, 52%, 86% {
        transform: rotate(-12deg);
    }
}

@keyframes edu-pv-hipo-oreja-der {
    0%, 14%, 26%, 48%, 60%, 82%, 94%, 100% {
        transform: none;
    }

    18%, 52%, 86% {
        transform: rotate(12deg);
    }
}