




@keyframes fadeIn {
 from {
 opacity:0;
 transform:translateY(30px);
 }
 to {
 opacity:1;
 transform:translateY(0);
 }
}

@keyframes fadeInUp {
 from {
 opacity:0;
 transform:translateY(50px);
 }
 to {
 opacity:1;
 transform:translateY(0);
 }
}

@keyframes fadeInLeft {
 from {
 opacity:0;
 transform:translateX(-50px);
 }
 to {
 opacity:1;
 transform:translateX(0);
 }
}

@keyframes fadeInRight {
 from {
 opacity:0;
 transform:translateX(50px);
 }
 to {
 opacity:1;
 transform:translateX(0);
 }
}


@keyframes scaleIn {
 from {
 opacity:0;
 transform:scale(0.8);
 }
 to {
 opacity:1;
 transform:scale(1);
 }
}

@keyframes scaleInUp {
 from {
 opacity:0;
 transform:scale(0.8) translateY(30px);
 }
 to {
 opacity:1;
 transform:scale(1) translateY(0);
 }
}


@keyframes rotateIn {
 from {
 opacity:0;
 transform:rotate(-180deg) scale(0.3);
 }
 to {
 opacity:1;
 transform:rotate(0deg) scale(1);
 }
}



@keyframes gentle-float {
 0%, 100% {
 transform:translateY(0);
 }
 50% {
 transform:translateY(-15px);
 }
}

@keyframes float {
 0%, 100% {
 transform:translateY(0);
 }
 50% {
 transform:translateY(-15px);
 }
}



@keyframes hover-lift {
 0% {
 transform:translateY(0);
 box-shadow:0 5px 15px rgba(0, 0, 0, 0.1);
 }
 100% {
 transform:translateY(-5px);
 box-shadow:0 15px 30px rgba(0, 0, 0, 0.2);
 }
}

@keyframes hover-glow {
 0% {
 box-shadow:0 0 5px rgba(255, 255, 255, 0.1);
 }
 100% {
 box-shadow:0 0 20px rgba(255, 255, 255, 0.3);
 }
}




.animate-fade-in {
 animation:fadeIn 0.8s ease-out forwards;
}

.animate-fade-in-up {
 animation:fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-left {
 animation:fadeInLeft 0.8s ease-out forwards;
}

.animate-fade-in-right {
 animation:fadeInRight 0.8s ease-out forwards;
}


.animate-scale-in {
 animation:scaleIn 0.6s ease-out forwards;
}

.animate-scale-in-up {
 animation:scaleInUp 0.8s ease-out forwards;
}


.animate-rotate-in {
 animation:rotateIn 0.8s ease-out forwards;
}


.animate-float {
 animation:gentle-float 5s ease-in-out infinite;
}

.animate-float-delay-1 {
 animation:gentle-float 5s ease-in-out infinite;
 animation-delay:0.5s;
}

.animate-float-delay-2 {
 animation:gentle-float 5s ease-in-out infinite;
 animation-delay:1s;
}


.hover-lift {
 transition:all 0.3s ease;
}

.hover-lift:hover {
 animation:hover-lift 0.3s ease forwards;
}

.hover-glow {
 transition:all 0.3s ease;
}

.hover-glow:hover {
 animation:hover-glow 0.3s ease forwards;
}


.delay-100 { animation-delay:0.1s;}
.delay-200 { animation-delay:0.2s;}
.delay-300 { animation-delay:0.3s;}
.delay-400 { animation-delay:0.4s;}
.delay-500 { animation-delay:0.5s;}
.delay-600 { animation-delay:0.6s;}
.delay-700 { animation-delay:0.7s;}
.delay-800 { animation-delay:0.8s;}
.delay-900 { animation-delay:0.9s;}
.delay-1000 { animation-delay:1s;}


.animate-on-scroll {
 opacity:0;
 transform:translateY(30px);
 transition:all 0.8s ease;
}

.animate-on-scroll.animated {
 opacity:1;
 transform:translateY(0);
}


@media (max-width:768px) {
 .animate-fade-in,
 .animate-fade-in-up,
 .animate-fade-in-left,
 .animate-fade-in-right {
 animation-duration:0.6s;
 }
 
 .animate-scale-in,
 .animate-scale-in-up {
 animation-duration:0.5s;
 }
 
 .animate-float {
 animation-duration:4s;
 }
}

@media (max-width:480px) {
 .animate-fade-in,
 .animate-fade-in-up,
 .animate-fade-in-left,
 .animate-fade-in-right {
 animation-duration:0.5s;
 }
 
 .animate-scale-in,
 .animate-scale-in-up {
 animation-duration:0.4s;
 }
 
 .animate-float {
 animation-duration:3s;
 }
}


.animate-fade-in,
.animate-fade-in-up,
.animate-fade-in-left,
.animate-fade-in-right,
.animate-scale-in,
.animate-scale-in-up,
.animate-rotate-in,
.animate-float,
.hover-lift,
.hover-glow {
 will-change:transform, opacity;
}


@media (prefers-reduced-motion:reduce) {
 .animate-fade-in,
 .animate-fade-in-up,
 .animate-fade-in-left,
 .animate-fade-in-right,
 .animate-scale-in,
 .animate-scale-in-up,
 .animate-rotate-in,
 .animate-float,
 .hover-lift,
 .hover-glow {
 animation:none !important;
 transition:none !important;
 }
 
 .animate-on-scroll {
 opacity:1 !important;
 transform:none !important;
 }
} 