* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(-50px);
  transition: all 0.6s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-left, .animate-right {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.8s ease-out;
}

/* When in view */
.show {
  opacity: 1;
  transform: scale(1);
}.scroll-reveal-right {
  opacity: 0;
  transform-origin: right center; /* Scale from right edge */
  transform: scaleX(0);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-reveal-right.animate {
  opacity: 1;
  transform: scaleX(1);
}