:root {
    --bg: #050505;
    --text: #ffffff;
    --accent: #00f0ff; /* 赛博蓝，比纯绿高级 */
    --glass: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.08);
    --font-main: 'Space Grotesk', sans-serif;
    --font-code: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; /* 隐藏默认鼠标 */ }

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-main);
    overflow-x: hidden;
}

/* --- 背景画布 --- */
#neural-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; opacity: 0.6;
}

/* --- 导航 --- */
.quantum-nav {
    position: fixed; top: 0; left: 0; width: 100%;
    padding: 30px 50px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 100;
    mix-blend-mode: difference;
}
.nav-brand { font-weight: 700; letter-spacing: 2px; font-size: 1.1rem; }
.nav-status { 
    font-family: var(--font-code); font-size: 0.7rem; color: #888; 
    display: flex; align-items: center; gap: 10px;
}
.pulse-dot {
    width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
    box-shadow: 0 0 10px var(--accent);
    animation: pulse 2s infinite;
}
.nav-back { 
    font-family: var(--font-code); font-size: 0.7rem; color: #fff; text-decoration: none; 
    border: 1px solid rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 20px;
    transition: 0.3s;
}
.nav-back:hover { background: #fff; color: #000; }

/* --- Hero --- */
.hero-section {
    height: 100vh; display: flex; align-items: center; padding: 0 10vw;
}
.label { 
    font-family: var(--font-code); color: var(--accent); font-size: 0.8rem; margin-bottom: 20px; letter-spacing: 2px;
}
.hero-title {
    font-size: 8rem; line-height: 0.9; font-weight: 700; margin-left: -5px;
    background: linear-gradient(to right, #fff, #888);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-desc {
    margin-top: 40px; font-size: 1.2rem; color: #888; line-height: 1.6; max-width: 400px;
}
.scroll-line {
    width: 1px; height: 100px; background: linear-gradient(to bottom, var(--accent), transparent);
    margin-top: 60px;
}

/* --- Projects Grid (高级感核心) --- */
.projects-container { padding: 100px 10vw; position: relative; }
.section-label {
    font-family: var(--font-code); color: #444; margin-bottom: 60px;
    border-bottom: 1px solid #222; padding-bottom: 20px;
}

.grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;
}

.glass-card {
    position: relative;
    background: var(--glass);
    border: 1px solid var(--border);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    padding: 50px;
    text-decoration: none; color: #fff;
    overflow: hidden;
    transition: transform 0.1s; /* JS控制Tilt */
}

/* 极光微光 */
.card-glow {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.5s; pointer-events: none;
    transform: translate(var(--mouse-x, 0), var(--mouse-y, 0)); /* JS控制 */
}
.glass-card:hover .card-glow { opacity: 1; }
.glass-card:hover { border-color: rgba(255,255,255,0.3); }

.card-meta { font-family: var(--font-code); font-size: 0.7rem; color: #666; margin-bottom: 20px; }
.glass-card h2 { font-size: 2.5rem; margin-bottom: 10px; font-weight: 500; }
.glass-card p { color: #888; font-size: 1rem; margin-bottom: 40px; }
.card-footer {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-code); font-size: 0.8rem; border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
}
.glass-card:hover .arrow { transform: translate(5px, -5px); color: var(--accent); }
.arrow { transition: 0.3s; }

/* --- Stack Strip --- */
.stack-strip {
    padding: 60px 0; border-top: 1px solid #222; border-bottom: 1px solid #222;
    overflow: hidden; white-space: nowrap; margin-bottom: 100px;
}
.scrolling-text {
    font-family: var(--font-main); font-size: 4rem; font-weight: 700; color: rgba(255,255,255,0.05);
    animation: scroll 20s linear infinite; display: inline-block;
}

/* --- 动画 --- */
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 淡入 */
.fade-in { opacity: 0; transform: translateY(20px); animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* Glitch 悬停效果 */
.glitch-text:hover {
    text-shadow: 2px 0 var(--accent), -2px 0 #f0f;
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
@keyframes glitch-skew { 0% { transform: skew(0deg); } 20% { transform: skew(-2deg); } 40% { transform: skew(2deg); } 100% { transform: skew(0deg); } }

/* 移动端 */
@media (max-width: 768px) {
    .hero-title { font-size: 4rem; }
    .grid { grid-template-columns: 1fr; }
    .quantum-nav { padding: 20px; }
}
/* --- TECH 站紧急修复补丁 --- */
/* 防止 JS 动画挂了导致内容不显示 */
.hero-content > *, .glass-card, .nav-brand, .nav-status {
    animation-fill-mode: forwards !important; /* 确保动画结束后保持状态 */
    opacity: 1 !important; /* 强制默认可见，动画作为增强而非门槛 */
}

/* 确保网格卡片有背景色 */
.glass-card {
    background: rgba(20, 30, 40, 0.6) !important; /* 加深一点背景，防止在黑底上看不见 */
    border: 1px solid rgba(0, 240, 255, 0.2) !important;
}