.anim {
  opacity: 0;
  transition: opacity var(--anim-duration-medium, 0.6s) var(--anim-easing-inout, cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--anim-duration-medium, 0.6s) var(--anim-easing-inout, cubic-bezier(0.4, 0, 0.2, 1));
}

.anim-ready {
  opacity: 1;
}

.anim-fade-in.anim-ready {
  opacity: 1;
}

.anim-fade-up {
  transform: translateY(20px);
}
.anim-fade-up.anim-ready {
  transform: translateY(0);
}

.anim-fade-down {
  transform: translateY(-20px);
}
.anim-fade-down.anim-ready {
  transform: translateY(0);
}

.anim-zoom-in {
  transform: scale(0.96);
}
.anim-zoom-in.anim-ready {
  transform: scale(1);
}

.anim-zoom-out {
  transform: scale(1.04);
}
.anim-zoom-out.anim-ready {
  transform: scale(1);
}

.anim-slide-left {
  transform: translateX(30px);
}
.anim-slide-left.anim-ready {
  transform: translateX(0);
}

.anim-slide-right {
  transform: translateX(-30px);
}
.anim-slide-right.anim-ready {
  transform: translateX(0);
}

.anim-tilt {
  transform: rotate(-1.5deg) scale(0.98);
}
.anim-tilt.anim-ready {
  transform: rotate(0deg) scale(1);
}