/* Mascota animada (29-oct). Solo transform y opacity, discreta: es una herramienta de trabajo.
   Tiempos y curvas salen de tokens.css (--dur-*, --ease-out, --out); el ciclo de la
   respiración es un múltiplo de --dur-spring (≈3,7 s), no un valor suelto.
   · .m-viva (≥ 56 px): flota y respira. Las pequeñas (avisos, listas) quedan quietas.
   · .m-pop-a / .m-pop-b: asentamiento al cambiar de pose (se alternan para reiniciar).
   · .m-entra: saludo al entrar (solo la pose saludo, grande).
   · Con prefers-reduced-motion: ningún movimiento; la imagen es transparente (RGBA),
     sin recuadro: se ve igual sobre fondo claro y oscuro. */
img.mascota { transform-origin: 50% 98%; }
img.mascota.m-viva { animation: m-respira calc(var(--dur-spring) * 6) ease-in-out infinite; will-change: transform; }
img.mascota.m-pop-a { animation: m-pop-a var(--dur-med) var(--ease-out) both; }
img.mascota.m-pop-b { animation: m-pop-b var(--dur-med) var(--ease-out) both; }
img.mascota.m-entra { animation: m-entra var(--dur-spring) var(--ease-out) both; }
@keyframes m-respira {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -2%, 0) scale(1.004, 1.012); }
}
@keyframes m-pop-a { from { transform: scale(.96); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes m-pop-b { from { transform: scale(.96); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes m-entra {
  0%   { opacity: 0; transform: translate3d(0, 8%, 0) scale(.95); }
  60%  { opacity: 1; transform: translate3d(0, -3%, 0) scale(1.01); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  img.mascota, img.mascota.m-viva, img.mascota.m-pop-a, img.mascota.m-pop-b, img.mascota.m-entra {
    animation: none; will-change: auto;
  }
}