/* 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, 16px, 0);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

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

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

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

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

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

html.sd-root .sd-hero .sd-hero__grid > *,
html.sd-root .sd-hero .sd-stats {
  animation: sd-reveal-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.sd-root .sd-hero .sd-hero__grid > *:nth-child(2) {
  animation-delay: 0.1s;
}

html.sd-root .sd-hero .sd-stats {
  animation-delay: 0.16s;
}

html[dir="rtl"].sd-root .js-reveal--left,
html[dir="rtl"].sd-root [data-reveal="left"] {
  transform: translate3d(36px, 0, 0);
}

html[dir="rtl"].sd-root .js-reveal--right,
html[dir="rtl"].sd-root [data-reveal="right"] {
  transform: translate3d(-36px, 0, 0);
}

@keyframes sd-reveal-in {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  [data-reveal],
  html.sd-root .sd-hero .sd-hero__grid > *,
  html.sd-root .sd-hero .sd-stats {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}