/* Initial states for animations */
.fade-in,
.fade-in-left,
.fade-in-right,
.fade-in-up,
.fade-in-down,
.slide-in-left,
.slide-in-right,
.slide-in-up,
.slide-in-down,
.flip-in-x,
.flip-in-y {
  opacity: 0;
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Fade In */
.fade-in.is-visible {
  opacity: 1;
}

/* Fade In from Left */
.fade-in-left {
  transform: translateX(-50px);
}
.fade-in-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade In from Right */
.fade-in-right {
  transform: translateX(50px);
}
.fade-in-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade In from Up */
.fade-in-up {
  transform: translateY(-50px);
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade In from Down */
.fade-in-down {
  transform: translateY(50px);
}
.fade-in-down.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide In from Left */
.slide-in-left {
  transform: translateX(-100%);
}
.slide-in-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide In from Right */
.slide-in-right {
  transform: translateX(100%);
}
.slide-in-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide In from Up */
.slide-in-up {
  transform: translateY(-100%);
}
.slide-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide In from Down */
.slide-in-down {
  transform: translateY(100%);
}
.slide-in-down.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Flip In X */
.flip-in-x {
  transform: perspective(1000px) rotateX(-90deg);
}
.flip-in-x.is-visible {
  opacity: 1;
  transform: perspective(1000px) rotateX(0);
}

/* Flip In Y */
.flip-in-y {
  transform: perspective(1000px) rotateY(-90deg);
}
.flip-in-y.is-visible {
  opacity: 1;
  transform: perspective(1000px) rotateY(0);
}

/* Optional: Add a delay or stagger effect if desired */
/*
.animation-delay-200.is-visible { transition-delay: 0.2s; }
.animation-delay-400.is-visible { transition-delay: 0.4s; }
*/