/* Animations for THE FUTURE AI Website */

/* Base Animation Classes */
.animate {
    opacity: 0;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.animate.animated-slow {
    animation-duration: 1.5s;
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

/* Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    animation-name: fadeInUp;
}

/* Fade In Left Animation */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-50px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    animation-name: fadeInLeft;
}

/* Fade In Right Animation */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(50px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    animation-name: fadeInRight;
}

/* Grow Animation */
@keyframes grow {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.grow {
    animation-name: grow;
}

/* Hover Grow Effect */
.grow-hover {
    transition: transform 0.3s ease;
}

.grow-hover:hover {
    transform: scale(1.1);
}

/* Pulse Animation */
@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1);
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    animation-name: pulse;
    animation-iteration-count: infinite;
    animation-duration: 2s;
}

/* Shimmer Effect */
@keyframes shimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

.shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* Typing Effect */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.typing {
    overflow: hidden;
    white-space: nowrap;
    animation: typing 3.5s steps(40, end);
}

/* Floating Animation */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

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

/* Scroll-triggered Animations */
.animate[data-delay="200"] {
    animation-delay: 0.2s;
}

.animate[data-delay="300"] {
    animation-delay: 0.3s;
}

.animate[data-delay="400"] {
    animation-delay: 0.4s;
}

.animate[data-delay="500"] {
    animation-delay: 0.5s;
}

.animate[data-delay="600"] {
    animation-delay: 0.6s;
}

.animate[data-delay="700"] {
    animation-delay: 0.7s;
}

.animate[data-delay="800"] {
    animation-delay: 0.8s;
}

.animate[data-delay="900"] {
    animation-delay: 0.9s;
}

.animate[data-delay="1000"] {
    animation-delay: 1s;
}

.animate[data-delay="1100"] {
    animation-delay: 1.1s;
}

.animate[data-delay="1200"] {
    animation-delay: 1.2s;
}

.animate[data-delay="1300"] {
    animation-delay: 1.3s;
}

.animate[data-delay="1400"] {
    animation-delay: 1.4s;
}

.animate[data-delay="1500"] {
    animation-delay: 1.5s;
}