/* css/animations.css */
/* Transiciones, animaciones de entrada y micro-interacciones. */

/* ─── SCREEN TRANSITIONS ────────────────────────────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Aplicada cuando una screen se hace activa */
.screen.active {
  animation: fadeSlideUp 0.28s ease both;
}

/* ─── ENTRADA DE CARDS ──────────────────────────────────────────────────────── */
.animate-in {
  animation: fadeSlideUp 0.3s ease both;
}

/* Stagger para listas de items */
.animate-stagger > * {
  animation: fadeSlideUp 0.3s ease both;
}

.animate-stagger > *:nth-child(1) { animation-delay: 0ms; }
.animate-stagger > *:nth-child(2) { animation-delay: 40ms; }
.animate-stagger > *:nth-child(3) { animation-delay: 80ms; }
.animate-stagger > *:nth-child(4) { animation-delay: 120ms; }
.animate-stagger > *:nth-child(5) { animation-delay: 160ms; }
.animate-stagger > *:nth-child(6) { animation-delay: 200ms; }

/* ─── PULSE (para alertas o badges de notificación) ─────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.pulse { animation: pulse 2s ease infinite; }

/* ─── BOUNCE (para botones de acción primaria) ──────────────────────────────── */
@keyframes bounceIn {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

.bounce-in { animation: bounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ─── GLOW (para el badge verificado) ───────────────────────────────────────── */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 4px rgba(15,110,86,0.3); }
  50%       { box-shadow: 0 0 12px rgba(15,110,86,0.6); }
}

.badge-verified { animation: glow 3s ease infinite; }

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

/* ─── SHAKE (para errores de formulario) ────────────────────────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.shake { animation: shake 0.4s ease both; }

/* ─── SLIDE DOWN (para paneles expandibles) ─────────────────────────────────── */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slide-down { animation: slideDown 0.2s ease both; }

/* ─── REDUCIR MOVIMIENTO (accesibilidad) ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
}