/* ------- animation ------------- */
.fadeIn {
  animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translatex(0);
  }
}

/* ---- */
.slideUp {
  animation: slideUp 1s ease-out forwards;
  animation-timeline: view();
  animation-range: entry 0%;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(40px);
  }
}


.zoomIn {
  animation: zoomIn 0.8s ease-out forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
}

@keyframes zoomIn {
  from {

    transform: scale(0.8);
  }
  to {

    transform: scale(1);
  }
}