/* ═══ La perrovaquita — COMER ══════════════════════════════════════════════
   El plato aparece, ella baja la cabeza, mordisquea con los ojos entornados de
   gusto y las croquetas se acaban. Al terminar encadena con --contenta, que ya
   existe: el salto y los corazones son el final de esta escena.

   HOJA PROPIA Y MÓDULO PROPIO (comer.js), como el ladrido: es una animación con
   DISPARADOR EXTERNO —la confirmación del servidor— y no una conducta espontánea
   del repertorio. Las del repertorio solo necesitan su hoja y su entrada en
   movimiento.js.

   SE CARGA DESPUÉS DE animos.css y de ladrido.css: comer manda sobre el gesto de
   hambrienta, porque justo está dejando de tenerla. Y antes de interfaz.css, para
   que el bloque de menos movimiento siga ganando a todo.

   LAS DOS VISTAS COMEN. De frente baja la cabeza sobre el plato; de perfil gira el
   cuello y mete el hocico, que es un movimiento distinto y necesita sus propias
   coordenadas. Ninguna de las dos reinventa el dibujo: solo mueven grupos que ya
   existen. Echada no come tumbada: se incorpora a la vista de frente mientras dura
   la escena y vuelve a tumbarse al acabar, sin tocar la pose.

   Ni un color nuevo: el cuenco sale del azul del collar y las croquetas del tono
   de las manchas, así que los dos temas quedan resueltos sin declarar nada.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Echada, se sienta a comer ────────────────────────────────────────────── */
/* La vista tumbada no tiene plato ni sitio para él bajo la barbilla. Mientras come
   se enciende la de frente, que sí lo tiene, y la pose sigue siendo echado: al
   retirar la clase vuelve sola a tumbarse, con su propio movimiento de echarse. */
.edu-mascota--pose-echado.edu-mascota--comiendo .edu-mascota__vista--echada {
    display: none;
}

.edu-mascota--pose-echado.edu-mascota--comiendo .edu-mascota__vista--frente {
    display: block;
}

/* ── El plato ─────────────────────────────────────────────────────────────── */
/* Invisible salvo mientras come. Va en el marcado de las dos vistas y no lo crea
   el JS: es parte del dibujo, y crearlo al vuelo obligaría a construir SVG desde
   JavaScript cada vez que alguien pulsa la comida. */
.edu-mascota__plato {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center bottom;
}

.edu-mascota__plato-forma {
    fill: var(--pv-collar);
    stroke: var(--pv-borde);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.edu-mascota__plato-borde {
    fill: var(--pv-pecho);
    stroke: var(--pv-borde);
    stroke-width: 2;
}

.edu-mascota__croqueta {
    fill: var(--pv-mancha);
}

/* Entra deslizándose desde abajo y se va igual. forwards en la salida no hace
   falta: la clase se retira entera al terminar. */
.edu-mascota--comiendo .edu-mascota__plato {
    animation: edu-pv-plato 2.4s ease-in-out;
}

@keyframes edu-pv-plato {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.9);
    }

    12%, 84% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(6px) scale(.94);
    }
}

/* Las croquetas se acaban mientras come: es el detalle que cierra la escena y lo
   que convierte "mueve la cabeza" en "se lo está comiendo". Cada una se va en su
   momento, de fuera hacia dentro. */
.edu-mascota--comiendo .edu-mascota__croqueta {
    transform-box: fill-box;
    transform-origin: center;
    animation: edu-pv-croqueta 2.4s ease-in forwards;
}

    .edu-mascota--comiendo .edu-mascota__croqueta:nth-of-type(2) {
        animation-delay: .25s;
    }

    .edu-mascota--comiendo .edu-mascota__croqueta:nth-of-type(3) {
        animation-delay: .5s;
    }

