html { scroll-padding-top: 5rem; } /* 锚点跳转时避开 80px 固定导航 */
body {
    background-color: #050b14;
    color: #e2e8f0;
    overflow-x: hidden;
}

/* 首屏高度：svh 适配手机浏览器地址栏 */
.hero-screen { min-height: 100vh; min-height: 100svh; }

/* 背景：WebGL 网络加载前 / 关闭动效时的静态兜底 */
#vanta-bg {
    background:
        radial-gradient(ellipse 60% 50% at 75% 30%, rgba(0, 243, 255, 0.07), transparent 70%),
        radial-gradient(ellipse 50% 45% at 15% 85%, rgba(188, 19, 254, 0.06), transparent 70%),
        #050b14;
}
#vanta-bg canvas { animation: fade-in 1.2s ease both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 滚动条优化 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050b14; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #00f3ff; }

/* 全息卡片：--accent 决定悬停时的边框/光晕颜色 */
.holo-card {
    --accent: 0, 243, 255;
    background: rgba(10, 20, 40, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 243, 255, 0.1);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.holo-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 20px rgba(0, 243, 255, 0.05);
    pointer-events: none;
}
/* 仅可交互的卡片悬停上浮；数据面板等静态卡片 (holo-static) 不动 */
.holo-card:not(.holo-static):hover {
    transform: translateY(-5px);
    border-color: rgba(var(--accent), 0.45);
    box-shadow: 0 0 30px rgba(var(--accent), 0.15);
}

/* 渐变描边 (数据面板) */
.border-gradient {
    border: 1px solid transparent !important;
    background:
        linear-gradient(rgba(6, 13, 26, 0.92), rgba(6, 13, 26, 0.92)) padding-box,
        linear-gradient(120deg, rgba(0, 243, 255, 0.55), rgba(188, 19, 254, 0.35) 50%, rgba(0, 255, 157, 0.45)) border-box;
}

/* 扫描线 - 层级低于导航 */
.scan-line {
    position: fixed;
    left: 0; width: 100%; height: 2px;
    background: rgba(0, 243, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
    animation: scan 8s linear infinite;
    z-index: 30;
    opacity: 0.3;
    pointer-events: none;
}
@keyframes scan {
    0% { top: -10%; }
    100% { top: 110%; }
}

/* 霓虹文字渐变 */
.text-gradient-purple {
    background: linear-gradient(to right, #00f3ff, #bc13fe);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 首屏 DNA 光晕 */
.hero-helix { width: 100%; max-width: 150px; height: auto; filter: drop-shadow(0 0 14px rgba(0, 243, 255, 0.35)); }

/* 首屏压暗层在底部淡出，避免与数据面板两侧出现明暗分界 */
.hero-veil {
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

/* 导航：滚动后加深 + 当前板块高亮 */
#site-nav.is-scrolled {
    background: rgba(5, 11, 20, 0.94);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 243, 255, 0.25);
}
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: #00f3ff;
    box-shadow: 0 0 8px #00f3ff;
    transform: scaleX(0);
    transition: transform 0.25s ease;
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: #00f3ff; }

/* 键盘焦点 */
a:focus-visible, button:focus-visible { outline: 2px solid #00f3ff; outline-offset: 3px; }

/* 滚动渐显 (仅在 JS 可用且未开启"减少动态效果"时) */
@media screen and (prefers-reduced-motion: no-preference) {
    .js .reveal {
        opacity: 0;
        translate: 0 24px;
        transition: opacity 0.7s ease var(--rd, 0ms), translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd, 0ms),
                    transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }
    .js .reveal.is-visible { opacity: 1; translate: 0 0; }
}

/* 尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .scan-line { display: none; }
}