/* ═══ La perrovaquita — CAMINAR ════════════════════════════════════════════
   La única conducta que usa la vista de PERFIL: un animal de frente que se
   desplaza de lado se ve deslizando, no andando. La clase la gestiona
   movimiento-paseo.js. Se carga después de caricia.css, en el orden que ocupaba
   en el archivo original. ═══════════════════════════════════════════════════ */

/* Las patas se mueven en DIAGONAL, como camina un cuadrúpedo: la delantera de un
   lado con la trasera del otro. Con las cuatro en fase daría saltitos. */
.edu-mascota--caminando .edu-mascota__p-pata--del,
.edu-mascota--caminando .edu-mascota__p-pata--tras-lejos {
    animation: edu-pv-paso .48s linear infinite;
}

.edu-mascota--caminando .edu-mascota__p-pata--del-lejos,
.edu-mascota--caminando .edu-mascota__p-pata--tras {
    animation: edu-pv-paso .48s linear infinite;
    /* Media zancada de desfase: es lo que produce la diagonal. */
    animation-delay: -.24s;
}

/* UN PASO DE VERDAD Y NO UN PÉNDULO. Con la mano en el suelo, la pata va de delante
   a atrás a ritmo constante, como empuja un animal; luego se despega, se encoge
   —el scaleY desde el nacimiento sube la mano— y vuelve adelante en el aire, más
   deprisa. Un vaivén simétrico arrastraría la mano por el suelo y se leería
   mecánico. Positivo es hacia delante: el dibujo mira a la izquierda. */
@keyframes edu-pv-paso {
    0% {
        transform: rotate(15deg);
        animation-timing-function: linear;
    }

    56% {
        transform: rotate(-15deg);
        animation-timing-function: ease-out;
    }

    78% {
        transform: rotate(0deg) scaleY(.9);
        animation-timing-function: ease-in;
    }

    100% {
        transform: rotate(15deg);
    }
}

/* El cuerpo APLASTA en cada apoyo y ESTIRA entre uno y otro, al doble de frecuencia
   que las patas. Sin esto se desliza como una pegatina; con esto pesa. */
.edu-mascota--caminando .edu-mascota__p-cuerpo {
    animation: edu-pv-trote .24s ease-in-out infinite;
}

@keyframes edu-pv-trote {
    0%, 100% {
        transform: translateY(0) scale(1.015, .985);
    }

    50% {
        transform: translateY(-2px) scale(.99, 1.01);
    }
}

/* La cabeza acompaña el trote con un cabeceo corto: un perro que anda no lleva la
   cabeza clavada. */
.edu-mascota--caminando .edu-mascota__p-cabeza {
    animation: edu-pv-cabeceo .48s ease-in-out infinite;
}

@keyframes edu-pv-cabeceo {
    0%, 100% {
        transform: rotate(-2deg) translateY(0);
    }

    50% {
        transform: rotate(2deg) translateY(-1.5px);
    }
}

/* La mitad delantera del collar y la chapa van dentro de la cabeza, pero son del
   cuello: hacen el cabeceo AL REVÉS, sobre la misma nuca, y así se quedan quietas
   mientras la cabeza cabecea, sin separarse de la mitad de atrás. Cada keyframe es
   el inverso exacto del de edu-pv-cabeceo, con la misma curva y la misma duración. */
.edu-mascota--caminando .edu-mascota__p-collar {
    transform-origin: 70px 80px;
    animation: edu-pv-cabeceo-inverso .48s ease-in-out infinite;
}

@keyframes edu-pv-cabeceo-inverso {
    0%, 100% {
        transform: translateY(0) rotate(2deg);
    }

    50% {
        transform: translateY(1.5px) rotate(-2deg);
    }
}

/* La oreja bota con el trote y con retardo: es lo que delata que hay peso. */
.edu-mascota--caminando .edu-mascota__p-oreja {
    transition: none;
    animation: edu-pv-oreja-trote .48s ease-in-out infinite;
    animation-delay: -.08s;
}

@keyframes edu-pv-oreja-trote {
    0%, 100% {
        transform: rotate(-9deg);
    }

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

.edu-mascota--caminando .edu-mascota__cola {
    animation-duration: .48s;
}

/* Aviso al navegador solo mientras camina: dejarlo puesto siempre mantendría una
   capa de composición reservada sin motivo. */
.edu-mascota--caminando {
    will-change: transform;
}