@keyframes mlife-fade-up {
  from { opacity: 0; transform: translateY(var(--anim-distance, 100px)); }
  to { opacity: 1; transform: none; }
}

@keyframes mlife-fade-down {
  from { opacity: 0; transform: translateY(calc(var(--anim-distance, 100px) * -1)); }
  to { opacity: 1; transform: none; }
}

@keyframes mlife-rise-back {
  from { opacity: 0; transform: translateY(var(--anim-distance, 100px)); }
  to { opacity: 1; transform: none; }
}

@keyframes mlife-slide-left {
  from { opacity: 0; transform: translateX(var(--anim-distance, 100px)); }
  to { opacity: 1; transform: none; }
}

@keyframes mlife-slide-right {
  from { opacity: 0; transform: translateX(calc(var(--anim-distance, 100px) * -1)); }
  to { opacity: 1; transform: none; }
}

[data-animate] { --delay: calc(var(--i, 0) * 100ms); }
[data-animate="fade-up"] { --anim: mlife-fade-up; }
[data-animate="fade-down"] { --anim: mlife-fade-down; --ease: cubic-bezier(0.34, 1.56, 0.64, 1); }
[data-animate="rise-back"] { --anim: mlife-rise-back; --ease: cubic-bezier(0.34, 1.56, 0.64, 1); }
[data-animate="slide-left"] { --anim: mlife-slide-left; }
[data-animate="slide-right"] { --anim: mlife-slide-right; }
.anim-ready [data-animate]:not(.is-in) { opacity: 0; }
.anim-ready [data-animate].is-in {
  animation: var(--anim) var(--duration, 1s) var(--ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)) var(--delay, 0s) both;
}
@media (max-width: 760px) {
  [data-animate] { --anim-distance: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .anim-ready [data-animate], .anim-ready [data-animate]:not(.is-in) { opacity: 1; animation: none; transform: none; }
}