//----------------------------------------------
// Fade In
//---------------------------------------------- 
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

//----------------------------------------------
// Fade Out
//---------------------------------------------- 
@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

//----------------------------------------------
// Fade Out
//---------------------------------------------- 
@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

//----------------------------------------------
// Scale
//---------------------------------------------- 
@keyframes scale {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}

//----------------------------------------------
// Spin
//---------------------------------------------- 
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes spin-reverse {
  to { transform: rotate(-360deg); }
}

//----------------------------------------------
// Animation Helper
//---------------------------------------------- 
.fade-in {
  animation: fade-in ease-in-out 600ms both;
}

.fade-out {
  animation: fade-out ease-in-out 600ms both;
}

.fade-up {
  animation: fade-up ease-in-out 800ms both;
}

//----------------------------------------------
// Animation Helper AOS
//---------------------------------------------- 
$aos-easing: (
  ease-in-out: cubic-bezier(.420, 0, .580, 1)
);

[data-aos] {
  @for $i from 1 through 60 {
    body[data-aos-duration='#{$i * 50}'] &,
    &[data-aos][data-aos-duration='#{$i * 50}'] {
      transition-duration: #{$i * 50}ms;
    }

    body[data-aos-delay='#{$i * 50}'] &,
    &[data-aos][data-aos-delay='#{$i * 50}'] {
      transition-delay: 0;

      &.aos-animate {
        transition-delay: #{$i * 50}ms;
      }
    }
  }

  @each $key, $val in $aos-easing {
    body[data-aos-easing="#{$key}"] &,
    &[data-aos][data-aos-easing="#{$key}"] {
      transition-timing-function: $val;
    }
  }
}

[data-aos="fade-in"] {
  opacity: 0;
  transition-property: opacity;

  &.aos-animate {
    opacity: 1;
  }
}
