.mu-blur-fade {
  --duration: 0.4s;
  --delay: 0s;
  --offset: 6px;
  --blur: 6px;
  --from: translateY(calc(var(--offset) * -1));
  opacity: 1;
  transform: none;
  filter: none;
  transition-property: opacity, transform, filter;
  transition-duration: var(--duration);
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
  transition-delay: calc(0.04s + var(--delay));
}

.mu-blur-fade[data-direction="up"] {
  --from: translateY(var(--offset));
}

.mu-blur-fade[data-direction="left"] {
  --from: translateX(var(--offset));
}

.mu-blur-fade[data-direction="right"] {
  --from: translateX(calc(var(--offset) * -1));
}

.mu-js .mu-blur-fade:not([data-visible]) {
  opacity: 0;
  transform: var(--from);
  filter: blur(var(--blur));
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .mu-blur-fade,
  .mu-js .mu-blur-fade:not([data-visible]) {
    transform: none;
    filter: none;
    transition-property: opacity;
  }
}