/* ═══ La perrovaquita — BAILE: ABANICO ═════════════════════════════════════
   Sobre la pose parada de frente, vista un poco desde arriba y de lado. Da un
   paso hacia un lado y otro hacia el otro, con el cuerpo cargando el peso detrás
   de los pies, una mano doblada en la mejilla y la otra abanicándose la cara. La
   clase edu-mascota--baile-abanico la pone y quita bailes.js a petición de
   js/compartido/mascota/baile/abanico.js; no forma parte de las conductas
   espontáneas. Se carga después de interfaz.css. ═════════════════════════ */

/* TODO VA AL MISMO RELOJ. Los pasos, el cuerpo, la cola, la sombra y la mano de la
   mejilla comparten un ciclo de 1,6 s —ida y vuelta—, y la cabeza y las orejas van
   el doble de rápido, 0,8 s. Arrancan todas en el mismo instante, cuando
   bailes.js pone la clase, así que van acompasadas sin que ninguna espere a otra.
   Las fases de cada una están elegidas para encajar con las demás dentro de ese
   ciclo: si cambia la duración de una, cambia en todas. */

/* LA CÁMARA, UN POCO DESDE ARRIBA Y DE LADO. El dibujo entero se inclina como una
   lámina sobre su borde de abajo: la cabeza se acerca y los pies se alejan, y el
   eje algo torcido añade el punto de vista lateral. La perspectiva la pone el
   botón, que es el padre del SVG; sin ella el giro solo aplastaría el dibujo.

   El giro va en rotate y no en transform porque el transform del SVG ya lo ocupa
   el alzarse de poses.css: rotate se compone encima sin pisarlo. Entra con una
   transición corta al empezar el baile; al acabar vuelve sin ella, y no se nota:
   salvo que ya estuviera de pie antes de bailar, la pose cambia en ese mismo
   instante y el dibujo es otro.

   LA PERSPECTIVA VA EN PROPORCIÓN AL ANCHO DEL DIBUJO, unas 2,4 veces. Con un
   valor fijo, en pantallas estrechas, donde el dibujo es más pequeño, la misma
   inclinación se vería más plana. ESTOS NÚMEROS DEPENDEN del ancho de
   .edu-mascota__svg en base.css (8.5rem) y en interfaz.css bajo 48rem (5.2rem):
   si cambia cualquiera de los dos, se recalculan. */
.edu-mascota--pose-parada.edu-mascota--baile-abanico .edu-mascota__cuerpo-boton {
    perspective: 20rem;
}

.edu-mascota--pose-parada.edu-mascota--baile-abanico .edu-mascota__svg {
    rotate: 1 .5 0 -18deg;
    transition: rotate .35s ease-out;
}

@media (max-width: 47.99rem) {
    .edu-mascota--pose-parada.edu-mascota--baile-abanico .edu-mascota__cuerpo-boton {
        perspective: 12.3rem;
    }
}

/* LOS PASOS: la pata derecha se abre hacia su lado y la izquierda la sigue; luego
   abre la izquierda hacia el suyo y la derecha la sigue. Entre un paso y el
   siguiente los dos pies se quedan un momento quietos en el suelo: sin esa pausa
   se leería como arrastrar los pies y no como pisar.

   Cada pie va en arco: sube hasta la mitad del recorrido y baja hasta el sitio
   nuevo, frenando al subir (ease-out) y acelerando al bajar (ease-in), que es como
   se mueve algo con peso. Cada pata se mueve entera —muslo, pie y deditos— porque
   el marcado las agrupa en __pa-pierna. */
.edu-mascota--pose-parada.edu-mascota--baile-abanico .edu-mascota__pa-pierna--der {
    animation: edu-pv-abanico-paso-der 1.6s infinite;
}

.edu-mascota--pose-parada.edu-mascota--baile-abanico .edu-mascota__pa-pierna--izq {
    animation: edu-pv-abanico-paso-izq 1.6s infinite;
}

@keyframes edu-pv-abanico-paso-der {
    0% {
        transform: translate(-6px, 0);
        animation-timing-function: ease-out;
    }

    10% {
        transform: translate(0, -4px);
        animation-timing-function: ease-in;
    }

    20%, 70% {
        transform: translate(6px, 0);
        animation-timing-function: ease-out;
    }

    80% {
        transform: translate(0, -4px);
        animation-timing-function: ease-in;
    }

    90%, 100% {
        transform: translate(-6px, 0);
    }
}

@keyframes edu-pv-abanico-paso-izq {
    0%, 20% {
        transform: translate(-6px, 0);
        animation-timing-function: ease-out;
    }

    30% {
        transform: translate(0, -4px);
        animation-timing-function: ease-in;
    }

    40%, 50% {
        transform: translate(6px, 0);
        animation-timing-function: ease-out;
    }

    60% {
        transform: translate(0, -4px);
        animation-timing-function: ease-in;
    }

    70%, 100% {
        transform: translate(-6px, 0);
    }
}

/* EL CUERPO CARGA EL PESO DETRÁS DE LOS PIES: se desplaza lo mismo que ellos y se
   inclina un poco hacia ese lado, con el pivote en el suelo entre los dos pies.
   Cruza mientras pisan las dos patas, llega cuando se posa la segunda y se queda
   allí lo que duran quietos los pies. Lleva dentro los brazos y la cabeza, que
   viajan con él.

   Encima, un rebote de 1,2 px cada vez que un pie se posa. Va en translate para
   sumarse al transform del vaivén en vez de pisarlo. */
