/* ═══ La perrovaquita — CABECEAR ═══════════════════════════════════════
   Conducta espontánea del repertorio, clase edu-mascota--cabeceando, sobre la
   vista de frente con la pose sentada. Se le cierran los ojos, la cabeza se le
   va cayendo poco a poco y, al cabecear, se despierta de un respingo con las
   orejas tiesas. La da de alta js/compartido/mascota/conducta/cabecear.js, que
   dice cuánto dura: 2.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--cabeceando .edu-mascota__cabeza-ladeo {
    animation-play-state: paused;
}

/* Los ojos se cierran despacio y se abren de golpe en el respingo. Desplazamiento
   del párpado en las unidades de base.css (-27 px abierto). Sin parpadeo. */
.edu-mascota--cabeceando .edu-mascota__parpado {
    animation: edu-pv-cabecear-parpado 2.8s ease-in-out 1 both;
}

.edu-mascota--cabeceando .edu-mascota__parpado-parpadeo {
    animation: none;
}

@keyframes edu-pv-cabecear-parpado {
    0%, 100% {
        transform: translateY(-27px);
    }

    30% {
        transform: translateY(-9px);
    }

    56% {
        transform: translateY(-2px);
    }

    60% {
        transform: translateY(-27px);
    }
}

/* La cabeza cae poco a poco y se levanta de golpe, pasándose un poco hacia atrás
   por el susto. */
.edu-mascota--cabeceando .edu-mascota__cabeza-gesto {
    animation: edu-pv-cabecear-cabeza 2.8s ease-in-out 1 both;
}

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

    30% {
        transform: translateY(2px) rotate(3deg);
    }

    56% {
        transform: translateY(6px) rotate(6deg);
    }

    61% {
        transform: translateY(-3px) rotate(-2deg);
    }

    72% {
        transform: none;
    }
}

/* En el respingo, orejas tiesas y cejas arriba. */
.edu-mascota--cabeceando .edu-mascota__oreja--izq {
    animation: edu-pv-cabecear-oreja-izq 2.8s ease-out 1 both;
}

.edu-mascota--cabeceando .edu-mascota__oreja--der {
    animation: edu-pv-cabecear-oreja-der 2.8s ease-out 1 both;
}

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

    62% {
        transform: rotate(-16deg);
    }

    80% {
        transform: none;
    }
}

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

    62% {
        transform: rotate(16deg);
    }

    80% {
        transform: none;
    }
}

.edu-mascota--cabeceando .edu-mascota__ceja {
    animation: edu-pv-cabecear-ceja 2.8s ease-out 1 both;
}

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

    62% {
        transform: translateY(-3px);
    }

    80% {
        transform: none;
    }
}