@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
} @keyframes pulse-soft {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
} @keyframes rotate-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} @keyframes bounce-subtle {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
} @keyframes wave {
0%,
100% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(5px) translateY(-5px);
}
75% {
transform: translateX(-5px) translateY(5px);
}
} @keyframes glow {
0%,
100% {
box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}
50% {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.6);
}
} @keyframes slide-right {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(10px);
}
} @keyframes fade-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
} @keyframes scale-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
} @keyframes wiggle {
0%,
100% {
transform: rotate(0deg);
}
25% {
transform: rotate(2deg);
}
75% {
transform: rotate(-2deg);
}
} @keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
} @keyframes gradient-shift {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
} .animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-slow {
animation: float 8s ease-in-out infinite;
}
.animate-pulse-soft {
animation: pulse-soft 4s ease-in-out infinite;
}
.animate-rotate-slow {
animation: rotate-slow 20s linear infinite;
}
.animate-bounce-subtle {
animation: bounce-subtle 3s ease-in-out infinite;
}
.animate-wave {
animation: wave 5s ease-in-out infinite;
}
.animate-glow {
animation: glow 3s ease-in-out infinite;
}
.animate-slide-right {
animation: slide-right 4s ease-in-out infinite;
}
.animate-fade-pulse {
animation: fade-pulse 3s ease-in-out infinite;
}
.animate-scale-pulse {
animation: scale-pulse 2s ease-in-out infinite;
}
.animate-wiggle {
animation: wiggle 2s ease-in-out infinite;
} .animate-delay-1 {
animation-delay: 0.5s;
}
.animate-delay-2 {
animation-delay: 1s;
}
.animate-delay-3 {
animation-delay: 1.5s;
}
.animate-delay-4 {
animation-delay: 2s;
} .floating-particles {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.particle {
position: absolute;
background: rgba(59, 130, 246, 0.3);
border-radius: 50%;
animation: particle-float 15s infinite ease-in-out;
}
@keyframes particle-float {
0%,
100% {
transform: translateY(0) translateX(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) translateX(50px);
opacity: 0;
}
} .animated-gradient {
background: linear-gradient(270deg, #3b82f6, #8b5cf6, #ec4899);
background-size: 600% 600%;
animation: gradient-shift 15s ease infinite;
} .shimmer-effect {
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%);
background-size: 200% 100%;
animation: shimmer 3s infinite;
}