/* Note* Cannot Use on Inline Elements */

.animation{
    transition: var(--duration, 1s) var(--easing, ease);
    transition-delay: var(--delay, 0.3s);
}
.animate{
    opacity: 1 !important;
}

/* fade up (+n) & down (-n) */
.fade-y {
    opacity: var(--offset-opacity, 0);
    transform: translateY(var(--offset-y, 100px));
}
.fade-y.animate {
    transform: translateY(0);
}

/* fade left (-n) & right (+n) */
.fade-x {
    opacity: var(--offset-opacity, 0);
    transform: translateX(var(--offset-x, -100px));
}
.fade-x.animate {
    transform: translateX(0);
}

/* zoom in (n<1) & out (n>1)*/
.zoom {
    opacity: var(--offset-opacity, 0);
    scale: var(--offset-scale, 0.8);
}
.zoom.animate {
    scale: 1;
}

/* zoom in/out & left/right */
.zoom-x {
    opacity: var(--offset-opacity, 0);
    transform: translateX(var(--offset-x, -100px));
    scale: var(--offset-scale, 0.8);
}
.zoom-x.animate {
    scale: 1;
    transform: translateX(0);
}

/* ================================================== Scroll Icon Animation ================================================== */
.scroller{
    width: 28.2px;
    height: 48px;
    position: absolute;
    bottom: 25px;
    left: 50%;
    translate: -50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: 0.5s ease;
  }
  .scroller::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    border-radius: 100px;
  }
  .scroller::after{
    content: '';
    position: absolute;
    width: 6.4px;
    height: 6.4px;
    background: #fff;
    border-radius: 50px;
    translate: 0 -150%;
    animation: 2s upDown infinite;
  }
  @keyframes upDown{
    0%{
      translate: 0 -150%;
      height: 6.4px;
    }
    25%{
      translate: 0 -150%;
      height: 6.4px;
    }
    40%{
      translate: 0 -200%;
      height: 6.4px;
    }
    70%{
      opacity: 1;
    }
    100%{
      translate: 0 100%;
      height: 14px;
      opacity: 0;
    }
  }