/* Base hidden state for all scroll-animations */
.scroll-animate {
  opacity: 0;
  transform: translateY(20px); /* default downward slide */
  transition: all 0.5s ease;
  color: #333; /* medium gray text visible on white */
}

/* Fade in only */
.scroll-fade-in {
  opacity: 1 !important;
  transform: none !important;
}

/* Slide in from left */
.scroll-slide-left {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

/* Slide in from right */
.scroll-slide-right {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

/* Slide in from bottom */
.scroll-slide-up {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* Optional: customize duration and easing */
.scroll-animate {
  transition-duration: var(--scroll-duration, 1s);
  transition-timing-function: var(--scroll-ease, ease);
}