/* ═══ La perrovaquita — CURIOSEAR ══════════════════════════════════════
   Conducta espontánea del repertorio, clase edu-mascota--curioseando, sobre la
   vista de frente con la pose sentada. Ladea la cabeza a un lado y luego al
   otro, con las orejas levantadas y una ceja arriba: el clásico «¿eh?» de un
   perro que oye algo raro. La da de alta
   js/compartido/mascota/conducta/curiosear.js, que dice cuánto dura: 2 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--curioseando .edu-mascota__cabeza-ladeo {
    animation-play-state: paused;
}

/* La cabeza ladea MUCHO a un lado y luego al otro: es el gesto entero. En
   __cabeza-gesto, sobre la base del cráneo. */
.edu-mascota--curioseando .edu-mascota__cabeza-gesto {
    animation: edu-pv-curiosear-cabeza 2s ease-in-out 1 both;
}

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

    20%, 42% {
        transform: rotate(14deg);
    }

    56%, 80% {
        transform: rotate(-12deg);
    }
}

/* Las orejas se levantan mientras escucha. */
.edu-mascota--curioseando .edu-mascota__oreja--izq {
    animation: edu-pv-curiosear-oreja-izq 2s ease-in-out 1 both;
}

.edu-mascota--curioseando .edu-mascota__oreja--der {
    animation: edu-pv-curiosear-oreja-der 2s ease-in-out 1 both;
}

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

    18%, 82% {
        transform: rotate(-16deg);
    }
}

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

    18%, 82% {
        transform: rotate(16deg);
    }
}

/* Sube la ceja del lado hacia el que ladea, una y luego la otra. */
.edu-mascota--curioseando .edu-mascota__ceja--izq {
    animation: edu-pv-curiosear-ceja-izq 2s ease-in-out 1 both;
}

.edu-mascota--curioseando .edu-mascota__ceja--der {
    animation: edu-pv-curiosear-ceja-der 2s ease-in-out 1 both;
}

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

    20%, 42% {
        transform: translateY(-4px) rotate(-6deg);
    }
}

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

    56%, 80% {
        transform: translateY(-4px) rotate(6deg);
    }
}