/* ANIMATIONS CSS */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.8s ease-out; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-up { animation: fadeUp 0.8s ease-out; }
.delay-1 { animation-delay: 0.2s; opacity: 0; animation-fill-mode: forwards; }
.delay-2 { animation-delay: 0.4s; opacity: 0; animation-fill-mode: forwards; }
.delay-3 { animation-delay: 0.6s; opacity: 0; animation-fill-mode: forwards; }
.delay-4 { animation-delay: 0.8s; opacity: 0; animation-fill-mode: forwards; }

.fade-in-view { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in-view.visible { opacity: 1; transform: translateY(0); }

@keyframes slideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
.slide-in-left { animation: slideInLeft 0.8s ease-out; }

@keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
.slide-in-right { animation: slideInRight 0.8s ease-out; }

@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.scale-in { animation: scaleIn 0.6s ease-out; }

html { scroll-behavior: smooth; }
body { animation: fadeIn 0.5s ease-out; }