﻿/* ═══ La perrovaquita — RELAMERSE ══════════════════════════════════════
   Conducta espontánea del repertorio, clase edu-mascota--relamiendo, sobre la
   vista de frente con la pose sentada. Se pasa la lengua por la nariz dos
   veces, con los ojos entornados de gusto. La da de alta
   js/compartido/mascota/conducta/relamerse.js, que dice cuánto dura: 1.4 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--relamiendo .edu-mascota__cabeza-ladeo {
    animation-play-state: paused;
}

/* LA LENGUA SUBE HACIA LA NARIZ: un escalado vertical NEGATIVO sobre su borde de
   arriba, que es el labio, la voltea hacia arriba en vez de dejarla colgando. Dos
   lametones. Parte y acaba escondida, que es su reposo de base.css. */
.edu-mascota--relamiendo .edu-mascota__lengua {
    animation: edu-pv-relamer-lengua 1.4s ease-in-out 1 both;
}

@keyframes edu-pv-relamer-lengua {
    0%, 30%, 60%, 100% {
        transform: scaleY(0);
    }

    15%, 45% {
        transform: scaleY(-1.1);
    }
}

/* La cabeza sube un pelo, como quien saborea. */
.edu-mascota--relamiendo .edu-mascota__cabeza-gesto {
    animation: edu-pv-relamer-cabeza 1.4s ease-in-out 1 both;
}

@keyframes edu-pv-relamer-cabeza {
    0%, 100% {
        transform: none;
    }

    15%, 55% {
        transform: translateY(-1px) rotate(-2deg);
    }
}

/* Ojos entornados de gusto mientras se relame. */
.edu-mascota--relamiendo .edu-mascota__parpado {
    animation: edu-pv-relamer-parpado 1.4s ease-in-out 1 both;
}

.edu-mascota--relamiendo .edu-mascota__parpado-parpadeo {
    animation: none;
}

@keyframes edu-pv-relamer-parpado {
    0%, 100% {
        transform: translateY(-27px);
    }

    12%, 60% {
        transform: translateY(-15px);
    }

    75% {
        transform: translateY(-27px);
    }
}