.eightainment-animated {
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 0.8s ease, opacity 0.8s ease;
  will-change: transform, opacity;
}

.eightainment-animated.visible {
  opacity: 1;
}

/* Animation Variants */
.eightainment-zoom-in { transform: scale(0.8); }
.eightainment-zoom-in.visible { transform: scale(1); }

.eightainment-zoom-out { transform: scale(1.2); }
.eightainment-zoom-out.visible { transform: scale(1); }

.eightainment-left-in { transform: translate3d(-80px, 0, 0); }
.eightainment-left-in.visible { transform: translate3d(0, 0, 0); }

.eightainment-right-in { transform: translate3d(80px, 0, 0); }
.eightainment-right-in.visible { transform: translate3d(0, 0, 0); }

.eightainment-top-in { transform: translate3d(0, -40px, 0); }
.eightainment-top-in.visible { transform: translate3d(0, 0, 0); }

.eightainment-bottom-in { transform: translate3d(0, 40px, 0); }
.eightainment-bottom-in.visible { transform: translate3d(0, 0, 0); }

.eightainment-right-in-x { transform: translate3d(500px, 0, 0); }
.eightainment-right-in-x.visible { transform: translate3d(0, 0, 0); }

.eightainment-left-in-x { transform: translate3d(-500px, 0, 0); }
.eightainment-left-in-x.visible { transform: translate3d(0, 0, 0); }

@media (max-width: 768px) {
  .eightainment-right-in-x { transform: translate3d(40px, 0, 0); }
  .eightainment-left-in-x { transform: translate3d(-40px, 0, 0); }
}