:root {
    --bg-color: #0b0d17;
    --text-color: #e0e0e0;
    --accent-cyan: #00f2ff;
    --accent-orange: #ff8c00;
    --accent-green: #33ff00;
    --muted-grey: #4a4d5e;
    --border-glow: 0 0 10px rgba(0, 242, 255, 0.5);
    --font-main: 'Courier New', Courier, monospace;
}

* {
    box-sizing: border-box;
    cursor: crosshair;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Scanline Effect */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.25) 50%
    ), linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.06),
        rgba(0, 255, 0, 0.02),
        rgba(0, 0, 255, 0.06)
    );
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    z-index: 9999;
}

/* Starfield Background */
#starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    overflow: hidden;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.5;
    animation: twinkle var(--duration) infinite;
}

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

/* Technical Borders */
.tech-border {
    border: 1px solid var(--accent-cyan);
    box-shadow: var(--border-glow);
    padding: 20px;
    position: relative;
    background: rgba(0, 242, 255, 0.05);
}

.tech-border::before, .tech-border::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid var(--accent-orange);
}

.tech-border::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.tech-border::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

/* Scroll Animation Classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.glitch-text:hover {
    animation: glitch 0.3s cubic-bezier(.25,.46,.45,.94) both infinite;
}

@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}