/* =========================================
   Motion and Transitions
   ========================================= */

/* -----------------------------------------
   Global Transitions
   ----------------------------------------- */
.fade-in {
  animation: fadeIn 0.25s ease-out both;
}

.slide-up {
  animation: slideUp 0.3s ease-out both;
}

/* -----------------------------------------
   Keyframes
   ----------------------------------------- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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