@keyframes fade-in-down {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes bounce-in {
  0% { transform: scale(0.9); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.animate-fade-in-down { animation: fade-in-down 1s ease-out; }
.animate-fade-in-up { animation: fade-in-up 1s ease-out 0.5s both; }
.animate-bounce-in { animation: bounce-in 1s ease-out 1s both; }@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slide-in-left {
  from { transform: translateX(-50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slide-in-up {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slide-in-right {
  from { transform: translateX(50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.animate-fade-in { animation: fade-in 1s ease-out; }
.animate-slide-in-left { animation: slide-in-left 1s ease-out; }
.animate-slide-in-up { animation: slide-in-up 1s ease-out; }
.animate-slide-in-right { animation: slide-in-right 1s ease-out; }
.animate-on-scroll { opacity: 0; transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.animate-on-scroll.animate-visible { opacity: 1; transform: translateY(0) translateX(0); }.animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.animate-on-scroll.animate-visible { opacity: 1; transform: translateY(0); }.animate-on-scroll { opacity: 0; transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.animate-on-scroll.animate-visible { opacity: 1; transform: translateY(0) translateX(0); }