/* ═══ La perrovaquita — ESCUCHAR ═══════════════════════════════════════
   Conducta espontánea del repertorio, clase edu-mascota--escuchando, sobre la
   vista de frente con la pose sentada. Oye algo: levanta una oreja y mira hacia
   ese lado, luego la otra hacia el otro, con las cejas arriba y los ojos bien
   abiertos. La da de alta js/compartido/mascota/conducta/escuchar.js, que dice
   cuánto dura: 1.8 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. ═══ */

/* Mientras dura, el vaivén de mirar alrededor se PAUSA en vez de quitarse: al
   acabar sigue donde iba. */
.edu-mascota--escuchando .edu-mascota__cabeza-ladeo {
    animation-play-state: paused;
}

/* Una oreja y luego la otra, como quien busca de dónde viene el ruido. */
.edu-mascota--escuchando .edu-mascota__oreja--izq {
    animation: edu-pv-escuchar-oreja-izq 1.8s ease-in-out 1 both;
}

.edu-mascota--escuchando .edu-mascota__oreja--der {
    animation: edu-pv-escuchar-oreja-der 1.8s ease-in-out 1 both;
}

@keyframes edu-pv-escuchar-oreja-izq {
    0%, 48%, 100% {
        transform: none;
    }

    10%, 40% {
        transform: rotate(-20deg);
    }
}

@keyframes edu-pv-escuchar-oreja-der {
    0%, 42%, 84%, 100% {
        transform: none;
    }

    50%, 76% {
        transform: rotate(20deg);
    }
}

/* La cabeza y la mirada se van hacia la oreja que escucha. */
.edu-mascota--escuchando .edu-mascota__cabeza-gesto {
    animation: edu-pv-escuchar-cabeza 1.8s ease-in-out 1 both;
}

@keyframes edu-pv-escuchar-cabeza {
    0%, 100% {
        transform: none;
    }

    10%, 40% {
        transform: rotate(-5deg);
    }

    50%, 76% {
        transform: rotate(5deg);
    }

    88% {
        transform: none;
    }
}

.edu-mascota--escuchando .edu-mascota__mirada {
    animation: edu-pv-escuchar-mirada 1.8s ease-in-out 1 both;
}

@keyframes edu-pv-escuchar-mirada {
    0%, 100% {
        translate: 0 0;
    }

    10%, 40% {
        translate: -2.5px -1px;
    }

    50%, 76% {
        translate: 2.5px -1px;
    }

    88% {
        translate: 0 0;
    }
}

/* Cejas arriba todo el rato: atenta. */
.edu-mascota--escuchando .edu-mascota__ceja {
    animation: edu-pv-escuchar-ceja 1.8s ease-in-out 1 both;
}

@keyframes edu-pv-escuchar-ceja {
    0%, 100% {
        transform: none;
    }

    10%, 80% {
        transform: translateY(-2px);
    }
}