:root {
  --mfm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --mfm-ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --mfm-ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mfm-duration-xs: 120ms;
  --mfm-duration-sm: 180ms;
  --mfm-duration-md: 260ms;
  --mfm-duration-lg: 420ms;
  --mfm-duration-xl: 700ms;
  --mfm-motion-distance-sm: 4px;
  --mfm-motion-distance-md: 10px;
  --mfm-motion-distance-lg: 18px;
}

@keyframes mfm-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, var(--mfm-motion-distance-lg), 0);
  }

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

@keyframes mfm-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mfm-slide-left {
  from {
    opacity: 0;
    transform: translate3d(var(--mfm-motion-distance-lg), 0, 0);
  }

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

@keyframes mfm-slide-right {
  from {
    opacity: 0;
    transform: translate3d(calc(var(--mfm-motion-distance-lg) * -1), 0, 0);
  }

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

@keyframes mfm-soft-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.72;
    transform: scale(1.08);
  }
}

@keyframes mfm-rotate-soft {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(8deg);
  }
}

@keyframes mfm-wave {
  0%,
  100% {
    transform: scaleY(0.38);
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes mfm-stroke-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes mfm-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

@keyframes mfm-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.mfm-animate-fade-up {
  animation: mfm-fade-up var(--mfm-duration-lg) var(--mfm-ease-emphasis) both;
}

.mfm-animate-scale-in {
  animation: mfm-scale-in var(--mfm-duration-md) var(--mfm-ease-emphasis) both;
}

.mfm-animate-slide-left {
  animation: mfm-slide-left var(--mfm-duration-lg) var(--mfm-ease-emphasis) both;
}

.mfm-animate-slide-right {
  animation: mfm-slide-right var(--mfm-duration-lg) var(--mfm-ease-emphasis) both;
}

.mfm-motion-safe {
  transform: translateZ(0);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}