:root {
    --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-duration: 1s;
  }
  
  @-webkit-keyframes slideInUp {
    0% {
      opacity: 0;
      transform: translateY(25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  
  @keyframes slideInUp {
    0% {
      opacity: 0;
      transform: translateY(25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes slideInDown {
    0% {
      opacity: 0;
      transform: translateY(-25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slideInDown {
    0% {
      opacity: 0;
      transform: translateY(-25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes slideInleft {
    0% {
      opacity: 0;
      transform: translateX(25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slideInleft {
    0% {
      opacity: 0;
      transform: translateX(25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(-25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(-25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes zoomIn {
    0% {
      opacity: 0;
      transform: scale(0.75);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes zoomIn {
    0% {
      opacity: 0;
      transform: scale(0.75);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes zoomReverseIn {
    0% {
      opacity: 0;
      transform: scale(1.25);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes zoomReverseIn {
    0% {
      opacity: 0;
      transform: scale(1.25);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes flipInY {
    0% {
      opacity: 0;
      transform: perspective(90vw) rotateY(67.5deg);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes flipInY {
    0% {
      opacity: 0;
      transform: perspective(90vw) rotateY(67.5deg);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  [data-animation] {
    opacity: 0;
    -webkit-animation-timing-function: var(--animation-timing-function);
            animation-timing-function: var(--animation-timing-function);
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-duration: var(--animation-duration);
            animation-duration: var(--animation-duration);
    will-change: transform, opacity;
  }
  
  .animations-disabled,
  .animations-disabled [data-animation] {
    -webkit-animation: none !important;
            animation: none !important;
    opacity: 1 !important;
  }
  
  .slideInUp {
    -webkit-animation-name: slideInUp;
            animation-name: slideInUp;
  }
  
  .slideInDown {
    -webkit-animation-name: slideInDown;
            animation-name: slideInDown;
  }
  
  .slideInLeft {
    -webkit-animation-name: slideInleft;
            animation-name: slideInleft;
  }
  
  .slideInRight {
    -webkit-animation-name: slideInRight;
            animation-name: slideInRight;
  }
  
  .fadeIn {
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
  }
  
  .zoomIn {
    -webkit-animation-name: zoomIn;
            animation-name: zoomIn;
  }
  
  .zoomReverseIn {
    -webkit-animation-name: zoomReverseIn;
            animation-name: zoomReverseIn;
  }
  
  .flipInY {
    -webkit-animation-name: flipInY;
            animation-name: flipInY;
  }
  
  .flipOutY {
    -webkit-animation-name: flipInY;
            animation-name: flipInY;
    animation-direction: reverse;
  }