/* Custom Scrollbar to match Terminal Theme */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #00ff41;
}

/* Base resets handled by Tailwind (cdn) */

/* Custom Animations */
/* Typewriter h1 animation handled by JS for better responsiveness */

/* Glitch effect on hover for cards are handled by Tailwind classes */

/* Neon Glow Utilities not adaptable by Tailwind default config */
.text-shadow-neon {
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.7);
}

/* 3D Flip Animation Utilities */
.perspective-1000 {
    perspective: 1000px;
}

.transform-style-3d {
    transform-style: preserve-3d;
}

.rotate-y-180 {
    transform: rotateY(180deg);
}

.backface-hidden {
    backface-visibility: hidden;
}

/* Backface visibility tweak if needed, though we just swap content mid-flip */

/* Car Animation - One-shot drive */
@keyframes drive {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(450%);
        opacity: 0;
    }
}


.driving {
    animation: drive 0.6s linear forwards;
    opacity: 1 !important;
    left: -40px;
    /* Start slightly off screen */
}

/* Global Wind Effect */
@keyframes wind-rush {
    0% {
        transform: translateX(0) skewX(0);
        filter: blur(0);
    }

    25% {
        transform: translateX(-5px) skewX(-2deg);
        filter: blur(1px);
    }

    50% {
        transform: translateX(5px) skewX(2deg);
        filter: blur(2px);
    }

    75% {
        transform: translateX(-3px) skewX(-1deg);
        filter: blur(1px);
    }

    100% {
        transform: translateX(0) skewX(0);
        filter: blur(0);
    }
}

.wind-rush {
    animation: wind-rush 0.6s ease-out;
    overflow-x: hidden;
    /* Prevent scrollbar flickering during shake */
}

/* Dust/Storm Animation */
@keyframes blow-dust {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(120vw);
        opacity: 0;
    }
}

.storm-particle {
    position: absolute;
    animation: blow-dust linear forwards;
}