:root {
    --primary: #10b981;
    --primary-glow: rgba(16, 185, 129, 0.4);
    --secondary: #3b82f6;
    --accent: #f59e0b;
    --danger: #ef4444;
    --bg: #020617;
    --panel: rgba(2, 6, 23, 0.7);
    --border: rgba(30, 41, 59, 0.6);
}

body {
    background-color: var(--bg);
    cursor: crosshair;
}

/* Nav Links */
.nav-link {
    @apply flex items-center gap-2 px-4 py-2 text-[10px] font-bold uppercase tracking-widest text-slate-500 hover:text-white transition-all rounded-xl border border-transparent;
}

.nav-link i {
    @apply transition-transform;
}

.nav-link:hover i {
    @apply scale-110;
}

.nav-link.active {
    @apply text-emerald-400 bg-emerald-500/10 border-emerald-500/20;
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Ticker */
@keyframes ticker {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-ticker {
    display: inline-block;
    animation: ticker 30s linear infinite;
}

/* Scanline */
.scanline {
    width: 100%;
    height: 100px;
    z-index: 5;
    background: linear-gradient(0deg, transparent 0%, rgba(16, 185, 129, 0.05) 50%, transparent 100%);
    opacity: 0.15;
    position: absolute;
    bottom: 100%;
    animation: scanline 10s linear infinite;
}

@keyframes scanline {
    0% {
        bottom: 100%;
    }

    100% {
        bottom: -100px;
    }
}

/* 3D Labeling */
.globe-label {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--border);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 9px;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Impact Badge */
.impact-badge {
    @apply px-1.5 py-0.5 rounded text-[8px] font-bold uppercase;
}

/* Typography for Intel */
#intel-content h3 {
    @apply text-xl font-bold text-white mb-4 border-b border-slate-800 pb-2;
}

#intel-content h4 {
    @apply text-emerald-400 text-xs font-bold uppercase tracking-widest mt-6 mb-2;
}

#intel-content p {
    @apply mb-4 leading-relaxed;
}

#intel-content b {
    @apply text-emerald-400;
}

/* Animations */
.hover-glow:hover {
    box-shadow: 0 0 20px var(--primary-glow);
}

.animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

/* Tech Progress Bars */
.tech-bar-container {
    @apply h-1.5 w-full bg-slate-800 rounded-full overflow-hidden mb-1;
}

.tech-bar-fill {
    @apply h-full bg-blue-500 rounded-full relative;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.tech-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2px;
    background: white;
    opacity: 0.8;
}

/* Blueprint / Schematic View */
.blueprint-container {
    background-color: #0f172a;
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    position: relative;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}

.blueprint-line {
    border: 1px dashed rgba(59, 130, 246, 0.4);
    position: absolute;
}

.blueprint-dot {
    width: 4px;
    height: 4px;
    background: #60a5fa;
    border-radius: 50%;
    position: absolute;
    box-shadow: 0 0 5px #60a5fa;
}