/* animations.css — estados de animación y reduced-motion */

/* Los estados iniciales ocultos SOLO se aplican vía GSAP (.from).
   Sin JS o con prefers-reduced-motion el contenido es siempre visible.
   Este archivo solo garantiza que la clase 'js' + 'reduced-motion'
   no deje nada invisible por accidente. */

html.reduced-motion *,
html.reduced-motion *::before,
html.reduced-motion *::after {
  animation: none !important;
  transition: none !important;
}

/* Micro-interacciones de botones (CSS puro) */
.btn { transition: transform .2s ease, box-shadow .2s ease, background .2s, color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn__icon { transition: transform .25s; }
.btn:hover .btn__icon { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__icon { transition: none !important; }
  .btn:hover, .btn:active { transform: none !important; }
  .msg--bot, .msg--user { animation: none !important; }
}

/* Aparición suave de burbujas del chat (CSS ligero, sin GSAP) */
.msg--bot, .msg--user { animation: msg-in .25s ease; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }