/* ═══ La perrovaquita — EMBOBARSE ══════════════════════════════════════
   Conducta espontánea del repertorio, clase edu-mascota--embobada, sobre la
   vista de frente con la pose sentada. Se queda en las nubes: mira hacia arriba
   con los ojos a medio cerrar, la cabeza alzada, las orejas sueltas y la
   boquita entreabierta. La da de alta
   js/compartido/mascota/conducta/embobarse.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--embobada .edu-mascota__cabeza-ladeo {
    animation-play-state: paused;
}

/* La mirada se va hacia arriba, a las nubes. Propiedad translate de __mirada, la
   misma que usa seguir el cursor. */
.edu-mascota--embobada .edu-mascota__mirada {
    animation: edu-pv-embobada-mirada 2.6s ease-in-out 1 both;
}

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

    15%, 85% {
        translate: 1px -3.5px;
    }
}

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

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

    15%, 85% {
        transform: translateY(-2px) rotate(-4deg);
    }
}

/* Párpados a medio caer: está en otro sitio. */
.edu-mascota--embobada .edu-mascota__parpado {
    animation: edu-pv-embobada-parpado 2.6s ease-in-out 1 both;
}

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

    15%, 85% {
        transform: translateY(-19px);
    }
}

/* Orejas sueltas y la boquita entreabierta con la lengua apenas asomando. */
.edu-mascota--embobada .edu-mascota__oreja--izq {
    animation: edu-pv-embobada-oreja-izq 2.6s ease-in-out 1 both;
}

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

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

    20%, 85% {
        transform: rotate(6deg);
    }
}

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

    20%, 85% {
        transform: rotate(-6deg);
    }
}

.edu-mascota--embobada .edu-mascota__lengua {
    animation: edu-pv-embobada-lengua 2.6s ease-in-out 1 both;
}

@keyframes edu-pv-embobada-lengua {
    0%, 22%, 82%, 100% {
        transform: scaleY(0);
    }

    32%, 75% {
        transform: scaleY(.35);
    }
}