/* ============================================================
   ANIMATIONS.CSS — Keyframes y transiciones
   ============================================================ */

/* ─── Splash ────────────────────────────────────────────────── */
@keyframes splashIn {
  from { opacity: 0; transform: scale(0.85) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.splash-out {
  animation: splashOut 0.5s ease forwards !important;
}

@keyframes splashOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.05); }
}

/* ─── App enter ─────────────────────────────────────────────── */
.app-enter {
  animation: appFadeIn 0.4s ease forwards;
}

@keyframes appFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Page transitions ──────────────────────────────────────── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-exit {
  animation: pageOut 0.15s ease forwards;
}

@keyframes pageOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-4px); }
}

/* ─── Spinner ───────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Pulse ─────────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50%       { opacity: 1;   transform: scale(1.05); }
}

/* ─── Typing dots ───────────────────────────────────────────── */
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0);  opacity: 0.4; }
  40%            { transform: translateY(-5px); opacity: 1;   }
}

/* ─── Glow pulse para el avatar del chat ───────────────────── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(99,102,241,0.35); }
  50%       { box-shadow: 0 4px 25px rgba(99,102,241,0.6);  }
}

.chat-avatar {
  animation: glowPulse 3s ease-in-out infinite;
}

/* ─── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}