.animate-on-scroll{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
  will-change:opacity, transform;
}
.animate-on-scroll.is-visible{
  opacity:1;
  transform:translateY(0);
}
.delay-1{transition-delay:.05s}
.delay-2{transition-delay:.12s}
.delay-3{transition-delay:.18s}
.delay-4{transition-delay:.24s}

.mesh{
  animation:mesh-drift 14s cubic-bezier(.4,0,.2,1) infinite alternate;
}
.mesh--two{animation-duration:18s}
.mesh--three{animation-duration:22s}

@keyframes mesh-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4vmax,-3vmax,0) scale(1.04)}
  100%{transform:translate3d(-3vmax,2vmax,0) scale(1.02)}
}

.float-card{
  animation:float 6s cubic-bezier(.4,0,.2,1) infinite;
}
.float-card:nth-child(2){animation-duration:7.5s}
.float-card:nth-child(3){animation-duration:6.8s}

@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}

.ripple{
  position:relative;
  overflow:hidden;
}
.ripple .ripple__circle{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  animation:ripple .6s cubic-bezier(.4,0,.2,1);
  background:rgba(255,255,255,.25);
  pointer-events:none;
}
@keyframes ripple{
  to{transform:scale(4);opacity:0}
}

.btn.is-loading .btn__spinner{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  .animate-on-scroll{transition:none;opacity:1;transform:none}
  .mesh,.float-card{animation:none}
  .carousel__track{transition:none}
  .ripple .ripple__circle{animation:none}
}