/* Image Fade In/Out/Slide Animations */
.fade-in { animation: fadeIn 0.6s; }
.fade-out { animation: fadeOut 0.6s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

.slide-in-left { animation: slideInLeft 0.3s forwards; }
.slide-out-left { animation: slideOutLeft 0.3s forwards; }
.slide-in-right { animation: slideInRight 0.3s forwards; }
.slide-out-right { animation: slideOutRight 0.3s forwards; }
@keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOutLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }