/* // Variables
// --------- */
:root {
    --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-duration: 1s;
  }
  
  /* // Keyframes
  // --------- */
  @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;
    }
  }
  
  /* // Animations
  // ---------- */
  [data-animation] {
    opacity: 0;
    animation-timing-function: var(--animation-timing-function);
    animation-fill-mode: both;
    animation-duration: var(--animation-duration);
    will-change: transform, opacity;
  }
  
  /* // Disable animation of the childs */
  /* // Disable self animation */
  .animations-disabled {
    &,
    [data-animation] {
      animation: none !important;
      opacity: 1 !important;
    }
  }
  
  /* // Slide Animations */
  .slideInUp {
    animation-name: slideInUp;
  }
  .slideInDown {
    animation-name: slideInDown;
  }
  .slideInLeft {
    animation-name: slideInleft;
  }
  .slideInRight {
    animation-name: slideInRight;
  }
   /* Fade Animations */
  .fadeIn {
    animation-name: fadeIn;
  }
  
  /* // Zoom Animations */
  .zoomIn {
    animation-name: zoomIn;
  }
  .zoomReverseIn {
    animation-name: zoomReverseIn;
  }
  
  /* // Flip Animations */
  .flipInY {
    animation-name: flipInY;
  }
  .flipOutY {
    animation-name: flipInY;
    animation-direction: reverse;
  }