/* ═══ La perrovaquita — BRINCAR ════════════════════════════════════════
   Conducta espontánea del repertorio, clase edu-mascota--brincando, sobre la
   vista de frente con la pose de pie. De pie, da un brinco de alegría: se
   agacha, salta con las orejas al aire y aterriza con un aplastado. La da de
   alta js/compartido/mascota/conducta/brincar.js, que dice cuánto dura: 1.1 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. ═══ */

/* SALTA LA VISTA DE FRENTE y no el SVG: la sombra vive fuera de ella, en el SVG,
   y así se queda en el suelo mientras el cuerpo sube. Va en unidades del dibujo,
   que escalan con él en móvil. Su origen es el suelo (base.css), así que aplasta y
   estira desde los pies.

   Esta vista trae de base.css el asentarse de una sola vez. Al quitarse la clase
   esa animación vuelve a aplicarse y se repite: se lee como que se asienta al
   aterrizar, que es justo lo que toca. */
.edu-mascota--brincando .edu-mascota__vista--frente {
    animation: edu-pv-brincar-salto 1.1s ease-in-out 1 both;
}

@keyframes edu-pv-brincar-salto {
    0%, 100% {
        transform: none;
    }

    20% {
        transform: translateY(2px) scale(1.05, .95);
    }

    45% {
        transform: translateY(-9px) scale(.96, 1.05);
    }

    70% {
        transform: scale(1.06, .94);
    }

    85% {
        transform: scale(.98, 1.02);
    }
}

/* Las orejas vuelan arriba en el aire. */
.edu-mascota--brincando .edu-mascota__oreja--izq {
    animation: edu-pv-brincar-oreja-izq 1.1s ease-in-out 1 both;
}

.edu-mascota--brincando .edu-mascota__oreja--der {
    animation: edu-pv-brincar-oreja-der 1.1s ease-in-out 1 both;
}

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

    50% {
        transform: rotate(-20deg);
    }

    75% {
        transform: rotate(6deg);
    }
}

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

    50% {
        transform: rotate(20deg);
    }

    75% {
        transform: rotate(-6deg);
    }
}

/* La sombra se encoge con ella arriba: es lo que vende la altura. Parte de su
   reposo de base.css, que en la vista de frente no lleva transform. */
.edu-mascota--brincando .edu-mascota__sombra {
    animation: edu-pv-brincar-sombra 1.1s ease-in-out 1 both;
}

@keyframes edu-pv-brincar-sombra {
    0%, 100% {
        transform: none;
        opacity: 1;
    }

    45% {
        transform: scale(.78);
        opacity: .7;
    }

    70% {
        transform: none;
        opacity: 1;
    }
}