/* ---------------- Animation States ---------------- */
.animateMe {
  opacity: 0;
  transform: translateY(50%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ---------------- Direction Base Styles ---------------- */
/* Fade In (no movement) */
.fadeIn {
  opacity: 0;
  transform: none;
}

/* Left to 0px */
.fadeInLeft {
  opacity: 0;
  transform: translateX(-50%);
}

/* Right to 0px */
.fadeInRight {
  opacity: 0;
  transform: translateX(50%);
}

/* Top to 0px */
.fadeInTop {
  opacity: 0;
  transform: translateY(-50%);
}

/* Bottom to 0px */
.fadeInDown {
  opacity: 0;
  transform: translateY(50%);
}

/* ---------------- Animated State ---------------- */
.animateMe.animate,
.fadeIn.animate {
  opacity: 1;
  transform: none;
}

.fadeInLeft.animate {
  opacity: 1;
  transform: translateX(0);
}

.fadeInRight.animate {
  opacity: 1;
  transform: translateX(0);
}

.fadeInTop.animate {
  opacity: 1;
  transform: translateY(0);
}

.fadeInDown.animate {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- Duration Utility Classes ---------------- */
.duration-slowest {
  transition-duration: 3s;
}
.duration-slower {
  transition-duration: 2.5s;
}
.duration-slow {
  transition-duration: 1.5s;
}
.duration-fast {
  transition-duration: 0.5s;
}
.duration-faster {
  transition-duration: 0.3s;
}

/* ---------------- Delay Utility Classes ---------------- */
.delay-03s {
  transition-delay: 0.3s;
}
.delay-06s {
  transition-delay: .6s;
}
.delay-09s {
  transition-delay: .9s;
}
.delay-12s {
  transition-delay: 1.2s;
}
.delay-15s {
  transition-delay: 1.5s;
}
.delay-18s {
  transition-delay: 1.8s;
}


.animateHeader {
  animation-name: fadeInTop;  /* This must match your keyframes name */
  animation-fill-mode: both;  /* Ensures styles stay applied after animation */
  animation-timing-function: ease;
}

/* This must match the animation-name above */
@keyframes fadeInTop {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.duration-slow {
  animation-duration: 2s;
}

.animateBanner {
  animation-name: fadeInLeft;  
  animation-fill-mode: both;  
  animation-timing-function: ease;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.duration-slow {
  animation-duration: 2s;
}