@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

.card-fade {
  opacity: 0; /* hidden by default */
  visibility: hidden;
}

.card-fade.show {
  animation: card-fade-in 0.6s ease-out forwards;
}


@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px); /* start slightly left */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* settle in place */
  }
}

.fade-in-left {
  opacity: 0; /* hidden before animation starts */
  animation: fade-in-left 0.8s ease-out forwards;
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(0); /* start slightly left */
  }
  to {
    opacity: 1;
    transform: translateX(-30px); /* settle in place */
  }
}

.fade-in-right {
  opacity: 0; /* hidden before animation starts */
  animation: fade-in-right 0.8s ease-out forwards;
}