/* FadeInUp Animation CSS */

/* Base Animation Classes */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Animation Delays */
.fade-delay-100 {
  transition-delay: 0.1s;
}

.fade-delay-200 {
  transition-delay: 0.2s;
}

.fade-delay-300 {
  transition-delay: 0.3s;
}

.fade-delay-400 {
  transition-delay: 0.4s;
}

.fade-delay-500 {
  transition-delay: 0.5s;
}

/* Fade In Up Animation for Different Elements */

/* Headings */
.fade-heading {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-heading.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cards */
.fade-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Images */
.fade-image {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.fade-image.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Text Blocks */
.fade-text {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-text.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Buttons */
.fade-button {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-button.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Utility selector to target all fade-in elements together */
.fade-animate {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-animate.visible {
  opacity: 1;
  transform: translateY(0);
}