/* Fade In Animation */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.6s ease-in forwards;
}

/* Delay variations for staggered animations */
.fade-in.delay-1 { animation-delay: 0.2s; }
.fade-in.delay-2 { animation-delay: 0.4s; }
.fade-in.delay-3 { animation-delay: 0.6s; }
.fade-in.delay-4 { animation-delay: 0.8s; }
.fade-in.delay-5 { animation-delay: 1s; }

/* Base fadeIn keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Left to Right Animation */
.slide-in-left {
  opacity: 0;
  transform: translateX(-100%);
  animation: slideInLeft 0.8s ease-out forwards;
}

/* Delay variations for staggered left-to-right animations */
.slide-in-left.delay-1 { animation-delay: 0.3s; }
.slide-in-left.delay-2 { animation-delay: 0.6s; }
.slide-in-left.delay-3 { animation-delay: 0.9s; }
.slide-in-left.delay-4 { animation-delay: 1.2s; }
.slide-in-left.delay-5 { animation-delay: 1.5s; }

/* Base slideInLeft keyframes */
@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Utility class to hide elements before animation */
.hidden {
  opacity: 0;
}

.grow-from-center {
  opacity: 0;
  transform: scale(0);
  animation: growFromCenter 0.6s ease-out forwards;
}

@keyframes growFromCenter {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}