/* === ANIMACIONES REUTILIZABLES === */

/* Estado inicial: invisible y desplazado */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, transform;
}

/* Estado visible */
[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes: puedes combinarlas con [data-animate="fade-up"] etc. */
[data-animate="fade-up"] {
  transform: translateY(30px);
}

[data-animate="fade-down"] {
  transform: translateY(-30px);
}

[data-animate="fade-left"] {
  transform: translateX(-30px);
}

[data-animate="fade-right"] {
  transform: translateX(30px);
}

[data-animate="zoom-in"] {
  transform: scale(0.8);
}

[data-animate="zoom-in"].visible {
  transform: scale(1);
}

/* Delay opcional por atributo */
[data-animate][data-delay] {
  transition-delay: var(--delay, 0s);
}