/* 🔥 Base */
.item {
  opacity: 0;
  transform: translateX(60px); /* ejemplo: todas desde la derecha */
  transition: all 1s ease-in-out;
}

.item.visible {
  opacity: 1;
  transform: translateX(0);
}

/* 🔽 Animaciones según dirección */
.item-left {
  transform: translateX(-50px);
}
.item-left.visible {
  transform: translateX(0);
}

.item-right {
  transform: translateX(50px);
}
.item-right.visible {
  transform: translateX(0);
}

.item-top {
  transform: translateY(-50px);
}
.item-top.visible {
  transform: translateY(0);
}

.item-bottom {
  transform: translateY(50px);
}
.item-bottom.visible {
  transform: translateY(0);
}