/* ═══ La perrovaquita — BAILE: TERNURA ═════════════════════════════════════
   Sobre la pose parada de frente. Se mece despacio de lado a lado con los pies
   plantados, como si alguien la acunara: la cabeza se ladea al revés que el cuerpo,
   los bracitos cuelgan y siguen el vaivén con retraso, las orejas se abren en
   avión y la cara pone ojitos de "no me regañes" con las mejillas sonrosadas. La
   clase edu-mascota--baile-ternura la pone y quita bailes.js a petición de
   js/compartido/mascota/baile/ternura.js, que es también quien pone el rubor en el
   SVG; no forma parte de las conductas espontáneas. Se carga después de
   interfaz.css. ══════════════════════════════════════════════════════════ */

/* TODO VA AL MISMO RELOJ, despacio: un vaivén de ida y vuelta cada 1,4 s. Lo que
   cuelga o es blando —cabeza, brazos, orejas— va un poco por detrás del cuerpo, y
   ese retraso se consigue con un retardo NEGATIVO: arranca ya a mitad de su ciclo,
   así que va desfasada desde el primer fotograma sin quedarse quieta esperando. Si
   cambia la duración, cambia en todas, y también los retardos. */

/* ── El vaivén ────────────────────────────────────────────────────────────── */
/* Se mece el tronco —que lleva dentro la cabeza y los brazos— y los muslos, con el
   mismo giro y sobre el mismo punto: el suelo entre los pies. Los pies no se tocan:
   se quedan plantados y los muslos se inclinan sobre ellos, como un tentetieso. */
.edu-mascota--pose-parada.edu-mascota--baile-ternura .edu-mascota__parada-tronco,
.edu-mascota--pose-parada.edu-mascota--baile-ternura .edu-mascota__vista--parada .edu-mascota__anca {
    transform-origin: 70px 146px;
    animation: edu-pv-ternura-vaiven 1.4s ease-in-out infinite;
}

@keyframes edu-pv-ternura-vaiven {
    0%, 100% {
        transform: rotate(-5deg);
    }

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

/* LA CABEZA SE LADEA AL REVÉS QUE EL CUERPO, y algo más: es lo que convierte el
   vaivén en un gesto tierno y no en un balanceo de muñeco. Va 0,15 s por detrás.
   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-ternura .edu-mascota__parada-cabeza {
    animation: edu-pv-ternura-cabeza 1.4s ease-in-out -1.25s infinite;
}

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

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

/* LOS BRACITOS CUELGAN SUELTOS y se van hacia el lado contrario del giro, con más
   retraso que la cabeza: son lo más suelto del cuerpo. Giran sobre el hombro, el
   borde superior de su caja, que declara poses.css. */
.edu-mascota--pose-parada.edu-mascota--baile-ternura .edu-mascota__mano--izq,
.edu-mascota--pose-parada.edu-mascota--baile-ternura .edu-mascota__mano--der {
    animation: edu-pv-ternura-brazo 1.4s ease-in-out -1.15s infinite;
}

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

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

/* LAS OREJAS EN AVIÓN: abiertas hacia los lados, casi horizontales, y meciéndose
   un poco con la cabeza. Giran sobre su nacimiento, en coordenadas de la cabeza,
   que es el sistema local de su grupo. */
.edu-mascota--pose-parada.edu-mascota--baile-ternura .edu-mascota__pa-oreja {
    transform-box: view-box;
}

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

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

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

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

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

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

/* La cola se menea despacio: está a gusto, no excitada. */
.edu-mascota--pose-parada.edu-mascota--baile-ternura .edu-mascota__cola {
    animation-duration: 1.6s;
}

/* ── La carita ────────────────────────────────────────────────────────────── */
/* OJOS A MEDIO ENTORNAR Y CAÍDOS HACIA FUERA: la mirada de "no me regañes". Usa la
   misma variable que los ánimos, que mueve los párpados de todas las vistas, y gana
   a la de hambrienta por especificidad. La inclinación es la de triste pero más
   suave: con la de triste se leería pena, no ternura. Sigue parpadeando. */
.edu-mascota--pose-parada.edu-mascota--baile-ternura {
    --pv-parpado-cierre: .3;
}

    .edu-mascota--pose-parada.edu-mascota--baile-ternura .edu-mascota__parpado--izq {
        rotate: -6deg;
    }

    .edu-mascota--pose-parada.edu-mascota--baile-ternura .edu-mascota__parpado--der {
        rotate: 6deg;
    }

    /* LOS BRILLOS CRECEN Y TITILAN: con el reflejo grande el ojo se lee húmedo, que es
   la mitad de la ternura. Escalan sobre su propio centro. */
    .edu-mascota--pose-parada.edu-mascota--baile-ternura .edu-mascota__brillo {
        transform-box: fill-box;
        transform-origin: center;
        animation: edu-pv-ternura-brillo 1.4s ease-in-out infinite;
    }

@keyframes edu-pv-ternura-brillo {
    0%, 100% {
        transform: scale(1.35);
    }

    50% {
        transform: scale(1.55);
    }
}

/* LAS CEJAS SUBEN POR DENTRO: la ceja suplicante, al revés que la de hambrienta,
   que las baja hacia dentro. Giran sobre su centro con la transición que ya traen
   de base.css, así que entran deslizándose.

   En la vista parada las cejas NO llevan clase de lado, y añadírsela haría que los
   ánimos las tocaran en todos los bailes. Por eso se localizan por posición: son
   las dos últimas piezas de la cabeza, izquierda y derecha. ESTO DEPENDE DEL ORDEN
   de _MascotaParada.cshtml: si se añade algo detrás de las cejas, estos selectores
   apuntarán a otra pieza. */
.edu-mascota--pose-parada.edu-mascota--baile-ternura .edu-mascota__parada-cabeza > .edu-mascota__ceja:nth-last-child(2) {
    transform: translateY(-1.5px) rotate(-14deg);
}

.edu-mascota--pose-parada.edu-mascota--baile-ternura .edu-mascota__parada-cabeza > .edu-mascota__ceja:last-child {
    transform: translateY(-1.5px) rotate(14deg);
}

/* La lengüita asoma apenas: media lengua, no la de contenta. Baja con la transición
   que ya trae de base.css. */
.edu-mascota--pose-parada.edu-mascota--baile-ternura .edu-mascota__lengua {
    transform: scaleY(.45);
}

/* ── El rubor ─────────────────────────────────────────────────────────────── */
/* Oculto salvo durante el baile: el JS lo deja puesto 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.

   El rosa es el de dentro de las orejas, una variable del personaje que ya trae su
   versión para el tema oscuro. Respira con el vaivén, un poco más encendido en cada
   extremo. */
.edu-mascota__rubor {
    display: none;
    fill: var(--pv-rosa);
}

.edu-mascota--pose-parada.edu-mascota--baile-ternura .edu-mascota__rubor {
    display: inline;
    animation: edu-pv-ternura-rubor .7s ease-in-out infinite alternate;
}

@keyframes edu-pv-ternura-rubor {
    0% {
        opacity: .45;
    }

    100% {
        opacity: .7;
    }
}