/* *****************************************************************************
*
*  Automatic [data-animate] Js in viewport animation
*
* ***************************************************************************** */
@keyframes anim_fade-in {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1;
  }
}

@keyframes anim_fadeslide-in {
  0% {
    transform: translateY(2rem);
    opacity: 0
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
}

@keyframes anim_fadeslide-in--from-top {
  0% {
    transform: translateY(-2rem);
    opacity: 0
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
}

@keyframes anim_slide-up-in {
  0% {
    transform: translateY(1rem);
  }
  100% {
    transform: translateY(0);
  }
}

// ---------------------------------------------

[data-animate] {
  opacity: 0;
  transition: none;
  animation-delay: 0s;
  animation-duration: 0.8s;
  //animation-timing-function: ease-in-out;
  animation-timing-function: ease;
  animation-fill-mode: forwards;

  // default anim
  &.fadeslide-in {
    animation-name: anim_fadeslide-in;
    animation-fill-mode: forwards;
  }

  &.fadeslide-in--down {
    animation-name: anim_fadeslide-in--from-top;
    animation-fill-mode: forwards;
  }

  &.fade-in {
    animation-name: anim_fade-in;
    animation-fill-mode: forwards;
  }

  &.slide-up {
    animation-name: anim_slide-up-in;
    animation-fill-mode: forwards;
    opacity: 1;
  }

  // create delay in siblings animation
  $i: 2;
  //$modifier: .9;
  //@while ($modifier > 0) {
  @while ($i < 50) {
    [data-animate-row] > &:nth-child(#{$i}) {
      animation-delay: ($i - 1) * .1s;
      //animation-delay: ($i - 1) * $modifier * .1s;
    }

    $i: $i+1;
    //$modifier: $modifier * $modifier + 0.09;
  }


  .js-is-csr-agent &,
  &.data-animate--done {
    opacity: 1!important;
    animation: none;
  }
}