/* --- 基础变量 --- */
:root {
    --bg: #050505;
    --text: #FFFFFF; /* 纯白文字，更亮 */
    --visual-blue: #00D2FF;
    --lit-gold: #FFD700; /* 更亮的金 */
    --tech-green: #00FF9D;
}

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

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    height: 100vh; overflow: hidden;
}

/* --- 1. 电影噪点 (保留质感) --- */
.noise-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJjb250cmFzdCI+PHBmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjc1IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2NvbnRyYXN0KSIgb3BhY2l0eT0iMC4wNCIvPjwvc3ZnPg==');
    opacity: 0.3; pointer-events: none; z-index: 999; /* 降低一点噪点浓度，让画面更透 */
}

/* --- 2. 磁吸光标 --- */
.cursor-follower {
    position: fixed; width: 12px; height: 12px;
    background: #fff; border-radius: 50%;
    pointer-events: none; z-index: 1000;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: width 0.3s, height 0.3s;
}
/* Hover 状态 */
body.hover-active .cursor-follower {
    width: 50px; height: 50px; background: #fff; opacity: 0.2; mix-blend-mode: normal;
}

/* --- Header --- */
.hub-header {
    position: absolute; top: 40px; width: 100%; text-align: center; z-index: 50; pointer-events: none;
    mix-blend-mode: exclusion; /* 关键：防止在亮背景下看不清 */
}
.logo-text { font-weight: 800; letter-spacing: 10px; font-size: 1.2rem; color: #fff; }
.logo-sub { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; opacity: 0.8; letter-spacing: 4px; margin-top: 5px; color: #fff;}

/* --- 布局容器 --- */
.hub-container { display: flex; width: 100%; height: 100vh; }

.hub-section {
    position: relative; flex: 1;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    border-right: 1px solid rgba(255,255,255,0.1);
    text-decoration: none; color: var(--text);
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s, opacity 0.4s;
    overflow: hidden;
    background: #000; /* 默认黑底 */
}
.hub-section:last-child { border-right: none; }

/* --- 背景层 (关键修复点) --- */
.section-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0.3; /* 默认稍亮一点 */
    transition: transform 0.8s, opacity 0.5s;
}

/* --- 内容层 --- */
.section-content { 
    z-index: 10; text-align: center; pointer-events: none; 
    /* 移除 mix-blend-mode: lighten，因为它会导致在暗背景下文字消失 */
    position: relative;
}
.section-number { font-family: 'JetBrains Mono'; font-size: 0.8rem; margin-bottom: 20px; opacity: 0.6; }
.section-title { 
    font-size: 3rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 15px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5); /* 加阴影保证可读性 */
}
.section-desc { opacity: 0; transform: translateY(20px); transition: 0.5s ease; }
.section-desc .cn { display: block; font-size: 1.1rem; margin-bottom: 5px; letter-spacing: 2px; font-weight: 600; }
.section-desc .en { display: block; font-family: 'JetBrains Mono'; font-size: 0.6rem; color: rgba(255,255,255,0.7); text-transform: uppercase; }


/* === 这里的背景色是关键：即使没有图片，也要亮！ === */

/* [VISUALS] 冰蓝极光 */
.section-visuals .section-bg { 
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); /* 默认深蓝 */
}
.section-visuals:hover .section-bg {
    /* 激活时：亮蓝紫渐变 */
    background: linear-gradient(135deg, #1CB5E0 0%, #000851 100%);
}

/* [LIT] 熔岩流金 */
.section-lit .section-bg { 
    background: linear-gradient(135deg, #232526 0%, #414345 100%); /* 默认深灰 */
}
.section-lit:hover .section-bg {
    /* 激活时：黑金渐变 */
    background: linear-gradient(135deg, #8E0E00 0%, #1F1C18 100%); 
    /* 或者用更亮的金色: background: radial-gradient(circle, #D4AF37 0%, #000 80%); */
}

/* [TECH] 赛博矩阵 */
.section-tech .section-bg { 
    background: linear-gradient(135deg, #000000 0%, #0f9b0f 100%); /* 默认深绿 */
}
.section-tech:hover .section-bg {
    /* 激活时：亮绿黑客风 */
    background: linear-gradient(0deg, #000000 0%, #004d00 100%);
}


/* === 装饰元素 (保留) === */
.particles-container, .ink-texture, .cyber-grid { position: absolute; width: 100%; height: 100%; pointer-events: none; }

/* Visuals 光斑 */
.particle { position: absolute; border-radius: 50%; background: var(--visual-blue); filter: blur(30px); opacity: 0; transition: opacity 0.5s; }
.p1 { width: 150px; height: 150px; top: 30%; left: 30%; animation: float 6s infinite; }
.p2 { width: 200px; height: 200px; bottom: 20%; right: 20%; animation: float 8s infinite reverse; background: #8E2DE2; }

/* Tech 网格 */
.cyber-grid {
    background-image: linear-gradient(rgba(0, 255, 157, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 157, 0.2) 1px, transparent 1px);
    background-size: 40px 40px; transform: perspective(500px) rotateX(60deg); opacity: 0;
    animation: grid-move 20s linear infinite;
}
@keyframes grid-move { 0% { transform: perspective(500px) rotateX(60deg) translateY(0); } 100% { transform: perspective(500px) rotateX(60deg) translateY(40px); } }


/* === 核心交互逻辑 (修复变暗问题) === */

/* 1. 当鼠标进入大容器：让未选中的变暗，但别太黑 */
.hub-container:hover .hub-section { 
    opacity: 0.2; /* 未选中的变暗 */
    filter: grayscale(1) blur(2px); 
}

/* 2. 当鼠标悬停在特定板块：高亮！ */
.hub-section:hover {
    flex: 2;
    opacity: 1 !important; /* 强制不透明 */
    filter: grayscale(0) blur(0) !important; /* 强制清晰 */
    z-index: 2; /* 浮起 */
}

/* 3. 激活时，背景图更亮 */
.hub-section:hover .section-bg { 
    transform: scale(1.05); 
    opacity: 0.9; /* 关键：从0.4改到了0.9，大幅提亮 */
    filter: brightness(1.2); /* 额外加亮 */
}

/* 4. 激活时，文字和装饰出现 */
.hub-section:hover .section-content { transform: scale(1.1); }
.hub-section:hover .section-desc { opacity: 1; transform: translateY(0); }
.section-visuals:hover .particle { opacity: 0.5; }
.section-tech:hover .cyber-grid { opacity: 0.4; }

/* 特定颜色增强 */
.section-visuals:hover .section-title { color: #fff; text-shadow: 0 0 20px var(--visual-blue); }
.section-lit:hover .section-title { color: var(--lit-gold); text-shadow: 0 0 20px rgba(212, 175, 55, 0.5); }
.section-tech:hover .section-title { color: var(--tech-green); text-shadow: 0 0 20px rgba(0, 255, 157, 0.5); }

/* 浮动动画 */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

/* Footer */
.hub-footer {
    position: absolute; bottom: 20px; width: 100%; text-align: center;
    font-family: 'JetBrains Mono'; font-size: 0.6rem; opacity: 0.6; letter-spacing: 2px; color: #fff;
    pointer-events: none;
}

/* 移动端 */
@media (max-width: 768px) {
    .hub-container { flex-direction: column; }
    .hub-section { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .section-title { font-size: 2rem; }
    .section-desc { opacity: 1; transform: translateY(0); margin-top: 5px; }
    .section-bg { opacity: 0.4; } /* 移动端默认稍微亮一点 */
}