.fade-in { animation: fadeIn .7s ease both; }
.slide-up { animation: slideUp .8s ease both; }
.slide-left { animation: slideLeft .8s ease both; }
.slide-right { animation: slideRight .8s ease both; }
.zoom { animation: zoomIn .8s ease both; }
.scale-hover:hover { transform: scale(1.02); }
.hover-lift:hover { transform: translateY(-6px); }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}