/* style.css - 科技感与电影感专属样式表 */

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #01030a;
}
::-webkit-scrollbar-thumb {
    background: #00f0ff;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #bd00ff;
}

html, body {
    background-color: #01030a !important; /* 网页总底色 */
    color: #ffffff; /* 确保所有文字默认为高对比度白色 */
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    min-height: 100%;
}

/* 电影感滤镜与暗角叠加层 */
.cinematic-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    background: 
        radial-gradient(circle, transparent 40%, rgba(1, 3, 10, 0.95) 100%),
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
    background-size: 100% 100%, 100% 4px, 6px 100%;
    opacity: 0.9;
}

/* 玻璃拟态面板 - 将不透明度大幅提升到 96%，并加深背景底色，强力过滤遮挡背后的3D粒子和粗线框，保障极高文字清晰度 */
.glass-panel {
    background: rgba(6, 12, 26, 0.96) !important; /* 96%的高不透明深蓝底色，阻挡背景穿透 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 240, 255, 0.38) !important; /* 精致发光勾线 */
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.98),
                inset 0 0 30px rgba(0, 240, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel:hover {
    border-color: rgba(0, 240, 255, 0.75) !important; /* 悬浮高亮 */
    box-shadow: 0 25px 70px 0 rgba(0, 240, 255, 0.25),
                inset 0 0 35px rgba(0, 240, 255, 0.2);
    transform: translateY(-3px);
}

/* 霓虹发光 */
.neon-glow-cyan {
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.45), inset 0 0 12px rgba(0, 240, 255, 0.25);
}

.neon-glow-purple {
    box-shadow: 0 0 25px rgba(189, 0, 255, 0.45), inset 0 0 12px rgba(189, 0, 255, 0.25);
}

/* 科技网格背景 */
.grid-bg {
    background-size: 60px 60px;
    background-image: 
        linear-gradient(to right, rgba(0, 240, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 240, 255, 0.02) 1px, transparent 1px);
}

/* Canvas 容器 - 设为 z-index: 1 从而盖在 body 背景之上，但低于 main 的 z-index: 10 */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1; /* 盖在 body 的 background-color 之上，防止被body颜色遮挡 */
    pointer-events: none;
    background-color: #01030a;
}

/* 页面主要文字内容层级 */
main.content-layer {
    position: relative;
    z-index: 10; /* 必须高于 canvas-container 的层级，确保交互与正常浏览 */
}

/* 扫描线动画 */
@keyframes scanline-move {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.scanner-line {
    animation: scanline-move 6s linear infinite;
}

/* 科技切角样式 */
.tech-corner-br {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
}
.tech-corner-tl {
    clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
}
.tech-corner-both {
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

/* 极客等宽字体类 */
.console-font {
    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}

/* 微信/QQ二维码浮动对话框卡片 - 增加宽度及文字亮度 */
.qr-tooltip {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 270px; /* 增大卡片宽度，使二维码更清晰 */
    background: rgba(12, 22, 45, 0.98); /* 调亮背景 */
    border: 1px solid rgba(0, 240, 255, 0.7); /* 增强边框亮度 */
    box-shadow: 0 15px 45px rgba(0, 240, 255, 0.45);
    border-radius: 8px;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
}

/* 对话框小三角 */
.qr-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: rgba(12, 22, 45, 0.98) transparent transparent transparent;
}

/* 对话框边框发光三角 */
.qr-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 9px;
    border-style: solid;
    border-color: rgba(0, 240, 255, 0.7) transparent transparent transparent;
    z-index: -1;
}

.group:hover .qr-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}