/* 赛博/物理终端 核心视觉风格 (Terminal System Core)
   -------------------------------------------------
   V2.0.0 - 还原 daolan.html 完整风格
*/

:root {
    --bg-dark: #050505;
    --text-primary: #e2e8f0;
    --accent-emerald: #34d399;
    --accent-cyan: #06b6d4;
    --accent-red: #ef4444;
    --accent-white: #ffffff;
    --terminal-font: 'JetBrains Mono', 'Courier New', monospace;
}

/* 1. 基础布局与背景 */
body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--terminal-font);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* 双层 CRT 扫描线 + RGB 色散 */
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    z-index: 20;
    pointer-events: none;
}

/* 2. 核心 HUD 边框组件 (纯 CSS) */
.hud-border {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    transition: border-color 0.3s ease;
}

.hud-border::before,
.hud-border::after {
    content: ''; position: absolute; width: 6px; height: 6px; pointer-events: none;
}

.hud-border::before { top: -1px; left: -1px; border-top: 1.5px solid var(--accent-white); border-left: 1.5px solid var(--accent-white); }
.hud-border::after { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--accent-white); border-right: 1.5px solid var(--accent-white); }

.hud-border:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

/* 3. 装饰性标题线 */
.hud-title-line {
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
}

.hud-title-line::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg, var(--accent-emerald) 0%, rgba(52,211,153,0) 100%);
}

.hud-title-line.red::after {
    background: linear-gradient(90deg, var(--accent-red) 0%, rgba(239,68,68,0) 100%);
}

/* 4. 动画：呼吸感 pulseOpacity */
@keyframes pulseOpacity {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); }
}

.blinking-node { animation: pulseOpacity 3s ease-in-out infinite; }

/* 5. 动画：SVG 波动呼吸 wavePulse */
@keyframes wavePulse {
    0%, 100% { stroke-width: 0.5; opacity: 0.4; }
    50% { stroke-width: 2; opacity: 0.9; }
}

.wave-anim { animation: wavePulse 6s ease-in-out infinite; }

/* 6. 动画：CRT 随机干扰闪烁 crtFlicker (11 关键帧) */
@keyframes crtFlicker {
    0%, 100% { opacity: 1; }
    3%  { opacity: 0.95; }
    4%  { opacity: 1; }
    25% { opacity: 1; }
    26% { opacity: 0.85; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)); }
    27% { opacity: 1; }
    68% { opacity: 1; }
    69% { opacity: 0.9; }
    70% { opacity: 1; }
    95% { opacity: 1; }
    96% { opacity: 0.8; }
    97% { opacity: 1; }
}

.crt-flicker      { animation: crtFlicker 7s infinite; }
.crt-flicker-fast { animation: crtFlicker 4s infinite reverse; }

/* 7. 动画：大椭圆轨道明暗呼吸 orbitBreath */
@keyframes orbitBreath {
    0%, 100% { opacity: 0.15; stroke-width: 0.8; }
    50% { opacity: 0.85; stroke-width: 2; }
}

.orbit-breath { animation: orbitBreath 12s ease-in-out infinite; }

/* 8. 动画：中央底部波段均衡器 eqBounce */
@keyframes eqBounce {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}

.eq-bar {
    transform-origin: bottom;
    animation: eqBounce ease-in-out infinite;
}

/* 9. 故障视觉色散效果 (Glitch) — 6 帧 2px 阴影 3.5s */
@keyframes textGlitch {
    0%   { text-shadow:  2px 0 #ef4444, -2px 0 #06b6d4; transform: translate(-1px,  1px); }
    20%  { text-shadow: -2px 0 #ef4444,  2px 0 #06b6d4; transform: translate( 1px, -1px); }
    40%  { text-shadow:  2px 0 #ef4444, -2px 0 #06b6d4; transform: translate( 1px,  1px); }
    60%  { text-shadow: -2px 0 #ef4444,  2px 0 #06b6d4; transform: translate(-1px, -1px); }
    80%  { text-shadow:  2px 0 #ef4444, -2px 0 #06b6d4; transform: translate( 1px, -1px); }
    100% { text-shadow: none; transform: none; }
}

.glitch-active {
    animation: textGlitch 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    color: #ffffff !important;
}

/* 10. 导航链接交互组件 nav-link */
.nav-link {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.nav-link::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 0;
    height: 100%;
    width: 2px;
    background-color: #ffffff;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::before {
    transform: scaleY(1);
    transform-origin: top;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    padding-left: 1.5rem;
}

.nav-link:hover .sys-tag {
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.6);
}

/* 11. 自定义滚动条 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050505; border-left: 1px solid #1f2937; }
::-webkit-scrollbar-thumb { background: var(--accent-emerald); opacity: 0.5; }
::-webkit-scrollbar-thumb:hover { background: #10b981; }

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(52, 211, 153, 0.5); }

/* 12. 边缘暗角遮罩 */
.vignette-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 15;
    background: radial-gradient(circle at center, transparent 30%, rgba(5, 5, 5, 0.85) 100%);
}

/* 13. 通用排版 */
::selection { background: var(--accent-white); color: var(--bg-dark); }
.terminal-text-small { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }