/* assets/css/animations.css */
@keyframes anim1 { from { opacity: 0; } to { opacity: 1; } }
@keyframes anim2 { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes anim3 { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes anim4 { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes anim5 { from { transform: rotate(-10deg) scale(0.9); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
@keyframes anim6 { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes anim7 { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes anim8 { from { transform: skewX(-20deg); opacity: 0; } to { transform: skewX(0); opacity: 1; } }
@keyframes anim9 { from { filter: blur(10px); opacity: 0; } to { filter: blur(0); opacity: 1; } }
@keyframes anim10 { from { transform: rotateY(90deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
@keyframes anim11 { from { transform: rotateX(90deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }
@keyframes anim12 { from { transform: scale(1.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes anim13 { 0% { transform: translateY(-100vh); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes anim14 { 0% { letter-spacing: -10px; opacity: 0; } 100% { letter-spacing: normal; opacity: 1; } }
@keyframes anim15 { from { transform: perspective(400px) rotate3d(1, 0, 0, 45deg); opacity: 0; } to { transform: perspective(400px) rotate3d(1, 0, 0, 0); opacity: 1; } }
@keyframes anim16 { from { transform: translate3d(0, -200px, 0); opacity: 0; } to { transform: translate3d(0, 0, 0); opacity: 1; } }
@keyframes anim17 { from { transform: scale3d(0.3, 0.3, 0.3); opacity: 0; } to { transform: scale3d(1, 1, 1); opacity: 1; } }
@keyframes anim18 { from { transform: rotate(360deg) scale(0); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
@keyframes anim19 { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(100% at 50% 50%); } }
@keyframes anim20 { from { transform: skew(30deg, -20deg); opacity: 0; } to { transform: skew(0, 0); opacity: 1; } }

.banner-anim-1 { animation: anim1 1s ease; }
.banner-anim-2 { animation: anim2 1s ease; }
.banner-anim-3 { animation: anim3 1s ease; }
.banner-anim-4 { animation: anim4 1s ease; }
.banner-anim-5 { animation: anim5 1s ease; }
.banner-anim-6 { animation: anim6 1s ease; }
.banner-anim-7 { animation: anim7 1s ease; }
.banner-anim-8 { animation: anim8 1s ease; }
.banner-anim-9 { animation: anim9 1s ease; }
.banner-anim-10 { animation: anim10 1s ease; }
.banner-anim-11 { animation: anim11 1s ease; }
.banner-anim-12 { animation: anim12 1s ease; }
.banner-anim-13 { animation: anim13 1s ease; }
.banner-anim-14 { animation: anim14 1s ease; }
.banner-anim-15 { animation: anim15 1s ease; }
.banner-anim-16 { animation: anim16 1s ease; }
.banner-anim-17 { animation: anim17 1s ease; }
.banner-anim-18 { animation: anim18 1s ease; }
.banner-anim-19 { animation: anim19 1.2s ease; }
.banner-anim-20 { animation: anim20 1s ease; }