/* ═══ La perrovaquita — BAILE: SALTAR LA CUERDA ═══════════════════════════
   Sobre la pose parada de frente. Con los brazos abiertos hace girar una cuerda
   por encima de la cabeza, por delante, bajo los pies y por detrás, y da un
   saltito cada vez que le pasa por debajo. La clase
   edu-mascota--baile-saltar-cuerda la pone y quita bailes.js a petición de
   js/compartido/mascota/baile/saltar-cuerda.js, que es también quien cuelga la
   cuerda en el SVG; no forma parte de las conductas espontáneas. Se carga después
   de interfaz.css. ══════════════════════════════════════════════════════════ */

/* TODO VA AL MISMO RELOJ: una vuelta de cuerda y un salto cada 0,55 s. La cuerda,
   el salto, la sombra y las manitas arrancan en el mismo instante, cuando
   bailes.js pone la clase, así que van acompasados sin que ninguno espere a otro.
   La cuerda pasa bajo los pies justo a la mitad del ciclo, y es ahí donde el salto
   llega arriba: si cambia la duración de uno, cambia en todos. */

/* ── La cuerda ────────────────────────────────────────────────────────────── */
/* Oculta salvo durante el baile: el JS la deja puesta en el SVG para siempre y es
   esta regla la que decide cuándo se ve. Con display y no con opacidad, para que
   fuera del baile no se anime ni cueste fotogramas.

   El color es el azul del collar, el mismo en los dos temas: la cuerda sale fuera
   del cuerpo, sobre el fondo de la página, y el contorno oscuro del personaje se
   perdería sobre el fondo del tema oscuro. El grosor no escala con el giro
   (non-scaling-stroke): al aplastarse el arco la cuerda seguiría siendo cuerda y no
   se adelgazaría hasta desaparecer. */
