/* Animation Keyframes */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) rotate(45deg);
    }
    40% {
        transform: translateY(-10px) rotate(45deg);
    }
    60% {
        transform: translateY(-5px) rotate(45deg);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Hero entrance animations - Enhanced */
@keyframes heroTitleEntrance {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.9);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroSubtitleEntrance {
    0% {
        opacity: 0;
        transform: translateY(40px);
        filter: blur(3px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes heroCTAEntrance {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroImageEntrance {
    0% {
        opacity: 0;
        transform: translateX(80px) scale(0.8) rotateY(10deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotateY(0deg);
    }
}

@keyframes blobContainerEntrance {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scrollIndicatorEntrance {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Blob animations */
@keyframes blob-move-1 {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(50px, 20px) scale(1.05);
    }
    100% {
        transform: translate(10px, 40px) scale(0.95);
    }
}

@keyframes blob-move-2 {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-30px, -20px) scale(1.1);
    }
    100% {
        transform: translate(-15px, -40px) scale(0.9);
    }
}

@keyframes blob-move-3 {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(20px, -30px) scale(1.05);
    }
    100% {
        transform: translate(40px, 0) scale(0.95);
    }
}

@keyframes blob-move-4 {
    0% {
        transform: translateX(-50%) scale(1);
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    33% {
        transform: translateX(-50%) translateY(15px) scale(1.05);
        border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
    }
    66% {
        transform: translateX(-50%) translateY(30px) scale(1.1);
        border-radius: 30% 70% 70% 30% / 70% 30% 70% 30%;
    }
    100% {
        transform: translateX(-50%) translateY(-20px) scale(0.95);
        border-radius: 70% 30% 30% 70% / 30% 60% 40% 70%;
    }
}

@keyframes blob-morph-1 {
    0% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    }
    25% {
        border-radius: 45% 55% 65% 35% / 40% 50% 50% 60%;
    }
    50% {
        border-radius: 50% 50% 55% 45% / 45% 55% 45% 55%;
    }
    75% {
        border-radius: 55% 45% 45% 55% / 50% 40% 60% 40%;
    }
    100% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    }
}

@keyframes blob-morph-2 {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    25% {
        border-radius: 55% 45% 35% 65% / 50% 45% 55% 50%;
    }
    50% {
        border-radius: 40% 60% 60% 40% / 40% 60% 40% 60%;
    }
    75% {
        border-radius: 50% 50% 40% 60% / 55% 40% 60% 45%;
    }
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

@keyframes blob-float-1 {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes blob-float-2 {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(15px) rotate(-3deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes blob-morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    100% {
        border-radius: 50% 60% 30% 40% / 40% 50% 60% 50%;
    }
}