/* =========================================
   ANIMACIONES DE ENTRADA (NUEVO)
   ========================================= */

[data-animation] {
  opacity: 0;
  will-change: transform, opacity;
  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Tipos de animaciones iniciales según el data-animation */
[data-animation="fade-up"] {
  transform: translateY(40px);
}
[data-animation="fade-in"] {
  transform: scale(0.95);
}
[data-animation="slide-left"] {
  transform: translateX(-40px);
}
[data-animation="slide-right"] {
  transform: translateX(40px);
}

/* Clase que se agrega con JS cuando entra en pantalla */
[data-animation].is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Retrasos secuenciales (Data-delay) */
[data-delay="100"] {
  transition-delay: 100ms;
}
[data-delay="200"] {
  transition-delay: 200ms;
}
[data-delay="300"] {
  transition-delay: 300ms;
}
[data-delay="400"] {
  transition-delay: 400ms;
}
[data-delay="500"] {
  transition-delay: 500ms;
}
[data-delay="600"] {
  transition-delay: 600ms;
}