/* ═══ La perrovaquita — VIGILAR ════════════════════════════════════════
   Conducta espontánea del repertorio, clase edu-mascota--vigilando, sobre la
   vista de frente con la pose de pie. De pie y alerta, mira a un lado y al otro
   con las orejas levantadas, como quien cuida la casa. La da de alta
   js/compartido/mascota/conducta/vigilar.js, que dice cuánto dura: 2.6 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--vigilando .edu-mascota__cabeza-ladeo {
    animation-play-state: paused;
}

/* Los ojos se van a cada lado ANTES que la cabeza: así mira un animal, primero la
   mirada y luego el giro. Se anima la propiedad translate de __mirada, la misma que
   usa seguir el cursor, así que pupila y brillos van juntos. */
.edu-mascota--vigilando .edu-mascota__mirada {
    animation: edu-pv-vigilar-mirada 2.6s ease-in-out 1 both;
}

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

    12%, 38% {
        translate: -3px 0;
    }

    48%, 74% {
        translate: 3px 0;
    }

    86% {
        translate: 0 0;
    }
}

.edu-mascota--vigilando .edu-mascota__cabeza-gesto {
    animation: edu-pv-vigilar-cabeza 2.6s ease-in-out 1 both;
}

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

    18%, 38% {
        transform: rotate(-5deg);
    }

    54%, 74% {
        transform: rotate(5deg);
    }

    88% {
        transform: none;
    }
}

/* Orejas levantadas todo el rato: está alerta. */
.edu-mascota--vigilando .edu-mascota__oreja--izq {
    animation: edu-pv-vigilar-oreja-izq 2.6s ease-in-out 1 both;
}

.edu-mascota--vigilando .edu-mascota__oreja--der {
    animation: edu-pv-vigilar-oreja-der 2.6s ease-in-out 1 both;
}

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

    10%, 88% {
        transform: rotate(-12deg);
    }
}

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

    10%, 88% {
        transform: rotate(12deg);
    }
}

/* La cola se queda casi quieta: concentrada no menea. */
.edu-mascota--vigilando .edu-mascota__cola {
    animation-duration: 3.2s;
}