.edu-mascota--pose-parada.edu-mascota--baile-abanico .edu-mascota__parada-tronco {
    transform-origin: 70px 146px;
    animation: edu-pv-abanico-cuerpo 1.6s ease-in-out infinite, edu-pv-abanico-rebote 1.6s ease-in-out infinite;
}

@keyframes edu-pv-abanico-cuerpo {
    0% {
        transform: translateX(-6px) rotate(-2deg);
    }

    40%, 50% {
        transform: translateX(6px) rotate(2deg);
    }

    90%, 100% {
        transform: translateX(-6px) rotate(-2deg);
    }
}

@keyframes edu-pv-abanico-rebote {
    0%, 10%, 30%, 50%, 60%, 80%, 100% {
        translate: 0 0;
    }

    20%, 40%, 70%, 90% {
        translate: 0 1.2px;
    }
}

/* 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 vaivén 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 extremo ya lleva sumada la diferencia entre los
   dos pivotes: girar ∓2° sobre su nacimiento y desplazarse eso equivale a girar
   sobre el suelo y moverse ∓6 como el tronco. ESTOS NÚMEROS DEPENDEN del nacimiento
   de la cola que declara poses.css para la parada (96px 130px) y del vaivén de
   arriba: si cambia cualquiera de los dos, se recalculan. El rebote no se copia:
   son 1,2 px en un punto que tapa el muslo. */
.edu-mascota--pose-parada.edu-mascota--baile-abanico .edu-mascota__cola {
    animation: edu-pv-cola .5s cubic-bezier(.45, .05, .55, .95) infinite, edu-pv-abanico-cola 1.6s ease-in-out infinite;
}

@keyframes edu-pv-abanico-cola {
    0% {
        translate: -6.57px -.9px;
        rotate: -2deg;
    }

    40%, 50% {
        translate: 6.54px .92px;
        rotate: 2deg;
    }

    90%, 100% {
        translate: -6.57px -.9px;
        rotate: -2deg;
    }
}

/* La sombra acompaña al cuerpo por el suelo. En translate, para no pisar el
   transform con que poses.css la recoge en esta pose. */
.edu-mascota--pose-parada.edu-mascota--baile-abanico .edu-mascota__sombra {
    animation: edu-pv-abanico-sombra 1.6s ease-in-out infinite;
}

@keyframes edu-pv-abanico-sombra {
    0% {
        translate: -6px 0;
    }

    40%, 50% {
        translate: 6px 0;
    }

    90%, 100% {
        translate: -6px 0;
    }
}

/* LAS MANOS: la derecha doblada hacia la mejilla y la izquierda abanicando delante
   de la cara. Las dos giran sobre el hombro —el borde superior de su caja, que
   declara poses.css— y quedan por delante de la cabeza porque el marcado las pinta
   después de ella.

   La de la mejilla sube casi del todo y apenas se mece, al compás de los pasos. */
.edu-mascota--pose-parada.edu-mascota--baile-abanico .edu-mascota__mano--der {
    animation: edu-pv-abanico-mejilla 1.6s ease-in-out infinite;
}

@keyframes edu-pv-abanico-mejilla {
    0%, 100% {
        transform: rotate(160deg);
    }

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

/* La del abanico va y viene deprisa, casi cuatro veces por cada ida y vuelta del
   cuerpo: a ese ritmo se lee como un abanico y no como un saludo. Al bajar crece
   un poco, como si se acercara a la cámara, y eso le quita la rigidez de un brazo
   que solo gira. Con alternate vuelve por el mismo camino, sin saltar al
   principio en cada vuelta. */
.edu-mascota--pose-parada.edu-mascota--baile-abanico .edu-mascota__mano--izq {
    animation: edu-pv-abanico-abanico .22s ease-in-out infinite alternate;
}

@keyframes edu-pv-abanico-abanico {
    0% {
        transform: rotate(-168deg);
    }

    100% {
        transform: rotate(-114deg) scale(1.15);
    }
}

/* LA CABEZA SE APOYA EN LA MANO DE LA MEJILLA: ladeada hacia ella y cabeceando dos
   veces por ciclo, una por cada paso. 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-abanico .edu-mascota__parada-cabeza {
    animation: edu-pv-abanico-cabeza .8s ease-in-out infinite;
}

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

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

/* LAS OREJAS SE MECEN CON LA CABEZA, un pelo después que ella: lo blando va con
   retraso, que es lo que se lee como inercia. Giran sobre su nacimiento, en
   coordenadas de la cabeza, que es el sistema local de su grupo. Durante el
   retardo no tienen giro, que es justo su primer fotograma: no hay salto. */
.edu-mascota--pose-parada.edu-mascota--baile-abanico .edu-mascota__pa-oreja {
    transform-box: view-box;
}

.edu-mascota--pose-parada.edu-mascota--baile-abanico .edu-mascota__pa-oreja--izq {
    transform-origin: 38px 30px;
    animation: edu-pv-abanico-oreja-izq .8s ease-in-out .08s infinite;
}

.edu-mascota--pose-parada.edu-mascota--baile-abanico .edu-mascota__pa-oreja--der {
    transform-origin: 102px 30px;
    animation: edu-pv-abanico-oreja-der .8s ease-in-out .08s infinite;
}

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

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

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

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