/* ============================================================
   LE BESTIAIRE — feuille dédiée (voir public/bestiaire.js)

   Fichier à part comme celui du post-it, et pour la même raison : une
   fantaisie doit pouvoir disparaître en retirant des fichiers entiers.

   Les couleurs sont EN DUR, dans les dessins, et ne suivent pas la
   palette du cabinet. Un singe est brun ; le teindre en laiton sous
   Portoro n'en ferait pas un singe assorti, mais un singe malade.

   Les GESTES, eux, ignorent l'animal : ils s'adressent à des morceaux
   nommés — la tête, les bras, la queue — que chaque dessin fournit aux
   mêmes coordonnées. Le grattage est écrit une fois et vaut pour les
   quatre.
   ============================================================ */

/* Trois tailles, posées sur la racine du document par bestiaire.js.
   La géométrie du logiciel n'est pas concernée : la bête flotte au-dessus
   de tout, en position fixe, et ne pousse rien. */
:root[data-bete="petite"] {
    --bete-h: 60px;
}

:root[data-bete="moyenne"] {
    --bete-h: 80px;
}

:root[data-bete="grande"] {
    --bete-h: 110px;
}

/* Invisible tant qu'aucune saynète ne joue. Ce n'est pas une
   précaution de style : entre deux passages, toutes les positions sont
   remises à « auto » et la bête se garerait là où le hasard de la mise
   en page le pose. */
.bete {
    visibility: hidden;
    position: fixed;
    /* ⚠ LA RÈGLE QUI COMPTE. Sans elle, la bête avalerait les clics de
       ce qui passe dessous — un bouton, une ligne de balance — et une
       farce deviendrait une panne. */
    pointer-events: none;
    z-index: 30;
    width: auto;
    height: var(--bete-h, 80px);
    will-change: transform;
}

/* Une bête en trois dimensions est un CANEVAS, qui n'a pas de largeur
   naturelle : il faut la lui donner. Le rapport suit le cadrage de la
   caméra — un animal de profil tient dans un peu plus de deux fois sa
   hauteur. */
.bete.trois-d {
    width: calc(var(--bete-h, 80px) * 2.2);
}

/* Une bête ARTICULÉE est placée par son contrôleur, qui écrit lui-même
   la transformation à chaque image : il lui faut donc l'origine de
   l'écran pour repère, et surtout aucune transition — une transition
   CSS par-dessus soixante images par seconde donne une bête qui traîne
   d'un dixième de seconde derrière elle-même. */
.bete.anime {
    left: 0;
    top: 0;
    transition: none;
    transform-origin: 50% 100%;
}

/* Au-dessus du contenu, mais SOUS les fenêtres, le panneau des post-it
   et la barre latérale rétractée : ce qu'on ouvre pour travailler passe
   toujours devant ce qu'on regarde pour sourire. */
.bete.joue {
    visibility: visible;
}

.bete-svg {
    display: block;
    height: 100%;
    width: auto;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45));
}

/* ------------------------------------------------------------
   Les gestes

   Chacun anime UN morceau du dessin, en boucle et pendant la saynète
   seulement. Les pivots sont posés au bon endroit du repère : une tête
   qui penche autour du centre de l'image donne une marionnette, pas un
   animal.
   ------------------------------------------------------------ */
.bete-tete {
    transform-origin: 50px 70px;
}

.bete-bras-g {
    transform-origin: 30px 83px;
}

.bete-bras-d {
    transform-origin: 70px 83px;
}

.bete-queue {
    transform-origin: 73px 105px;
}

/* --- Il regarde autour de lui --- */
@keyframes bete-regard-tete {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-11deg); }
    60% { transform: rotate(9deg); }
}

@keyframes bete-regard-yeux {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
}

.bete-regarde .bete-tete {
    animation: bete-regard-tete 2.1s ease-in-out infinite;
}

.bete-regarde .bete-pupilles {
    animation: bete-regard-yeux 2.1s ease-in-out infinite;
}

/* --- Il se balance, pendu par les bras --- */
@keyframes bete-balancement {
    0%, 100% { transform: rotate(-7deg); }
    50% { transform: rotate(7deg); }
}

@keyframes bete-queue-fouet {
    0%, 100% { transform: rotate(-12deg); }
    50% { transform: rotate(14deg); }
}

/* Le balancement pivote AUX MAINS, là où la bête s'accroche : autour
   de la tête, il donnait un pantin qui se tortille. Le bloc entier
   étant retourné pour la traversée, ce point bas du dessin est le point
   haut de l'écran. */
