/* ==========================================
   FADE UP
========================================== */

.fade-up {

  opacity: 0;

  transform: translateY(20px);

  transition:
    opacity var(--duration-slow),
    transform var(--duration-slow);
}

.fade-up.visible {

  opacity: 1;

  transform: translateY(0);
}

/* ==========================================
   HOVER LIFT
========================================== */

.hover-lift {

  transition:
    transform var(--duration-normal)
    var(--ease-standard);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation: none !important;
    transition: none !important;

  }

}