/* --- 1. GLOBAL TYPOGRAPHY & BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@300;500;700&display=swap');

body { 
    font-family: 'Space Grotesk', sans-serif; 
    background-color: #050505;
    color: #e5e5e5;
}

.mono { 
    font-family: 'JetBrains Mono', monospace; 
}

/* Subdued dot-matrix background */
.dot-bg {
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Custom text selection color */
::selection { 
    background: #ef4444; 
    color: white; 
}

/* --- 2. CUSTOM CYBER CURSOR --- */
body, a, button, select, input, textarea { 
    cursor: none !important; 
}

#cyber-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background-color: #ef4444; 
    pointer-events: none;
    z-index: 9999;
    /* translate3d forces GPU acceleration to eliminate lag */
    transform: translate3d(-50%, -50%, 0);
    transition: width 0.15s ease-out, height 0.15s ease-out, border-radius 0.15s ease-out, background-color 0.15s ease-out, border 0.15s ease-out;
}

/* State when hovering over clickable elements */
#cyber-cursor.hover-state {
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 2px solid #ef4444;
    border-radius: 50%;
}

/* --- 3. CUSTOM SCROLLBARS --- */
/* Main window scrollbar */
::-webkit-scrollbar { 
    width: 8px; 
}
::-webkit-scrollbar-track { 
    background: #050505; 
}
::-webkit-scrollbar-thumb { 
    background: #27272a; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #ef4444; 
}

/* Project Modal scrollbar */
.custom-scrollbar::-webkit-scrollbar { 
    width: 6px; 
}
.custom-scrollbar::-webkit-scrollbar-track { 
    background: transparent; 
}
.custom-scrollbar::-webkit-scrollbar-thumb { 
    background: #27272a; 
    border-radius: 10px; 
}