.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s ease-out, transform 1.2 ease-out;
}
.fade-in-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
/* 1. Base state: Hidden and shifted left */
.msi-animate-slide-left {
  opacity: 0;
  transform: translateX(-100px);
  display: block;
  transition: opacity 0.5s ease;
  /* Optional smooth fade-in */
}
/* 2. The Animation: Only runs when .is-visible is added by JS */
.msi-animate-slide-left.is-visible {
  animation: slideInFromLeft 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-50vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}