/* ==== APARICIÓN SUAVE / DESAPARICIÓN (scroll reveal) ==== */
[data-animate] {
  opacity: 0;
  transform: translateY(28px) scale(0.995);
  transition: opacity 1s cubic-bezier(.22,.9,.35,1), transform 0.55s cubic-bezier(.22,.9,.35,1);
  will-change: opacity, transform;
  pointer-events: auto;
}

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

/* variantes: izquierda, derecha, zoom */
[data-animate][data-anim="left"] { transform: translateX(-40px) translateY(10px) scale(.995); }
[data-animate][data-anim="right"] { transform: translateX(40px) translateY(10px) scale(.995); }
[data-animate][data-anim="zoom"]  { transform: translateY(10px) scale(.95); }

[data-animate][data-anim="left"].visible,
[data-animate][data-anim="right"].visible,
[data-animate][data-anim="zoom"].visible {
  transform: translateX(0) translateY(0) scale(1);
}