.bete-balance .bete-corps,
.bete-balance .bete-tete,
.bete-balance .bete-queue {
    animation: bete-balancement 1.4s ease-in-out infinite;
    transform-origin: 50px 105px;
}

.bete-balance .bete-queue {
    animation: bete-queue-fouet 1.9s ease-in-out infinite;
}

/* --- Il se gratte la tête --- */
@keyframes bete-grattage {
    0%, 55%, 100% { transform: rotate(0deg); }
    62% { transform: rotate(-58deg); }
    70% { transform: rotate(-44deg); }
    78% { transform: rotate(-58deg); }
    86% { transform: rotate(-44deg); }
}

@keyframes bete-perplexite {
    0%, 55%, 100% { transform: rotate(0deg); }
    70% { transform: rotate(7deg); }
}

.bete-gratte .bete-bras-d,
.bete-gratte .bete-main-d {
    animation: bete-grattage 3.6s ease-in-out infinite;
    transform-origin: 70px 83px;
}

.bete-gratte .bete-tete {
    animation: bete-perplexite 3.6s ease-in-out infinite;
}

/* --- Il mange sa banane --- */
@keyframes bete-banane-parait {
    0%, 8% { opacity: 0; }
    12%, 88% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes bete-bras-mange {
    0%, 10%, 100% { transform: rotate(0deg) translate(0, 0); }
    18%, 30%, 42%, 54% { transform: rotate(-38deg) translate(6px, -6px); }
    24%, 36%, 48% { transform: rotate(-30deg) translate(4px, -2px); }
}

@keyframes bete-mastication {
    0%, 12%, 100% { transform: scaleY(1); }
    20%, 32%, 44%, 56% { transform: scaleY(.55); }
    26%, 38%, 50% { transform: scaleY(1.15); }
}

.bete-mange .bete-banane {
    animation: bete-banane-parait 7.4s ease-in-out;
}

.bete-mange .bete-bras-g,
.bete-mange .bete-main-g,
.bete-mange .bete-banane {
    transform-origin: 30px 83px;
}

.bete-mange .bete-bras-g,
.bete-mange .bete-main-g {
    animation: bete-bras-mange 7.4s ease-in-out;
}

.bete-mange .bete-bouche {
    transform-origin: 50px 63px;
    animation: bete-mastication 7.4s ease-in-out;
}

/* Il cligne des yeux quoi qu'il fasse : c'est ce qui le rend vivant
   plutôt que dessiné. */
@keyframes bete-clignement {
    0%, 92%, 100% { opacity: 0; }
    94%, 98% { opacity: 1; }
}

/* Uniquement pendant une saynète : une animation « infinite » sur un
   élément invisible tourne quand même, et l'on avait promis qu'il
   dormait. */
.bete.joue .bete-paupieres {
    animation: bete-clignement 5.3s linear infinite;
}

/* ------------------------------------------------------------
   En vitrine, sur l'écran de réglage

   Le même dessin, immobile, à la hauteur qu'on s'apprête à choisir.
   Immobile à dessein : trois bêtes qui gesticulent côte à côte
   empêchent de comparer leurs tailles, qui est la seule question posée.
   ------------------------------------------------------------ */
.ident-bete {
    display: block;
    margin: 0 auto 8px;
    width: 100%;
}

.ident-bete .bete-svg {
    height: 100%;
    width: auto;
    margin: 0 auto;
    filter: none;
}

/* Rien à masquer ni à figer ici : la vitrine n'est pas un « .bete » —
   elle n'hérite donc ni de son invisibilité ni de sa classe « joue »,
   celle qui met les gestes en route. Le dessin y est simplement posé. */

/* Les trois cartes s'alignent par le bas : sans cela le nom de la
   taille flottait à trois hauteurs différentes, et l'on comparait des
   étiquettes au lieu de comparer des bêtes. */
.ident-taille {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ------------------------------------------------------------
   Là où il n'a rien à faire
   ------------------------------------------------------------ */
@media print {
    .bete {
        display: none !important;
    }
}

/* Le mouvement est un agrément, jamais une information : qui demande
   moins d'animation n'a pas de singe du tout. singe.js applique déjà la
   même règle et n'en crée aucun — ceci est le second verrou. */
@media (prefers-reduced-motion: reduce) {
    .bete {
        display: none !important;
    }
}