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

@layer utilities {
    .text-gradient-custom {
        background: linear-gradient(to right, #2563eb, #38b6ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }
}

@keyframes slide-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-slide-scroll {
    animation: slide-scroll 10s linear infinite;
}

@keyframes slide-switch {

    0%,
    45% {
        transform: translateX(0);
    }

    55%,
    100% {
        transform: translateX(-50%);
    }
}

.animate-slide-switch {
    animation: slide-switch 6s ease-in-out infinite alternate;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

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

@keyframes slide-switch-3 {
    0%, 25% {
        transform: translateX(0);
    }
    35%, 60% {
        transform: translateX(-33.333%);
    }
    70%, 100% {
        transform: translateX(-66.666%);
    }
}

.animate-slide-switch-3 {
    animation: slide-switch-3 9s ease-in-out infinite alternate;
}