/* Animation utilities */
:root {
  --motion-duration-md: 360ms;
  --motion-duration-lg: 520ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-distance-md: 24px;
}

.animate {
  --motion-duration: var(--motion-duration-md);
  --motion-delay: 0ms;
  --motion-distance: var(--motion-distance-md);
  --motion-ease: var(--motion-ease-out);
  animation-duration: var(--motion-duration);
  animation-delay: var(--motion-delay);
  animation-timing-function: var(--motion-ease);
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-play-state: paused;
  opacity: 0;
}

.animate.is-visible {
  animation-play-state: running;
  opacity: 1;
}

.animate--down {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  animation-name: bb-slide-down;
}

.animate--slow {
  --motion-duration: var(--motion-duration-lg);
}


.animate--delay-1 {
  --motion-delay: 120ms;
}

.animate--delay-2 {
  --motion-delay: 240ms;
}

.animate--delay-3 {
  --motion-delay: 360ms;
}


@keyframes bb-slide-down {
  from {
    opacity: 0;
    transform: translate3d(0, calc(var(--motion-distance) * -1), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


@media (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}