.page-enter {
  animation: page-fade-in 170ms ease-out;
}

.page-enter-stagger > * {
  opacity: 0;
  transform: translateY(5px);
  animation: item-rise 170ms ease-out forwards;
}

.page-enter-stagger > *:nth-child(1) { animation-delay: 14ms; }
.page-enter-stagger > *:nth-child(2) { animation-delay: 28ms; }
.page-enter-stagger > *:nth-child(3) { animation-delay: 42ms; }
.page-enter-stagger > *:nth-child(4) { animation-delay: 56ms; }
.page-enter-stagger > *:nth-child(5) { animation-delay: 70ms; }

.site-header-row,
.btn,
.nav-item,
.nav-logout,
.mobile-bottom-item,
.mobile-sheet-link,
.pagination a,
.segment-option,
.card,
.stat-card {
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    box-shadow 150ms ease,
    opacity 140ms ease;
}

.btn:hover,
.nav-item:hover,
.nav-logout:hover,
.pagination a:hover,
.site-header-row:hover,
.card:hover,
.stat-card:hover {
  box-shadow: 0 4px 12px rgba(25, 17, 26, 0.07);
}

.modal-overlay {
  transition: opacity 160ms ease;
}

.modal {
  transform: translateY(8px);
  transition: transform 170ms ease;
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes item-rise {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}