.animation {
	  opacity: 0;
    animation-timing-function: ease-out;
}

.is-sticky-visible {
  opacity: 1;
  transform: none;
}

.animate {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}
  
@keyframes slideIn {
    0% {
      transform: translateY(1rem);
      opacity: 0;
    }
  
    100% {
      transform: translateY(0rem);
      opacity: 1;
    }
  
    0% {
      transform: translateY(1rem);
      opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInUp {
	0% {
		transform: translateY(20px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes fadeInUpSticky {
	0% {
		transform: translateY(-80px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes fadeOutUpSticky {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(-80px);
		opacity: 0;
	}
}


@keyframes fadeInLeft {
	0% {
		filter: blur(5px);
        transform: translateX(-100%);
        opacity: 0;
	}
	100% {
		filter: blur(0);
        transform: translateX(0);
        opacity: 1;
	}
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomOut {
   0% {
      transform: scale(1.1);
   }
   100% {
      transform: scale(1);
   }
}



.slideIn { animation-name: slideIn; }
.fadeInLeft { animation-name: fadeInLeft; }
.fadeIn { animation-name: fadeIn; }
.fadeInUp { animation-name: fadeInUp; }
.fadeInUpSticky { animation-name: fadeInUpSticky; }
.fadeOutUpSticky { animation-name: fadeOutUpSticky; }
.fadeOutRight { animation-name: fadeOutRight; }
.fadeInRight { animation-name: fadeInRight; }

.slow { animation-duration: 1.5s; }
.moderate { animation-duration: 1s; }
.fast { animation-duration: 0.5s; }

@media (prefers-reduced-motion: reduce) {
    .animation {
        animation: none;
        opacity: 1;
    }
}