@keyframes edu-pv-croqueta {
    0%, 45% {
        opacity: 1;
        transform: scale(1);
    }

    75% {
        opacity: 1;
        transform: scale(.45);
    }

    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* ── De frente: la cabeza baja al plato ───────────────────────────────────── */
/* El transform-origin va en la nuca y no en el centro del cráneo: una cabeza que
   baja gira sobre el cuello. Se declara aquí porque este gesto la mueve mucho más
   que cualquier pose, y con el origen por defecto la barbilla saldría del cuerpo.

   En la capa de los gestos, con el vaivén de mirar en pausa mientras come.

   Cuatro bocados en 2,4 s: baja, sube un poco, vuelve a bajar. Subir del todo
   entre bocado y bocado se leería como asentir, no como comer. */
.edu-mascota--comiendo .edu-mascota__cabeza-gesto {
    transform-origin: 70px 92px;
    animation: edu-pv-comer-cabeza 2.4s ease-in-out;
}

.edu-mascota--comiendo .edu-mascota__cabeza-ladeo {
    animation-play-state: paused;
}

@keyframes edu-pv-comer-cabeza {
    0% {
        transform: translateY(0) rotate(0);
    }

    14% {
        transform: translateY(34px) rotate(2deg) scale(.98);
    }

    28%, 56%, 84% {
        transform: translateY(38px) rotate(3deg) scale(.98);
    }

    42%, 70% {
        transform: translateY(28px) rotate(1deg) scale(.98);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

/* ── De perfil: el cuello gira y mete el hocico ───────────────────────────── */
/* Gira sobre la garganta (74,84), el mismo punto sobre el que se apoya el collar.
   El signo negativo es el que baja el hocico: en coordenadas de pantalla, con la
   cabeza a la izquierda del pivote, el giro positivo la subiría. */
.edu-mascota--comiendo .edu-mascota__p-cabeza {
    transform-origin: 74px 84px;
    animation: edu-pv-comer-cabeza-perfil 2.4s ease-in-out;
}

@keyframes edu-pv-comer-cabeza-perfil {
    0% {
        transform: rotate(0) translateY(0);
    }

    14% {
        transform: rotate(-44deg) translateY(4px);
    }

    28%, 56%, 84% {
        transform: rotate(-48deg) translateY(6px);
    }

    42%, 70% {
        transform: rotate(-40deg) translateY(2px);
    }

    100% {
        transform: rotate(0) translateY(0);
    }
}

/* El collar se queda en el cuello: su mitad delantera y la chapa, que van dentro de
   la cabeza, hacen al revés el mismo giro sobre la misma garganta. Sin esto, al
   bajar la cabeza esa mitad giraría con ella y se verían dos collares. Cada keyframe
   es el inverso exacto del de la cabeza, con la misma curva y la misma duración. */
.edu-mascota--comiendo .edu-mascota__p-collar {
    transform-origin: 74px 84px;
    animation: edu-pv-comer-collar-perfil 2.4s ease-in-out;
}

@keyframes edu-pv-comer-collar-perfil {
    0% {
        transform: translateY(0) rotate(0);
    }

    14% {
        transform: translateY(-4px) rotate(44deg);
    }

    28%, 56%, 84% {
        transform: translateY(-6px) rotate(48deg);
    }

    42%, 70% {
        transform: translateY(-2px) rotate(40deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

/* Las patas se quedan quietas mientras come, también si venía trotando: un perro
   para a comer. La vista de perfil sigue puesta, así que se ve comiendo de lado. */
.edu-mascota--comiendo .edu-mascota__p-pata {
    animation: none;
}

/* ── El mordisqueo ────────────────────────────────────────────────────────── */
/* El morro va MÁS RÁPIDO que la cabeza, y ahí está el truco: con los dos al mismo
   ritmo parece que cabecea; con el hocico a su aire, mastica. */
.edu-mascota--comiendo .edu-mascota__morro,
.edu-mascota--comiendo .edu-mascota__morro-forma {
    transform-box: fill-box;
    transform-origin: center top;
    animation: edu-pv-mordisco .26s ease-in-out infinite;
}

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

    50% {
        transform: scaleY(.86) translateY(1px);
    }
}

/* La lengua asoma un poco en cada bocado. */
.edu-mascota--comiendo .edu-mascota__lengua {
    transform-box: fill-box;
    transform-origin: center top;
    animation: edu-pv-lengua-comer .26s ease-in-out infinite;
}

@keyframes edu-pv-lengua-comer {
    0%, 100% {
        transform: scaleY(.2);
    }

    50% {
        transform: scaleY(.9);
    }
}

/* ── Ojitos entornados de gusto ───────────────────────────────────────────── */
/* Los párpados a media asta, en todas las vistas: el perfil también tiene párpado,
   así que el ojo conserva su forma y es el párpado el que entorna la mirada. */
.edu-mascota--comiendo {
    --pv-parpado-cierre: .6;
}

    /* Las orejas se balancean con cada bocado: es lo que le da peso al gesto. */
    .edu-mascota--comiendo .edu-mascota__oreja--izq {
        animation: edu-pv-oreja-comer-izq .52s ease-in-out infinite;
    }

    .edu-mascota--comiendo .edu-mascota__oreja--der {
        animation: edu-pv-oreja-comer-der .52s ease-in-out infinite;
    }

    .edu-mascota--comiendo .edu-mascota__p-oreja {
        animation: edu-pv-oreja-comer-izq .52s ease-in-out infinite;
    }

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

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

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

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