:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-page: 0.4s;
  --duration-content: 0.32s;
  --duration-stagger: 0.45s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-page: 0.01ms;
    --duration-content: 0.01ms;
    --duration-stagger: 0.01ms;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

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

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

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulseSoft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

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

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.page-transition {
  animation: pageEnter var(--duration-page) var(--ease-out) both;
}

.fade-content {
  animation: fadeInUp var(--duration-content) var(--ease-out) both;
}

.fade-content.is-loading {
  animation: fadeInUp 0.35s var(--ease-out) both;
}

.fade-content.is-loaded {
  animation: contentReveal 0.45s var(--ease-out) both;
}

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

.stagger-grid {
  display: grid;
}

.stagger-item {
  animation: staggerIn var(--duration-stagger) var(--ease-out) both;
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    #e8ecf4 45%,
    var(--surface-2) 90%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
}

.section-reveal {
  animation: fadeInUp 0.5s var(--ease-out) both;
}

.hero-reveal {
  animation: fadeInUp 0.6s var(--ease-out) both;
}

.hero-reveal-delay {
  animation: fadeInUp 0.6s var(--ease-out) 0.12s both;
}

.detail-reveal {
  animation: scaleIn 0.45s var(--ease-out) both;
}

.cat-pill {
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.cat-pill:active {
  transform: scale(0.97);
}

.nav-link {
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}

.nav-link.active {
  box-shadow: inset 0 -2px 0 var(--primary);
}

.user-dropdown {
  animation: dropdownIn 0.22s var(--ease-out) both;
  transform-origin: top right;
}

.listing-card {
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}

.listing-card-fav {
  transition: transform 0.2s var(--ease-out), background 0.2s;
}

.listing-card-fav:active {
  transform: scale(1.15);
}

.empty-state {
  animation: fadeInUp 0.45s var(--ease-out) both;
}