:root {
  --anim-duration-fast: 180ms;
  --anim-duration-base: 250ms;
  --anim-duration-slow: 350ms;
  --anim-duration-slower: 500ms;
  --ease-out: ease-out;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-tab: ease-in-out;
}
@keyframes fadeUp { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform: translateY(0); } }
.fade-up { animation: fadeUp var(--anim-duration-base) var(--ease-out) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn var(--anim-duration-base) var(--ease-out) both; }
@keyframes modalIn { from { opacity:0; transform: scale(0.88) translateY(-20px); } to { opacity:1; transform: scale(1) translateY(0); } }
.modal-in { animation: modalIn var(--anim-duration-slow) var(--ease-out) both; }
@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }
.overlay-in { animation: overlayIn var(--anim-duration-base) var(--ease-out) both; }
.card-lift { transition: transform var(--anim-duration-base) var(--ease-bounce), box-shadow var(--anim-duration-base) var(--ease-out); }
.card-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 120ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; }
}