.fade-in {
  animation: fadeIn var(--transition) ease forwards;
}

.slide-up {
  animation: slideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide-in-right {
  animation: slideInRight 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

@keyframes sidebarItemIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

.sidebar-intro .sidebar-brand,
.sidebar-intro .sidebar-user,
.sidebar-intro .sidebar-nav > .nav-item,
.sidebar-intro .sidebar-footer {
  opacity: 0;
  animation: sidebarItemIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.page-enter-pending {
  opacity: 0;
  pointer-events: none;
}

.page-enter {
  animation: pageEnter 0.3s ease forwards;
}

.page-enter-done {
  opacity: 1;
  transform: none;
}

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

.card-stagger > * {
  animation: slideUp 0.35s ease forwards;
  opacity: 0;
}

.card-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.card-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.card-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.card-stagger > *:nth-child(4) { animation-delay: 0.2s; }
.card-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.card-stagger > *:nth-child(6) { animation-delay: 0.3s; }