:root {
  --feselle-scroll-animation-distance: 36px;
  --feselle-scroll-animation-duration: 700ms;
  --feselle-scroll-animation-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

.slide-in-up,
.slide-in-down,
.slide-in-left,
.slide-in-right {
  --feselle-scroll-animation-offset-x: 0px;
  --feselle-scroll-animation-offset-y: 0px;
  --feselle-scroll-animation-delay: 0ms;
}

.slide-in-up {
  --feselle-scroll-animation-offset-y: var(--feselle-scroll-animation-distance);
}

.slide-in-down {
  --feselle-scroll-animation-offset-y: calc(
    var(--feselle-scroll-animation-distance) * -1
  );
}

.slide-in-left {
  --feselle-scroll-animation-offset-x: var(--feselle-scroll-animation-distance);
}

.slide-in-right {
  --feselle-scroll-animation-offset-x: calc(
    var(--feselle-scroll-animation-distance) * -1
  );
}

.delay-100 {
  --feselle-scroll-animation-delay: 100ms;
}

.delay-200 {
  --feselle-scroll-animation-delay: 200ms;
}

.delay-300 {
  --feselle-scroll-animation-delay: 300ms;
}

.feselle-scroll-animations-ready .slide-in-up,
.feselle-scroll-animations-ready .slide-in-down,
.feselle-scroll-animations-ready .slide-in-left,
.feselle-scroll-animations-ready .slide-in-right {
  opacity: 0;
  transform: translate3d(
    var(--feselle-scroll-animation-offset-x),
    var(--feselle-scroll-animation-offset-y),
    0
  );
  transition:
    opacity var(--feselle-scroll-animation-duration)
      var(--feselle-scroll-animation-easing)
      var(--feselle-scroll-animation-delay),
    transform var(--feselle-scroll-animation-duration)
      var(--feselle-scroll-animation-easing)
      var(--feselle-scroll-animation-delay);
  will-change: opacity, transform;
}

.feselle-scroll-animations-ready .slide-in-up.feselle-scroll-in-view,
.feselle-scroll-animations-ready .slide-in-down.feselle-scroll-in-view,
.feselle-scroll-animations-ready .slide-in-left.feselle-scroll-in-view,
.feselle-scroll-animations-ready .slide-in-right.feselle-scroll-in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .feselle-scroll-animations-ready .slide-in-up,
  .feselle-scroll-animations-ready .slide-in-down,
  .feselle-scroll-animations-ready .slide-in-left,
  .feselle-scroll-animations-ready .slide-in-right {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}