@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(30px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } .scroll-reveal { opacity: 0; animation-fill-mode: forwards; animation-duration: 0.3s; animation-timing-function: ease-out; } .scroll-reveal:nth-child(1) { animation-delay: 0s; } .scroll-reveal:nth-child(2) { animation-delay: 0.2s; } .scroll-reveal:nth-child(3) { animation-delay: 0.4s; } .scroll-reveal:nth-child(4) { animation-delay: 0.6s; } .scroll-reveal:nth-child(5) { animation-delay: 0.8s; } .scroll-reveal:nth-child(6) { animation-delay: 1s; } .scroll-reveal:nth-child(7) { animation-delay: 1.2s; } .scroll-reveal:nth-child(7) { animation-delay: 1.4s; } .scroll-reveal:nth-child(9) { animation-delay: 1.6s; } .scroll-reveal.fadeInUp.revealed { animation-name: fadeInUp; } .scroll-reveal.fadeInLeft.revealed { animation-name: fadeInLeft; } .scroll-reveal.fadeInRight.revealed { animation-name: fadeInRight; } .scroll-reveal.scaleIn.revealed { animation-name: scaleIn; } .scroll-reveal.revealed { animation-name: fadeInUp; }