/* lib/styles/animations/slide_up.css */


@keyframes ts-motion-slide-up {
  from {
    opacity: 0;
    transform: translate3d(0, var(--ts-motion-slide-up-distance, 1rem), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


.ts-animate-slide-up,
[data-motion="slide-up"] {
  transition:
    opacity var(--motion-transition-reveal),
    transform var(--motion-transition-reveal);
  will-change: opacity, transform;
}


.ts-will-reveal.ts-animate-slide-up,
.ts-will-reveal[data-motion="slide-up"],
.ts-animate-slide-up.ts-will-reveal,
[data-motion="slide-up"].ts-will-reveal {
  opacity: 0;
  transform: translate3d(0, var(--ts-motion-slide-up-distance, 1rem), 0);
}


.ts-is-visible.ts-animate-slide-up,
.ts-is-visible[data-motion="slide-up"],
.ts-animate-slide-up.ts-is-visible,
[data-motion="slide-up"].ts-is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


.ts-animate-slide-up.ts-motion-play,
[data-motion="slide-up"].ts-motion-play {
  animation-name: ts-motion-slide-up;
  animation-duration: var(--motion-duration-medium);
  animation-timing-function: var(--motion-ease-in-out);
  animation-fill-mode: both;
}


.ts-animate-slide-up.ts-motion-fast,
[data-motion="slide-up"].ts-motion-fast {
  animation-duration: var(--motion-duration-fast);
}


.ts-animate-slide-up.ts-motion-slow,
[data-motion="slide-up"].ts-motion-slow {
  animation-duration: var(--motion-duration-slow);
}


.ts-animate-slide-up.ts-motion-distance-sm,
[data-motion="slide-up"].ts-motion-distance-sm {
  --ts-motion-slide-up-distance: 0.75rem;
}


.ts-animate-slide-up.ts-motion-distance-md,
[data-motion="slide-up"].ts-motion-distance-md {
  --ts-motion-slide-up-distance: 1rem;
}


.ts-animate-slide-up.ts-motion-distance-lg,
[data-motion="slide-up"].ts-motion-distance-lg {
  --ts-motion-slide-up-distance: 1.25rem;
}


@media (prefers-reduced-motion: reduce) {
  .ts-animate-slide-up,
  [data-motion="slide-up"],
  .ts-will-reveal.ts-animate-slide-up,
  .ts-will-reveal[data-motion="slide-up"],
  .ts-animate-slide-up.ts-will-reveal,
  [data-motion="slide-up"].ts-will-reveal,
  .ts-is-visible.ts-animate-slide-up,
  .ts-is-visible[data-motion="slide-up"],
  .ts-animate-slide-up.ts-is-visible,
  [data-motion="slide-up"].ts-is-visible,
  .ts-animate-slide-up.ts-motion-play,
  [data-motion="slide-up"].ts-motion-play {
    opacity: 1;
    transform: none;
    animation: none !important;
    transition-duration: 0.01ms !important;
    will-change: auto;
  }
}