/* =========================================================
  Scroll Animation
========================================================= */

.js-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .7s ease,
    transform .7s ease;
  will-change: opacity, transform;
}

.js-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* fade in */
.js-scroll--fade {
  transform: none;
}

/* fade up */
.js-scroll--fade-up {
  transform: translateY(22px);
}

/* fade left */
.js-scroll--fade-left {
  transform: translateX(22px);
}

/* fade right */
.js-scroll--fade-right {
  transform: translateX(-22px);
}

/* zoom */
.js-scroll--zoom {
  transform: scale(.975);
}

.js-scroll--zoom.is-visible {
  transform: scale(1);
}

/* delay */
.js-scroll--delay-1 {
  transition-delay: .08s;
}

.js-scroll--delay-2 {
  transition-delay: .16s;
}

.js-scroll--delay-3 {
  transition-delay: .24s;
}

.js-scroll--delay-4 {
  transition-delay: .32s;
}

/* image */
.js-scroll-img {
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition:
    opacity .8s ease,
    transform .8s ease;
  will-change: opacity, transform;
}

.js-scroll-img.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* card */
.js-scroll-card {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .7s ease,
    transform .7s ease,
    box-shadow .3s ease;
  will-change: opacity, transform;
}

.js-scroll-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* motion reduce */
@media (prefers-reduced-motion: reduce) {
  .js-scroll,
  .js-scroll-img,
  .js-scroll-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}