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

/* Custom Animations */
@keyframes slide-in-left {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in-up {
    0% {
        transform: translateY(20px) skewX(-12deg);
        opacity: 0;
    }
    100% {
        transform: translateY(0) skewX(-12deg);
        opacity: 1;
    }
}

.animate-slide-in-left {
    animation: slide-in-left 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Scroll Animation Classes */
.scroll-animate {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Selection Color Override */
::selection {
    background-color: black;
    color: #2DD4BF;
}