:root {
   --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   --animation-duration: 1s;
}

body {
    overflow-x: hidden;
    animation: fadePageInAnimation ease 0.75s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
 
[data-animation] {
   opacity: 0;
   animation-timing-function: var(--animation-timing-function);
   animation-fill-mode: both;
   animation-duration: var(--animation-duration);
   will-change: transform, opacity;
}

.animations-disabled {
   &,
   [data-animation] {
       animation: none !important;
       opacity: 1 !important;
   }
}
   
.slideInUp {
   animation-name: slideInUp;
}
.slideInDown {
    animation-name: slideInDown;
}
.slideInLeft {
    animation-name: slideInleft;
}
.slideInRight {
    animation-name: slideInRight;
}

.fadeIn {
   animation-name: fadeIn;
}

.zoomIn {
   animation-name: zoomIn;
}
.zoomReverseIn {
    animation-name: zoomReverseIn;
}

.flipInY {
   animation-name: flipInY;
}
.flipOutY {
    animation-name: flipInY;
    animation-direction: reverse;
}

/* keyframes */
 @keyframes fadePageInAnimation {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }
 
 @keyframes slideInUp {
     0% {
         opacity: 0;
         transform: translateY(25%);
     }
     100% {
         opacity: 1;
         transform: none;
     }
 }

 @keyframes slideInDown {
     0% {
         opacity: 0;
         transform: translateY(-25%);
     }
     100% {
         opacity: 1;
         transform: none;
     }
 }

 @keyframes slideInleft {
     0% {
         opacity: 0;
         transform: translateX(-25%);
     }
     100% {
         opacity: 1;
         transform: none;
     }
 }

 @keyframes slideInRight {
     0% {
         opacity: 0;
         transform: translateX(25%);
     }
     100% {
         opacity: 1;
         transform: none;
     }
 }

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

 @keyframes zoomIn {
     0% {
         opacity: 0;
         transform: scale(0.75);
     }
     100% {
         opacity: 1;
         transform: none;
     }
 }

 @keyframes zoomReverseIn {
     0% {
         opacity: 0;
         transform: scale(1.25);
     }
     100% {
         opacity: 1;
         transform: none;
     }
 }

 @keyframes flipInY {
     0% {
         opacity: 0;
         transform: perspective(90vw) rotateY(67.50deg);
     }
     100% {
         opacity: 1;
         transform: none;
     }
 }