@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(1.05);
    }

    to {
        transform: scale(1);
    }
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes textFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes inputFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes buttonFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 1s ease forwards;
}

.animate-zoomIn {
    animation: zoomIn 1s ease forwards;
}

.animate-cardFadeIn {
    animation: cardFadeIn 0.8s ease forwards;
}

.animate-textFadeIn {
    animation: textFadeIn 0.8s ease forwards;
}

.animate-inputFadeIn {
    animation: inputFadeIn 0.8s ease forwards;
}

.animate-buttonFadeIn {
    animation: buttonFadeIn 0.8s ease forwards;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}


@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 1.5s ease-out forwards;
}



@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-slide-up {
    animation: fadeSlideUp 1s ease-out forwards;
}

/* Typography stagger animation */
@keyframes fadeSlideUpStagger {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.typo-anim {
    opacity: 0;
    display: inline-block;
    animation: fadeSlideUpStagger 0.8s ease-out forwards;
}

/* Scale pop for button */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.pop-in {
    animation: popIn 0.8s ease-out forwards;
    animation-delay: 1.4s; /* after titles animate */
}

/* Slide in feature card */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px) rotate(-10deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

.slide-in-left {
    animation: slideInLeft 1s ease-out forwards;
}