.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}

.js-scroll.scrolled {
  opacity: 1;
}

.scrolled.fade-in {
  animation: fade-in 1s ease-in-out both;
}

.scrolled.fade-in-bottom {
  animation: fade-in-bottom 1s ease-in-out both;
}

.scrolled.slide-left {
  animation: slide-in-left 1s ease-in-out both;
}

.scrolled.slide-right {
  animation: slide-in-right 1s ease-in-out both;
}

.parallax-text {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.breadcrumb-pane {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.breadcrumb-pane.breadcrumb-hidden {
  opacity: 0;
}

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-150px);
    transform: translateX(-150px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(150px);
    transform: translateX(150px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@keyframes waveBackgroundSm {
  0% { background-position: 50% 52%; }
  25% { background-position: 52% 54%; }
  50% { background-position: 54% 56%; }
  75% { background-position: 56% 52%; }
  100% { background-position: 52% 50%; }
}
@keyframes waveBackgroundLg {
  0% { background-position: 50% 60%; }
  25% { background-position: 60% 50%; }
  50% { background-position: 50% 60%; }
  75% { background-position: 60% 50%; }
  100% { background-position: 50% 60%; }
}

@media (prefers-reduced-motion) {
  .js-scroll {
    opacity: 1;
  }
  .scrolled {
    animation: none !important;
  }
}
