@tailwind base;
@tailwind components;
@tailwind utilities;

html {
    scroll-behavior: smooth;
}

@layer utilities {
    @keyframes fade-up {
        0% {
            opacity: 0;
            transform: translateY(40px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-up {
        animation: fade-up 0.6s ease-out forwards;
    }

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

    .animate-zoom-in {
        opacity: 0;
        animation: zoom-in 0.6s ease-out forwards;
    }

    @keyframes slide-left {
        0% {
            opacity: 0;
            transform: translateX(60px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .animate-slide-left {
        opacity: 0;
        animation: slide-left 0.8s ease-out forwards;
    }
}

.gradient {
    background: linear-gradient(135deg, #10b981, #22c55e, #14b8a6);
    background-size: 300% 300%;
    animation: gradient-move 6s ease infinite;
}

.gradient-text {
    background: linear-gradient(135deg, #10b981, #22c55e, #14b8a6);
    background-size: 300% 300%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: gradient-move 6s ease infinite;
}

.gradient-text-dark {
    background: linear-gradient(135deg, #0d7553, #188741, #0e786c);
    background-size: 300% 300%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: gradient-move 6s ease infinite;
}

.gradient-text-black {
    background: linear-gradient(135deg, #25272b, #37383b, #101112);
    background-size: 300% 300%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: gradient-move 6s ease infinite;
}

@keyframes gradient-move {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}