@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up-base {
  animation: fadeUp var(--anim-time) ease-out forwards;
}

.fade-up-base {
  animation: fadeUp var(--at-base) ease-out forwards;
}

.fade-up-x1 {
  animation: fadeUp var(--at-x1_5) ease-out forwards;
}

.fade-up-x2 {
  animation: fadeUp var(--at-x2) ease-out forwards;
}

.fade-up-x2_5 {
  animation: fadeUp var(--at-x2_5) ease-out forwards;
}

.fade-up-x3 {
  animation: fadeUp var(--at-x3) ease-out forwards;
}

.fade-up-x3_5 {
  animation: fadeUp var(--at-x3_5) ease-out forwards;
}

.fade-up-x4 {
  animation: fadeUp var(--at-x4) ease-out forwards;
}


@keyframes fadeZoom {
  from {
    opacity: 0;
    transform: scale(1.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.fade-zoom-base {
  animation: fadeZoom var(--at-base) ease-in-out forwards;
}

.fade-zoom-xl {
  animation: fadeZoom var(--at-x1_5) ease-in-out forwards;
}

.fade-zoom-x2 {
  animation: fadeZoom var(--at-x2) ease-in-out forwards;
}

.fade-zoom-x2_5 {
  animation: fadeZoom var(--at-x2_5) ease-in-out forwards;
}

.fade-zoom-x3 {
  animation: fadeZoom var(--at-x3) ease-in-out forwards;
}

.fade-zoom-x3_5 {
  animation: fadeZoom var(--at-x3_5) ease-in-out forwards;
}

.fade-zoom-x4 {
  animation: fadeZoom var(--at-x4) ease-in-out forwards;
}