/* ═══ La perrovaquita — BAILE: PERRITO SALTARÍN ══════════════════════════
   Sobre la pose parada de frente. La figura ENTERA salta (tronco y cabeza a la
   vez, desde el mismo grupo), con estirón al despegar y aplastamiento al caer;
   la cabeza ladea un poco a cada salto, las orejas bajan al despegar y vuelan
   hacia arriba al caer, las manitas suben en el aire y la sombra se encoge
   cuando está arriba. La clase edu-mascota--baile-perrito-saltarin la pone y
   quita bailes.js a petición de js/compartido/mascota/baile/perrito-saltarin.js;
   no forma parte de las conductas espontáneas. Se carga después de
   interfaz.css. ══════════════════════════════════════════════════════════ */

/* Un salto cada 0,5 s, de 24 px. El grupo de la vista contiene tronco y cabeza: al
   moverlo a él, la cabeza viaja pegada al cuerpo. */
.edu-mascota--pose-parada.edu-mascota--baile-perrito-saltarin .edu-mascota__vista--parada {
    transform-box: view-box;
    transform-origin: 70px 146px;
    animation: edu-pv-saltarin-salto .5s ease-in-out infinite;
}

@keyframes edu-pv-saltarin-salto {
    0% {
        transform: translateY(0) scale(1.06, .94);
    }

    18% {
        transform: translateY(-4px) scale(.96, 1.06);
    }

    50% {
        transform: translateY(-24px) scale(1, 1);
    }

    82% {
        transform: translateY(-3px) scale(.98, 1.03);
    }

    100% {
        transform: translateY(0) scale(1.06, .94);
    }
}

/* El tronco deja su balanceo de equilibrio: el salto ya lo mueve. */
.edu-mascota--pose-parada.edu-mascota--baile-perrito-saltarin .edu-mascota__parada-tronco {
    animation: none;
}

/* La cabeza ladea a un lado en un salto y al otro en el siguiente: dos saltos por
   ciclo. Solo gira: su colocación va en el grupo exterior del marcado, que ningún
   keyframe toca, y el giro es sobre la nuca que declara poses.css. */
.edu-mascota--pose-parada.edu-mascota--baile-perrito-saltarin .edu-mascota__parada-cabeza {
    animation: edu-pv-saltarin-cabeza 1s ease-in-out infinite;
}

@keyframes edu-pv-saltarin-cabeza {
    0%, 100% {
        transform: rotate(-7deg);
    }

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

/* Orejas: cada una gira desde su raíz (donde nace del cráneo, en las
   coordenadas locales de la cabeza). Al despegar caen hacia dentro y en lo alto
   vuelan hacia fuera y arriba; al caer vuelven. Mismo ritmo que el salto, con
   un pelo de retardo, que es lo que se lee como inercia. */
.edu-mascota--pose-parada.edu-mascota--baile-perrito-saltarin .edu-mascota__pa-oreja {
    transform-box: view-box;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: .05s;
}

.edu-mascota--pose-parada.edu-mascota--baile-perrito-saltarin .edu-mascota__pa-oreja--izq {
    transform-origin: 38px 30px;
    animation-name: edu-pv-saltarin-oreja-izq;
}

.edu-mascota--pose-parada.edu-mascota--baile-perrito-saltarin .edu-mascota__pa-oreja--der {
    transform-origin: 102px 30px;
    animation-name: edu-pv-saltarin-oreja-der;
}

@keyframes edu-pv-saltarin-oreja-izq {
    0%, 100% {
        transform: rotate(14deg);
    }

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

@keyframes edu-pv-saltarin-oreja-der {
    0%, 100% {
        transform: rotate(-14deg);
    }

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

/* El colgante del collar hace lo mismo, con menos recorrido. */
.edu-mascota--pose-parada.edu-mascota--baile-perrito-saltarin .edu-mascota__colgante {
    transition: none;
    animation: edu-pv-saltarin-colgante .5s ease-in-out infinite .06s;
}

@keyframes edu-pv-saltarin-colgante {
    0%, 100% {
        transform: rotate(-8deg);
    }

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

/* Manitas: arriba en el aire, abajo al caer. */
.edu-mascota--pose-parada.edu-mascota--baile-perrito-saltarin .edu-mascota__mano--izq,
.edu-mascota--pose-parada.edu-mascota--baile-perrito-saltarin .edu-mascota__mano--der {
    animation: edu-pv-saltarin-manita .5s ease-in-out infinite;
}

@keyframes edu-pv-saltarin-manita {
    0%, 100% {
        transform: rotate(10deg);
    }

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

/* La sombra se encoge cuando la figura está arriba: es lo que vende la altura. */
.edu-mascota--pose-parada.edu-mascota--baile-perrito-saltarin .edu-mascota__sombra {
    transform-box: view-box;
    transform-origin: 70px 146px;
    animation: edu-pv-saltarin-sombra .5s ease-in-out infinite;
}

@keyframes edu-pv-saltarin-sombra {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(.72);
        opacity: .6;
    }
}

/* La cola acompaña, rápida. */
.edu-mascota--pose-parada.edu-mascota--baile-perrito-saltarin .edu-mascota__cola {
    animation-duration: .3s;
}