/* =========================================
   ANIMATIONS.CSS
   All keyframe animations for Mama AI website
   ========================================= */

/* Gradient Animation for Text */
@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.animated-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 15s ease infinite;
}

/* Slide Up Animation */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger-animation {
    animation: slideUp 0.6s ease-out forwards;
}

/* Floating Effect for Hero Images */
@keyframes floating {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.float-animation {
    animation: floating 3s ease-in-out infinite;
}

/* Pulse Glow Effect */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(236, 72, 153, 0.6);
    }
}

.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Text Reveal Animation */
@keyframes text-reveal {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.text-reveal {
    animation: text-reveal 0.8s ease-out forwards;
}

/* Heart Float Animations - Multiple Variations */
@keyframes float-up-1 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(30px, -25vh) rotate(5deg) scale(1.1);
    }
    50% {
        transform: translate(-20px, -50vh) rotate(-5deg) scale(0.9);
    }
    75% {
        transform: translate(20px, -75vh) rotate(3deg) scale(1.05);
    }
    100% {
        transform: translate(0, -100vh) rotate(0deg) scale(1);
    }
}

@keyframes float-up-2 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(-40px, -25vh) rotate(-5deg) scale(0.95);
    }
    50% {
        transform: translate(30px, -50vh) rotate(5deg) scale(1.1);
    }
    75% {
        transform: translate(-10px, -75vh) rotate(-3deg) scale(1);
    }
    100% {
        transform: translate(0, -100vh) rotate(0deg) scale(1);
    }
}

@keyframes float-up-3 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    33% {
        transform: translate(20px, -33vh) rotate(-8deg) scale(1.05);
    }
    66% {
        transform: translate(-30px, -66vh) rotate(8deg) scale(0.95);
    }
    100% {
        transform: translate(0, -100vh) rotate(0deg) scale(1);
    }
}

/* Hearts that float toward the big heart - curved path from right */
@keyframes float-to-heart {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0.8);
        opacity: 0.1;
    }
    30% {
        transform: translate(-200px, -30vh) rotate(-15deg) scale(1);
        opacity: 0.2;
    }
    60% {
       transform: translate(-350px, -55vh) rotate(10deg) scale(1.1);
        opacity: 0.15;
    }
    80% {
        transform: translate(-420px, -75vh) rotate(-5deg) scale(0.9);
        opacity: 0.1;
    }
    100% {
        transform: translate(-450px, -100vh) rotate(0deg) scale(0.7);
        opacity: 0.05;
    }
}

@keyframes float-diagonal {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0.15;
    }
    50% {
        transform: translate(-100px, -50vh) rotate(-10deg) scale(1.2);
        opacity: 0.25;
    }
    100% {
        transform: translate(-200px, -100vh) rotate(-20deg) scale(0.8);
        opacity: 0.1;
    }
}

/* Pulse Heart Animation */
@keyframes pulse-heart {
    0%, 100% {
        transform: scale(1);
        opacity: 0.18;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.25;
    }
}

/* Fade In Down for Mobile Menu */
@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out;
}

/* Blob Movement for Background */
@keyframes blob-movement {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.blob {
    position: absolute;
    opacity: 0.4;
    animation: blob-movement 20s ease-in-out infinite;
}