:root { 
    --main-color: #22d3ee;
    --dim-color: rgba(0, 255, 255, 0.5);
    --bg-black: #000;
}

.dynamic-color { 
    color: var(--main-color) !important; 
}

html { 
    scroll-behavior: smooth; 
}

body { 
    direction: inherit;
    background: var(--bg-black); 
    color: var(--main-color); 
    font-family: 'Fira Code', monospace; 
    margin: 0; 
    overflow-x: hidden;
}

* {
    -webkit-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
}

#terminal-out, #term-input {
    -webkit-user-select: text;
    user-select: text;
}

.scanlines::before {
    content: ""; 
    position: fixed; 
    inset: 0;
    background: repeating-linear-gradient(
        0deg, 
        rgba(0,0,0,0.1) 0px, 
        rgba(0,0,0,0.1) 1px, 
        transparent 2px
    );
    pointer-events: none; 
    z-index: 1000;
}

.glow-text { 
    text-shadow: 0 0 10px var(--main-color), 0 0 20px rgba(0, 255, 255, 0.2); 
}

#cursor-glow {
    position: fixed; 
    width: 400px; 
    height: 400px;
    background: radial-gradient(circle, rgba(0,255,255,0.03) 0%, transparent 70%);
    pointer-events: none; 
    transform: translate(-50%, -50%); 
    z-index: 999;
}

.fade-element { 
    opacity: 0; 
    transform: translateY(15px); 
    transition: 0.8s cubic-bezier(0.22, 1, 0.36, 1); 
}

.fade-element.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

#preloader {
    position: fixed; 
    inset: 0; 
    background: #000; 
    z-index: 9999;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    transition: opacity 1s ease, visibility 1s;
}

.loader-content { 
    width: 300px; 
    text-align: left; 
}

.loader-bar-container { 
    width: 100%; 
    height: 2px; 
    background: rgba(0, 255, 255, 0.1); 
    margin-top: 10px; 
    position: relative; 
    overflow: hidden;
}

.loader-bar-fill { 
    width: 0%; 
    height: 100%; 
    background: var(--main-color); 
    box-shadow: 0 0 15px var(--main-color); 
    transition: width 0.2s;
}

.loader-text { 
    font-size: 10px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

.glitch-load { 
    animation: loader-glitch 1s infinite; 
}

@keyframes loader-glitch {
    0% { opacity: 1; transform: translateX(0); }
    20% { opacity: 0.8; transform: translateX(-2px); }
    40% { opacity: 1; transform: translateX(2px); }
    100% { opacity: 1; transform: translateX(0); }
}