.edu-mascota__cuerda {
    display: none;
    fill: none;
    stroke: var(--pv-collar);
    stroke-width: 2.6;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.edu-mascota--pose-parada.edu-mascota--baile-saltar-cuerda .edu-mascota__cuerda {
    display: inline;
}

/* LA VUELTA, vista de frente: la cuerda gira en un plano que pasa por las manos,
   así que desde aquí solo se ve su arco subiendo y bajando sobre la línea de las
   manos. Es un escalado vertical sobre esa línea (y = 100): 1 es el arco entero por
   encima de los cuernos, 0 la cuerda recta cruzando por delante o por detrás, y el
   negativo el arco por debajo de los pies. Abajo hay menos sitio que arriba, así
   que el lado negativo llega solo a -0,46: lo justo para pasar unos 4 px bajo los
   pies. Los pasos intermedios siguen el coseno de la vuelta, que es lo que la hace
   leerse como un giro y no como un sube y baja.

   ESTOS NÚMEROS DEPENDEN del trazo que pone saltar-cuerda.js —su línea de manos en
   y = 100 y su punto más alto en y = -10— y de los pies de la vista parada, en
   y ≈ 146,6: si cambia cualquiera, se recalculan. */
.edu-mascota--pose-parada.edu-mascota--baile-saltar-cuerda .edu-mascota__cuerda {
    transform-box: view-box;
    transform-origin: 70px 100px;
}

/* La mitad de DELANTE se ve de lo alto a lo bajo, bajando por delante de la cara y
   del pecho; la de DETRÁS, de lo bajo a lo alto, subiendo por la espalda. El
   cambio de una a otra cae justo arriba y justo abajo, donde las dos coinciden, y
   por eso no se nota el salto de una a otra: va a golpe (step-end). */
.edu-mascota--pose-parada.edu-mascota--baile-saltar-cuerda .edu-mascota__cuerda--delante {
    animation: edu-pv-cuerda-vuelta .55s linear infinite, edu-pv-cuerda-delante .55s step-end infinite;
}

.edu-mascota--pose-parada.edu-mascota--baile-saltar-cuerda .edu-mascota__cuerda--detras {
    animation: edu-pv-cuerda-vuelta .55s linear infinite, edu-pv-cuerda-detras .55s step-end infinite;
}

@keyframes edu-pv-cuerda-vuelta {
    0%, 100% {
        transform: scaleY(1);
    }

    12.5% {
        transform: scaleY(.707);
    }

    25% {
        transform: scaleY(0);
    }

    37.5% {
        transform: scaleY(-.33);
    }

    50% {
        transform: scaleY(-.46);
    }

    62.5% {
        transform: scaleY(-.33);
    }

    75% {
        transform: scaleY(0);
    }

    87.5% {
        transform: scaleY(.707);
    }
}

@keyframes edu-pv-cuerda-delante {
    0% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}

@keyframes edu-pv-cuerda-detras {
    0% {
        opacity: 0;
    }

    50%, 100% {
        opacity: 1;
    }
}

/* ── El salto ─────────────────────────────────────────────────────────────── */
/* Salta la vista ENTERA, desde el suelo entre los pies: la cuerda va dentro de ella
   y viaja con las manos que la sujetan, así que pasa bajo los pies en el aire.
   Se agacha un poco antes de despegar y se aplasta al caer, que es lo que le da
   peso. 9 px: lo justo para que entre la cuerda, sin que parezca un brinco. */
.edu-mascota--pose-parada.edu-mascota--baile-saltar-cuerda .edu-mascota__vista--parada {
    transform-box: view-box;
    transform-origin: 70px 146px;
    animation: edu-pv-cuerda-salto .55s ease-in-out infinite;
}

@keyframes edu-pv-cuerda-salto {
    0%, 22% {
        transform: translateY(0) scale(1, 1);
    }

    34% {
        transform: translateY(0) scale(1.04, .96);
    }

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

    68% {
        transform: translateY(0) scale(1, 1);
    }

    78% {
        transform: translateY(0) scale(1.03, .97);
    }

    100% {
        transform: translateY(0) scale(1, 1);
    }
}

/* EL TRONCO DEJA SU BALANCEO: las manitas van dentro de él y la cuerda que sujetan
   no, así que con el tronco girando las manos se despegarían de los extremos de la
   cuerda. Ya lo mueve el salto. */
.edu-mascota--pose-parada.edu-mascota--baile-saltar-cuerda .edu-mascota__parada-tronco {
    animation: none;
}

/* La sombra se encoge cuando está arriba: es lo que vende la altura. Parte del
   recogido que le da poses.css a esta pose, porque el transform de la animación
   pisa el de la regla. */
.edu-mascota--pose-parada.edu-mascota--baile-saltar-cuerda .edu-mascota__sombra {
    transform-box: view-box;
    transform-origin: 70px 146px;
    animation: edu-pv-cuerda-sombra .55s ease-in-out infinite;
}

@keyframes edu-pv-cuerda-sombra {
    0%, 22%, 68%, 100% {
        transform: scale(.8, .9);
        opacity: 1;
    }

    50% {
        transform: scale(.66, .8);
        opacity: .7;
    }
}

/* ── Las manitas ──────────────────────────────────────────────────────────── */
/* ABIERTAS Y BAJAS, como quien sujeta una comba: 48° hacia fuera sobre el hombro
   —el borde superior de su caja, que declara poses.css—, que deja cada mano en el
   extremo de la cuerda. Dan un tirón pequeño en cada vuelta, ±2°, que es lo que
   hace creíble que sean ellas las que la mueven; más recorrido despegaría la mano
   del extremo de la cuerda, que está fijo. */
.edu-mascota--pose-parada.edu-mascota--baile-saltar-cuerda .edu-mascota__mano--izq {
    animation: edu-pv-cuerda-mano-izq .55s ease-in-out infinite;
}

.edu-mascota--pose-parada.edu-mascota--baile-saltar-cuerda .edu-mascota__mano--der {
    animation: edu-pv-cuerda-mano-der .55s ease-in-out infinite;
}

@keyframes edu-pv-cuerda-mano-izq {
    0%, 100% {
        transform: rotate(46deg);
    }

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

@keyframes edu-pv-cuerda-mano-der {
    0%, 100% {
        transform: rotate(-46deg);
    }

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

/* ── Las orejas ───────────────────────────────────────────────────────────── */
/* Botan con el salto, un pelo después que el cuerpo: 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: en lo alto se abren hacia fuera y
   al caer vuelven a colgar. */
.edu-mascota--pose-parada.edu-mascota--baile-saltar-cuerda .edu-mascota__pa-oreja {
    transform-box: view-box;
}

.edu-mascota--pose-parada.edu-mascota--baile-saltar-cuerda .edu-mascota__pa-oreja--izq {
    transform-origin: 38px 30px;
    animation: edu-pv-cuerda-oreja-izq .55s ease-in-out .05s infinite;
}

.edu-mascota--pose-parada.edu-mascota--baile-saltar-cuerda .edu-mascota__pa-oreja--der {
    transform-origin: 102px 30px;
    animation: edu-pv-cuerda-oreja-der .55s ease-in-out .05s infinite;
}

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

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

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

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