/* La Table — portrait animé du MJ (carte t_28ff8510).
 *
 * Le portrait remplace le glyphe « ✦ » de l'avatar : une silhouette encapuchonnée
 * aux yeux lumineux qui respire, cligne des yeux, tourne à peine la tête — et
 * parle pendant la lecture de SON message.
 *
 * Contrat :
 *   - la bouche suit `--gm-talk` (0..1), écrit par `play/gm-portrait.js` depuis
 *     l'amplitude réelle de la voix (AnalyserNode) — et n'anime QUE l'avatar du
 *     message en lecture (`.gm-avatar.speaking`) ;
 *   - la teinte du halo (et des yeux) suit l'ambiance du message
 *     (`data-ambiance` = jour | nuit | danger, valeur portée par le message du
 *     MJ et exposée par `gmAmbiance()` dans play/app.js) ;
 *   - prefers-reduced-motion : le portrait est RENDU mais figé — aucune
 *     animation, bouche au repos. La teinte du halo reste lisible (simple
 *     couleur, aucun fondu) et l'information reste dans le DOM (le SVG est
 *     décoratif, `aria-hidden`) ;
 *   - repli : sans Web Audio la bouche reste simplement au repos — le fil,
 *     lui, ne change jamais.
 */

/* ---------- cadre + halo d'ambiance ---------- */
.gm-avatar {
  overflow: hidden;
  box-shadow: 0 0 16px var(--gm-glow, rgba(165, 141, 255, 0.25)), 0 0 0 2px rgba(0, 0, 0, 0.4);
}
.gm-avatar[data-ambiance="jour"] { --gm-glow: rgba(232, 163, 61, 0.35); --gm-eye: #ffd98a; }
.gm-avatar[data-ambiance="nuit"] { --gm-glow: rgba(126, 150, 255, 0.32); --gm-eye: #b9c8ff; }
.gm-avatar[data-ambiance="danger"] { --gm-glow: rgba(255, 92, 47, 0.42); --gm-eye: #ff9d6b; }

/* ---------- portrait (SVG décoratif) ---------- */
.gm-portrait { width: 100%; height: 100%; display: block; }
.gm-hood { fill: #2a2050; }
.gm-face { fill: #100b20; }
.gm-eye { fill: var(--gm-eye, #cdbdff); }
.gm-eyes { filter: drop-shadow(0 0 2px rgba(205, 189, 255, 0.75)); }
.gm-mouth { fill: var(--gm-eye, #cdbdff); opacity: 0.75; }

/* ---------- le vivant : respiration, clignements, micro-mouvements ---------- */
.gm-figure {
  transform-box: view-box;
  transform-origin: 24px 32px;
  animation: gm-sway 9s ease-in-out infinite;
}
.gm-breathe {
  transform-box: view-box;
  transform-origin: 24px 41px;
  animation: gm-breathe 4.6s ease-in-out infinite alternate;
}
.gm-eyes {
  transform-box: view-box;
  transform-origin: 24px 23.6px;
  animation: gm-blink 7s linear infinite;
}
@keyframes gm-sway {
  0%, 100% { transform: rotate(-1.1deg); }
  50% { transform: rotate(1.1deg); }
}
@keyframes gm-breathe {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-0.8px) scale(1.015); }
}
@keyframes gm-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
  96.5% { transform: scaleY(1); }
  97.5% { transform: scaleY(0.08); }
  99% { transform: scaleY(1); }
}

/* ---------- la bouche : pilotée par la voix réelle ---------- */
.gm-mouth {
  transform-box: view-box;
  transform-origin: 24px 30.8px;
  transform: scaleY(0.3);
  transition: transform 60ms linear;
}
/* Seul l'avatar du message LU parle : `speaking` suit `m.playing` (état réel de
   l'élément audio, play/narration.js), et `--gm-talk` suit l'amplitude mesurée. */
.gm-avatar.speaking .gm-mouth {
  transform: scaleY(calc(0.3 + var(--gm-talk, 0) * 1.2));
}

/* ---------- prefers-reduced-motion : portrait rendu, figé ---------- */
@media (prefers-reduced-motion: reduce) {
  .gm-figure, .gm-breathe, .gm-eyes { animation: none; }
  .gm-mouth, .gm-avatar.speaking .gm-mouth { transform: scaleY(0.3); transition: none; }
}