/* ============================================
   SISTEMA DE ANIMACIONES
   ============================================ */

/* Configuración base para elementos animables */
[data-animation] {
  will-change: transform, opacity, filter;
}

/* Clase activa cuando la animación se ejecuta */
.is-animated {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

.animate-fade-up.is-animated {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.animate-fade-down.is-animated {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.animate-fade-left.is-animated {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

.animate-fade-right.is-animated {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

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

.animate-slide-up.is-animated {
  transform: translateY(0) !important;
}

.animate-slide-down.is-animated {
  transform: translateY(0) !important;
}

.animate-slide-left.is-animated {
  transform: translateX(0) !important;
}

.animate-slide-right.is-animated {
  transform: translateX(0) !important;
}

/* ============================================
   BLUR ANIMATIONS
   ============================================ */

.animate-blur-up.is-animated {
  transform: translateY(0) !important;
  opacity: 1 !important;
  filter: blur(0) !important;
}

.animate-blur-down.is-animated {
  transform: translateY(0) !important;
  opacity: 1 !important;
  filter: blur(0) !important;
}

.animate-blur-left.is-animated {
  transform: translateX(0) !important;
  opacity: 1 !important;
  filter: blur(0) !important;
}

.animate-blur-right.is-animated {
  transform: translateX(0) !important;
  opacity: 1 !important;
  filter: blur(0) !important;
}

/* ============================================
   VARIANTES DE VELOCIDAD (opcional)
   ============================================ */

/* Animación rápida */
[data-animation-speed="fast"].is-animated {
  transition-duration: 0.4s !important;
}

/* Animación lenta */
[data-animation-speed="slow"].is-animated {
  transition-duration: 1.2s !important;
}

/* ============================================
   EASE PERSONALIZADAS (opcional)
   ============================================ */

[data-animation-ease="linear"].is-animated {
  transition-timing-function: linear !important;
}

[data-animation-ease="ease-in"].is-animated {
  transition-timing-function: cubic-bezier(0.42, 0, 1, 1) !important;
}

[data-animation-ease="ease-out"].is-animated {
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1) !important;
}

[data-animation-ease="bounce"].is-animated {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}