/* ═══ La perrovaquita — REÍRSE (risa burlona) ══════════════════════════════
   Una conducta del repertorio de movimiento.js, clase edu-mascota--riendo, sobre la
   vista de frente sentada. Tres tiempos en una sola pasada: te mira fija y seria,
   suelta una carcajada —cabeza atrás y ladeada, ojos apretados, boca abierta y
   tirones de "ja-ja-ja"— y vuelve a mirarte fija como si nada. Ese remate serio es
   lo que la hace burlona y no solo alegre. Se carga con las demás conductas, delante
   de animos.css. ═══════════════════════════════════════════════════════════ */

/* LOS TRES TIEMPOS VAN AL MISMO RELOJ: 2,6 s, que es lo que dura el gesto en
   movimiento.js. Mirada fija hasta el 18 %, carcajada del 22 % al 74 % y mirada
   fija desde el 80 %. Todas las animaciones de la hoja corren una sola vez y
   empiezan y acaban en reposo, así que al quitarse la clase no hay salto. Si
   cambia la duración aquí, cambia allí. */

/* Mientras se ríe, el vaivén de mirar alrededor se PAUSA en vez de quitarse: sigue
   donde iba al acabar. */
.edu-mascota--riendo .edu-mascota__cabeza-ladeo {
    animation-play-state: paused;
}

/* ── La cabeza ────────────────────────────────────────────────────────────── */
/* La CARCAJADA echa la cabeza atrás y la ladea, y encima da un tirón corto en cada
   "ja": seis, uno cada 8 % del ciclo. Va en __cabeza-gesto, la capa de las
   conductas, que gira sobre la base del cráneo; así se suma a la respiración y al
   estado sin pisarlos. */
.edu-mascota--riendo .edu-mascota__cabeza-gesto {
    animation: edu-pv-reir-cabeza 2.6s ease-in-out 1 both;
}

@keyframes edu-pv-reir-cabeza {
    0%, 18% {
        transform: none;
    }

    24% {
        transform: translateY(-5px) rotate(-11deg);
    }

    28%, 36%, 44%, 52%, 60%, 68% {
        transform: translateY(-3px) rotate(-8deg);
    }

    32%, 40%, 48%, 56%, 64%, 72% {
        transform: translateY(-6px) rotate(-13deg);
    }

    80%, 100% {
        transform: none;
    }
}

/* El cuerpo se sacude con la risa, un pelo, desde el suelo: sin eso, la cabeza
   riéndose sobre un cuerpo quieto parece de otro animal. */
.edu-mascota--riendo .edu-mascota__tronco {
    animation: edu-pv-reir-cuerpo 2.6s ease-in-out 1 both;
}

@keyframes edu-pv-reir-cuerpo {
    0%, 22% {
        transform: none;
    }

    28%, 36%, 44%, 52%, 60%, 68% {
        transform: scale(1.02, .98);
    }

    32%, 40%, 48%, 56%, 64%, 72% {
        transform: scale(.99, 1.01);
    }

    78%, 100% {
        transform: none;
    }
}

/* Las orejas botan con cada tirón, un poco hacia fuera: lo blando acompaña a la
   carcajada. Cuelgan del borde superior de su caja, que declara base.css. */
.edu-mascota--riendo .edu-mascota__oreja--izq {
    animation: edu-pv-reir-oreja-izq 2.6s ease-in-out 1 both;
}

.edu-mascota--riendo .edu-mascota__oreja--der {
    animation: edu-pv-reir-oreja-der 2.6s ease-in-out 1 both;
}

@keyframes edu-pv-reir-oreja-izq {
    0%, 20%, 80%, 100% {
        transform: none;
    }

    28%, 36%, 44%, 52%, 60%, 68% {
        transform: rotate(6deg);
    }

    32%, 40%, 48%, 56%, 64%, 72% {
        transform: rotate(14deg);
    }
}

@keyframes edu-pv-reir-oreja-der {
    0%, 20%, 80%, 100% {
        transform: none;
    }

    28%, 36%, 44%, 52%, 60%, 68% {
        transform: rotate(-6deg);
    }

    32%, 40%, 48%, 56%, 64%, 72% {
        transform: rotate(-14deg);
    }
}

/* ── La cara ──────────────────────────────────────────────────────────────── */
/* LOS OJOS: muy abiertos en la mirada fija y apretados en la carcajada, con el
   borde curvo del párpado haciendo la medialuna. Se anima el desplazamiento del
   párpado directamente, en las mismas unidades que usa base.css (27 px es el alto
   del ojo): una variable no se puede animar sin declararla con @property. Abierto
   del todo es -27 px, que es justo el reposo de una perra sin ánimo que lo cambie,
   y por eso no hay salto al entrar ni al salir. Sin parpadeo mientras dura: un
   parpadeo en mitad de la carcajada la cortaría. */
.edu-mascota--riendo .edu-mascota__parpado {
    animation: edu-pv-reir-parpado 2.6s ease-in-out 1 both;
}

.edu-mascota--riendo .edu-mascota__parpado-parpadeo {
    animation: none;
}

@keyframes edu-pv-reir-parpado {
    0%, 18% {
        transform: translateY(-27px);
    }

    23%, 74% {
        transform: translateY(-2px);
    }

    80%, 100% {
        transform: translateY(-27px);
    }
}

/* Las cejas suben con la carcajada, que es lo que la hace de risa y no de dolor. */
.edu-mascota--riendo .edu-mascota__ceja {
    animation: edu-pv-reir-ceja 2.6s ease-in-out 1 both;
}

@keyframes edu-pv-reir-ceja {
    0%, 18%, 80%, 100% {
        transform: none;
    }

    24%, 74% {
        transform: translateY(-3px);
    }
}

/* LA BOCA ABIERTA, la pieza de _MascotaFrente.cshtml. Cerrada siempre que no se
   ríe: aplastada hasta cero desde su borde de arriba, que es el labio. Su color es
   el de la nariz, el oscuro de dentro de la boca, que ya trae su versión de tema.

   En la carcajada se abre y se cierra un poco con cada "ja", al compás de la
   cabeza. */
.edu-mascota__boca-abierta {
    fill: var(--pv-nariz);
    transform-box: fill-box;
    transform-origin: center top;
    transform: scaleY(0);
}

.edu-mascota--riendo .edu-mascota__boca-abierta {
    animation: edu-pv-reir-boca 2.6s ease-in-out 1 both;
}

@keyframes edu-pv-reir-boca {
    0%, 20% {
        transform: scaleY(0);
    }

    24%, 32%, 40%, 48%, 56%, 64%, 72% {
        transform: scaleY(1);
    }

    28%, 36%, 44%, 52%, 60%, 68% {
        transform: scaleY(.65);
    }

    78%, 100% {
        transform: scaleY(0);
    }
}

/* La lengua asoma dentro de la boca abierta y se recoge con ella. */
.edu-mascota--riendo .edu-mascota__lengua {
    animation: edu-pv-reir-lengua 2.6s ease-in-out 1 both;
}

@keyframes edu-pv-reir-lengua {
    0%, 20% {
        transform: scaleY(0);
    }

    24%, 72% {
        transform: scaleY(.75);
    }

    78%, 100% {
        transform: scaleY(0);
    }
}