﻿/* ═══ La perrovaquita — BAILE: MENEÍTO ═════════════════════════════════════
   Sobre la pose parada de frente. Dos posturas que se alternan de golpe, sin
   pasos intermedios: el cuerpo se desplaza hacia un lado y se inclina hacia el
   otro, con los brazos en cruz haciendo de balancín y las orejas tiesas. Los pies
   se quedan plantados; se menea todo lo que va por encima de ellos. La clase
   edu-mascota--baile-meneito la pone y quita bailes.js a petición de
   js/compartido/mascota/baile/meneito.js; no forma parte de las conductas
   espontáneas. Se carga después de interfaz.css. ═════════════════════════ */

/* EL MENEO, a golpes y no a vaivén: step-end salta de una postura a la otra sin
   dibujar el camino, que es lo que le da el aire de baile entrecortado. Un ciclo
   son las dos posturas, 67 ms cada una.

   Se menean con el mismo giro, el mismo desplazamiento y el mismo pivote —el punto
   del suelo entre los dos pies— los muslos y el tronco, que lleva dentro los
   brazos y la cabeza. Los pies no se tocan: se quedan plantados y los muslos se
   deslizan sobre ellos, como una cadera que se mueve. */
.edu-mascota--pose-parada.edu-mascota--baile-meneito .edu-mascota__parada-tronco,
.edu-mascota--pose-parada.edu-mascota--baile-meneito .edu-mascota__vista--parada .edu-mascota__anca {
    transform-origin: 70px 146px;
    animation: edu-pv-meneito .134s step-end infinite;
}

@keyframes edu-pv-meneito {
    0%, 100% {
        transform: translateX(4.5px) rotate(-7.5deg);
    }

    50% {
        transform: translateX(-4.5px) rotate(7.5deg);
    }
}

/* La cabeza va con el tronco, sin su balanceo propio: un vaivén suave encima de un
   meneo a golpes se leería como una cabeza suelta. */
.edu-mascota--pose-parada.edu-mascota--baile-meneito .edu-mascota__parada-cabeza {
    animation: none;
}

/* LA COLA SIGUE AL CUERPO Y NO DEJA DE MENEARSE. Son dos animaciones a la vez sobre
   propiedades distintas: su meneo de siempre, más deprisa porque está bailando, en
   transform; y el del cuerpo en translate y rotate, que el navegador aplica por
   encima del transform.

   El cuerpo gira sobre el suelo entre los pies y la cola sobre su nacimiento, así
   que el desplazamiento de cada postura ya lleva sumada la diferencia entre los dos
   pivotes: girar ∓7,5° sobre su nacimiento y desplazarse eso equivale a girar sobre
   el suelo y moverse ±4,5 como el tronco. ESTOS NÚMEROS DEPENDEN del nacimiento de
   la cola que declara poses.css para la parada (96px 130px) y del meneo de arriba:
   si cambia cualquiera de los dos, se recalculan. */
.edu-mascota--pose-parada.edu-mascota--baile-meneito .edu-mascota__cola {
    animation: edu-pv-cola .6s cubic-bezier(.45, .05, .55, .95) infinite, edu-pv-meneito-cola .134s step-end infinite;
}

@keyframes edu-pv-meneito-cola {
    0%, 100% {
        translate: 2.19px -3.26px;
        rotate: -7.5deg;
    }

    50% {
        translate: -2.63px 3.53px;
        rotate: 7.5deg;
    }
}

/* LOS BRAZOS EN CRUZ, HACIENDO DE BALANCÍN. La manita de la parada cuelga; girando
   80° sobre el hombro —el borde superior de su caja, que declara poses.css— queda
   casi horizontal. En cada postura los dos giran 12° más en el sentido contrario al
   del cuerpo, así que sube el brazo del lado hacia el que se inclina y baja el
   otro. */
.edu-mascota--pose-parada.edu-mascota--baile-meneito .edu-mascota__mano--izq {
    animation: edu-pv-meneito-brazo-izq .134s step-end infinite;
}

.edu-mascota--pose-parada.edu-mascota--baile-meneito .edu-mascota__mano--der {
    animation: edu-pv-meneito-brazo-der .134s step-end infinite;
}

@keyframes edu-pv-meneito-brazo-izq {
    0%, 100% {
        transform: rotate(92deg);
    }

    50% {
        transform: rotate(68deg);
    }
}

@keyframes edu-pv-meneito-brazo-der {
    0%, 100% {
        transform: rotate(-68deg);
    }

    50% {
        transform: rotate(-92deg);
    }
}

/* LAS OREJAS, TIESAS Y EN V. Cuelgan por naturaleza; aquí giran 128° sobre su
   nacimiento hasta quedar de punta y algo abiertas, dejando asomar los cuernitos
   entre las dos. El nacimiento va en coordenadas de la cabeza, que es el sistema
   local de su grupo. Se levantan con una transición corta al empezar el baile, con
   un pelo de rebote, y durante el meneo van quietas: ya las inclina el tronco. Al
   acabar caen sin transición, y no se nota: salvo que ya estuviera de pie antes de
   bailar, la pose cambia en ese mismo instante y la vista parada se apaga con ella. */
.edu-mascota--pose-parada.edu-mascota--baile-meneito .edu-mascota__pa-oreja {
    transform-box: view-box;
    transition: transform .2s cubic-bezier(.3, 1.4, .6, 1);
}

.edu-mascota--pose-parada.edu-mascota--baile-meneito .edu-mascota__pa-oreja--izq {
    transform-origin: 38px 30px;
    transform: rotate(128deg);
}

.edu-mascota--pose-parada.edu-mascota--baile-meneito .edu-mascota__pa-oreja--der {
    transform-origin: 102px 30px;
    transform: rotate(-128deg);
}
