.fade-in {
  animation: fadeIn 1s ease forwards !important;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-up {
  animation: slideUp 1s ease forwards !important;
}
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.slide-down {
  animation: slideDown 1s ease forwards !important;
}
@keyframes slideDown {
  from { transform: translateY(-40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.slide-left {
  animation: slideLeft 1s ease forwards !important;
}
@keyframes slideLeft {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.slide-right {
  animation: slideRight 1s ease forwards !important;
}
@keyframes slideRight {
  from { transform: translateX(-40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.zoom-in {
  animation: zoomIn 1s ease forwards !important;
}
@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.zoom-out {
  animation: zoomOut 1s ease forwards !important;
}
@keyframes zoomOut {
  from { transform: scale(1.2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.rotate-in {
  animation: rotateIn 1s ease forwards !important;
}
@keyframes rotateIn {
  from { transform: rotate(-30deg); opacity: 0; }
  to { transform: rotate(0); opacity: 1; }
}

.flip-in {
  animation: flipIn 1s ease forwards !important;
}
@keyframes flipIn {
  from { transform: rotateY(90deg); opacity: 0; }
  to { transform: rotateY(0); opacity: 1; }
}