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

/* Custom Utilities */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #050505;
}

/* Animations */
@keyframes gradient-x {
    0%, 100% {
        background-size: 200% 200%;
        background-position: left center;
    }
    50% {
        background-size: 200% 200%;
        background-position: right center;
    }
}

.animate-gradient-x {
    animation: gradient-x 3s ease infinite;
}

/* Typewriter cursor */
.cursor {
    display: inline-block;
    width: 8px;
    height: 15px;
    background-color: #00f0ff;
    animation: blink 1s step-end infinite;
    vertical-align: middle;
    margin-left: 2px;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

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

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

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

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

/* Glitch effect on hover for links */
.glitch-hover:hover {
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

@keyframes glitch-skew {
    0% { transform: skew(0deg); }
    20% { transform: skew(-2deg); }
    40% { transform: skew(2deg); }
    60% { transform: skew(-1deg); }
    80% { transform: skew(1deg); }
    100% { transform: skew(0deg); }
}