:root {
    --background: 220 20% 7%;
    --foreground: 210 20% 90%;
    --card: 220 18% 10%;
    --card-foreground: 210 20% 90%;
    --primary: 160 100% 45%;
    --primary-foreground: 220 20% 7%;
    --secondary: 220 15% 16%;
    --secondary-foreground: 210 20% 90%;
    --muted: 220 15% 16%;
    --muted-foreground: 215 15% 55%;
    --accent: 200 100% 55%;
    --accent-foreground: 220 20% 7%;
    --border: 220 15% 18%;
    --input: 220 15% 18%;
    --ring: 160 100% 45%;
    --radius: 0.5rem;
    --terminal: 160 100% 45%;
    --glow: 160 100% 45%;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
}

.text-glow {
    text-shadow: 0 0 20px hsl(var(--terminal) / 0.5), 0 0 40px hsl(var(--terminal) / 0.2);
}

.border-glow {
    box-shadow: 0 0 15px hsl(var(--terminal) / 0.15), inset 0 0 15px hsl(var(--terminal) / 0.05);
}

.bg-grid {
    background-image:
        linear-gradient(hsl(var(--border) / 0.5) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--border) / 0.5) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Scroll animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Timeline dot animation */
.timeline-item {
    opacity: 0;
    transform: translateX(-1.25rem);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.timeline-item.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Blink cursor */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.animate-blink {
    animation: blink 1s step-end infinite;
}