@keyframes hero-blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes hero-float {
    0%, 100% { transform: translateY(0) rotate(var(--tw-rotate)); }
    50% { transform: translateY(-20px) rotate(var(--tw-rotate)); }
}

@keyframes hero-gradient-x {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.animate-hero-gradient-x {
    background-size: 200% 200%;
    animation: hero-gradient-x 5s ease infinite;
}

@keyframes float-slow-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -50px) rotate(10deg); }
    66% { transform: translate(-20px, 20px) rotate(-5deg); }
}

@keyframes float-slow-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-40px, 30px) rotate(-15deg); }
    66% { transform: translate(20px, -40px) rotate(10deg); }
}

.animate-float-slow-1 { animation: float-slow-1 15s ease-in-out infinite; }
.animate-float-slow-2 { animation: float-slow-2 18s ease-in-out infinite; }
.animate-float-slow-3 { animation: float-slow-1 20s ease-in-out infinite reverse; }
.animate-float-slow-4 { animation: float-slow-2 22s ease-in-out infinite reverse; }
.animate-float-slow-5 { animation: float-slow-1 17s ease-in-out infinite 2s; }

@keyframes fly-up-right {
    0% { transform: translate(0, 0) rotate(0deg) scale(0.5); opacity: 0; }
    20% { opacity: 0.8; }
    80% { opacity: 0.8; }
    100% { transform: translate(150px, -150px) rotate(90deg) scale(1.5); opacity: 0; }
}

@keyframes fly-up-left {
    0% { transform: translate(0, 0) rotate(0deg) scale(0.5); opacity: 0; }
    20% { opacity: 0.8; }
    80% { opacity: 0.8; }
    100% { transform: translate(-150px, -150px) rotate(-90deg) scale(1.5); opacity: 0; }
}

@keyframes fly-across-right {
    0% { transform: translate(-50px, 0) rotate(-20deg) scale(0.5); opacity: 0; }
    20% { opacity: 0.8; }
    80% { opacity: 0.8; }
    100% { transform: translate(200px, -50px) rotate(45deg) scale(1.2); opacity: 0; }
}

@keyframes float-up {
    0% { transform: translateY(20px) scale(0.5); opacity: 0; }
    20% { opacity: 0.6; }
    80% { opacity: 0.6; }
    100% { transform: translateY(-150px) scale(1.2); opacity: 0; }
}

@keyframes spin-fly {
    0% { transform: translate(0, 0) rotate(0deg) scale(0.5); opacity: 0; }
    20% { opacity: 0.5; }
    80% { opacity: 0.5; }
    100% { transform: translate(100px, -200px) rotate(360deg) scale(1); opacity: 0; }
}

.group:hover .fly-1 { animation: fly-up-right 1.5s ease-out infinite; }
.group:hover .fly-2 { animation: fly-up-left 2s ease-out infinite 0.3s; }
.group:hover .fly-3 { animation: fly-across-right 1.8s ease-out infinite 0.1s; }
.group:hover .fly-4 { animation: float-up 2.2s ease-in-out infinite 0.4s; }
.group:hover .fly-5 { animation: spin-fly 2.5s linear infinite 0.2s; }

@keyframes network-pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes float-particle {
    0% { transform: translateY(0) translateX(0); }
    33% { transform: translateY(-20px) translateX(15px); }
    66% { transform: translateY(15px) translateX(-10px); }
    100% { transform: translateY(0) translateX(0); }
}

@keyframes grid-move {
    0% { transform: translateY(0); }
    100% { transform: translateY(40px); }
}

.bg-grid-animated {
    background-image: linear-gradient(rgba(99, 102, 241, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: grid-move 3s linear infinite;
}

.domain-flyup-grid .fly-1,
.domain-flyup-grid .fly-2,
.domain-flyup-grid .fly-3,
.domain-flyup-grid .fly-4,
.domain-flyup-grid .fly-5 {
    opacity: 0;
    animation-play-state: paused;
    transition: opacity 0.5s ease;
}

.domain-flyup-grid .fly-1 { animation: flyUp 4s ease-in-out infinite alternate; }
.domain-flyup-grid .fly-2 { animation: flyUp 5s ease-in-out infinite alternate-reverse; }
.domain-flyup-grid .fly-3 { animation: flyUp 3s ease-in-out infinite alternate; }
.domain-flyup-grid .fly-4 { animation: flyUp 6s ease-in-out infinite alternate-reverse; }
.domain-flyup-grid .fly-5 { animation: flyUp 4.5s ease-in-out infinite alternate; }

.domain-flyup-grid .group:hover .fly-1,
.domain-flyup-grid .group:hover .fly-2,
.domain-flyup-grid .group:hover .fly-3,
.domain-flyup-grid .group:hover .fly-4,
.domain-flyup-grid .group:hover .fly-5 {
    opacity: 1;
    animation-play-state: running;
}

@keyframes flyUp {
    0% { transform: translateY(20px) rotate(0deg) scale(0.9); }
    100% { transform: translateY(-30px) rotate(15deg) scale(1.1); }
}