/* ===============================
   Fade-in Animation for Elements
   =============================== */

/* Initial state: hidden and slightly offset */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

/* When visible, fade in and move to normal position */
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: Slight delay for sequential animations */
.fade-in:nth-child(1) {
  transition-delay: 0.2s;
}
.fade-in:nth-child(2) {
  transition-delay: 0.4s;
}
.fade-in:nth-child(3) {
  transition-delay: 0.6s;
}
.fade-in:nth-child(4) {
  transition-delay: 0.8s;
}

/* Additional fade-in for text to make it smoother */
.text-fade {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

.text-fade.visible {
  opacity: 1;
}