/**
 * ANIMATIONS.CSS
 * Animaciones centralizadas para el proyecto Argus
 * Consolidado de: login.css, estructura.css, chalecos-azules.css, geografico.css
 */

/* ========================================
   FADE ANIMATIONS
   ======================================== */

/**
 * Fade In - Entrada suave con desplazamiento vertical
 * Usado en: Login, Estructura, múltiples componentes
 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Fade Out - Salida suave
 */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ========================================
   SPIN/LOADING ANIMATIONS
   ======================================== */

/**
 * Spin - Rotación continua para spinners de carga
 * Usado en: Chalecos Azules, múltiples loaders
 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   SLIDE ANIMATIONS
   ======================================== */

/**
 * Slide Down - Expansión vertical con fade
 * Usado en: Módulo geográfico, dropdowns
 */
@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 24rem;
    opacity: 1;
  }
}

/**
 * Slide Up - Colapso vertical con fade
 * Usado en: Módulo geográfico, dropdowns
 */
@keyframes slideUp {
  from {
    max-height: 24rem;
    opacity: 1;
  }
  to {
    max-height: 0;
    opacity: 0;
  }
}

/* ========================================
   POPUP/MODAL ANIMATIONS
   ======================================== */

/**
 * Popup Fade In - Entrada de overlay con blur
 * Usado en: Popups de Chalecos Azules
 */
@keyframes popup-fade-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(4px);
  }
}

/**
 * Popup Slide In - Entrada del contenedor del popup
 * Usado en: Modales, popups
 */
@keyframes popup-slide-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ========================================
   GRADIENT/BACKGROUND ANIMATIONS
   ======================================== */

/**
 * Gradient Shift - Desplazamiento de gradiente animado
 * Usado en: Botones geográficos, elementos destacados
 */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/**
 * Clases de utilidad para aplicar animaciones fácilmente
 */
.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

.animate-fade-out {
  animation: fadeOut 0.3s ease-out;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-slide-down {
  animation: slideDown 0.3s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}

.animate-popup-fade-in {
  animation: popup-fade-in 0.3s ease-out;
}

.animate-popup-slide-in {
  animation: popup-slide-in 0.3s ease-out;
}

.animate-gradient-shift {
  animation: gradientShift 3s ease infinite;
  background-size: 200% 200%;
}