@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700;900&family=Space+Mono&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none !important; }

@media (pointer: coarse) {
    * { cursor: auto !important; }
    #cursor { display: none !important; }
}

body { background-color: #030303; color: white; font-family: 'Outfit', sans-serif; overflow-x: hidden; }

#cursor { width: 12px; height: 12px; background: white; border-radius: 50%; position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none; mix-blend-mode: difference; }
#spotlight { position: fixed; top: 0; left: 0; width: 800px; height: 800px; background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%); pointer-events: none; z-index: 1; transform: translate(-50%, -50%); }
canvas#neural-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.8; }

.panel { height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.project-card { border-top: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 -50px 100px rgba(0, 0, 0, 0.8); }

#home { z-index: 10; background: transparent; }
#project-1 { z-index: 20; background-color: #050505; }
#project-2 { z-index: 30; background-color: #080808; }
#project-3 { z-index: 40; background-color: #0a0a0a; }
#contact { z-index: 50; background-color: #030303; }

.glass-panel { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.08); }
.blueprint-bg { background-image: radial-gradient(rgba(168, 85, 247, 0.2) 1.5px, transparent 1.5px); background-size: 50px 50px; }
.locked-btn { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.3); }
.social-button { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.4s ease; }
.social-button:hover { background: white; color: black; transform: translateY(-10px); }

.path-glow { filter: blur(8px); opacity: 0.4; }
.node-card { transition: 0.6s ease; transform: scale(0.9); opacity: 0.1; }
.node-card.active { transform: scale(1); opacity: 1; filter: blur(0px); border-color: #0D47A1; }

.reveal-content, .reveal-img { will-change: transform, opacity, filter; }
.mono { font-family: 'Space Mono', monospace; }
.text-glow { text-shadow: 0 0 30px rgba(144, 202, 249, .4); }
.reveal-blur { opacity: 0; filter: blur(15px); transform: translateY(20px); }


.theme-blue #spotlight {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
}


.theme-blue .text-glow {
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
}

.theme-blue .text-purple-400 {
    color: #60a5fa;
}

.theme-blue .bg-purple-600 {
    background-color: #2563eb;
}

@keyframes loading {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}