/* Scroll reveal: fade / slide when elements enter the viewport.
   Usage:
     class="js-reveal"                 fade + slide up
     class="js-reveal js-reveal--left"  from left
     class="js-reveal js-reveal--right" from right
     class="js-reveal js-reveal--fade"  fade only
     class="js-reveal js-reveal--zoom"  fade + slight scale
     data-reveal-delay="120"           extra ms delay
   Parent stagger:
     class="js-reveal-stagger" data-reveal-step="80"
*/
.js-reveal,
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal--left,
[data-reveal="left"] {
  transform: translate3d(-42px, 0, 0);
}

.js-reveal--right,
[data-reveal="right"] {
  transform: translate3d(42px, 0, 0);
}

.js-reveal--fade,
[data-reveal="fade"] {
  transform: none;
}

.js-reveal--zoom,
[data-reveal="zoom"] {
  transform: scale(0.94);
}

.js-reveal.is-inview,
[data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}