/* =========================================================
   1. 字体配置 (Fonts)
   ========================================================= */
@font-face { font-family: 'PingFang SC'; src: local('PingFang SC Ultralight'), local('PingFangSC-Ultralight'), url('./fonts/PingFang/PingFangSC-Ultralight.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'PingFang SC'; src: local('PingFang SC Thin'), local('PingFangSC-Thin'), url('./fonts/PingFang/PingFangSC-Thin.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'PingFang SC'; src: local('PingFang SC Light'), local('PingFangSC-Light'), url('./fonts/PingFang/PingFangSC-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'PingFang SC'; src: local('PingFang SC Regular'), local('PingFangSC-Regular'), url('./fonts/PingFang/PingFangSC-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PingFang SC'; src: local('PingFang SC Medium'), local('PingFangSC-Medium'), url('./fonts/PingFang/PingFangSC-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'PingFang SC'; src: local('PingFang SC Semibold'), local('PingFangSC-Semibold'), url('./fonts/PingFang/PingFangSC-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* =========================================================
   2. 全局基础 (Base & Layout)
   ========================================================= */
html, body { 
    margin: 0; padding: 0; width: 100%; height: 100%;
    background-color: #ffffff;
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; 
    overflow: hidden; overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

#nvpress-tips {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    box-sizing: border-box; text-align: center; gap: clamp(1.2em, 3vw, 2em); 
    padding: calc(1em + env(safe-area-inset-top)) 1.5em calc(3em + env(safe-area-inset-bottom)) 1.5em;
    background: linear-gradient(180deg, #e0f0ff 0%, #edf5ff 30%, #f4f8ff 60%, #ffffff 100%);
}

/* =========================================================
   3. 核心UI与排版 (Typography & Components)
   ========================================================= */
.text-group { display: flex; flex-direction: column; align-items: center; gap: 0.6em; z-index: 10; }
#nvpress-tips h1 { margin: 0; font-size: clamp(28px, 5.5vw, 46px); color: #5c738b; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.nv-blue { display: inline-block; background: linear-gradient(135deg, #0070f5 0%, #479cf5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.desc-text { margin: 0; color: #8a9fb1; font-size: clamp(14px, 3.5vw, 16px); font-weight: 400; line-height: 1.5; letter-spacing: 0.05em; }
.wave-emoji { display: inline-block; transform-origin: 70% 70%; animation: wave-animation 2.8s ease-in-out infinite; will-change: transform; }

/* 品牌 Logo */
.logo-container { position: relative; z-index: 10; display: inline-flex; justify-content: center; align-items: center; }
.logo-container img { height: clamp(48px, 6vw, 88px); width: auto; opacity: 0.95; filter: drop-shadow(0 4px 12px rgba(0, 112, 245, 0.08)); transition: all 0.5s ease; transform: translateZ(0); }
@media (hover: hover) { .logo-container:hover img { opacity: 1; transform: translateY(-2px) translateZ(0); filter: drop-shadow(0 8px 20px rgba(0, 112, 245, 0.15)); } }

/* 倒计时面板 */
.cd-pill-wrapper {
    display: inline-flex; align-items: center; justify-content: center; gap: clamp(12px, 2.5vw, 20px); 
    margin: clamp(4px, 1vw, 8px) 0; padding: clamp(12px, 3vw, 18px) clamp(28px, 6vw, 44px);
    border-radius: 60px; user-select: none; -webkit-user-select: none;
}
.cd-item { display: flex; align-items: flex-end; justify-content: center; }
.cd-val-wrap { position: relative; width: clamp(32px, 6.5vw, 46px); height: clamp(30px, 6.5vw, 42px); overflow: hidden; display: flex; justify-content: center; perspective: 200px; }
.cd-label { font-size: clamp(11px, 1.8vw, 13px); color: #8a9fb1; font-weight: 500; margin: 0 0 clamp(3px, 0.6vw, 6px) 6px; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1; }
.cd-colon { font-family: "SF Pro Display", sans-serif; font-size: clamp(16px, 3.5vw, 22px); color: #a4b4c4; transform: translateY(-2px); margin: 0; animation: breathe-fade 2s ease-in-out infinite; will-change: opacity; }

/* 水晶数字材质 (纯外描边保护字重) */
.cd-val { 
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; 
    font-size: clamp(24px, 6vw, 38px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; 
    background: linear-gradient(135deg, #005bb5 0%, #0070f5 30%, #479cf5 60%, #0060cc 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0px; 
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 1)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
    will-change: transform, opacity;
}
.cd-val.slide-in { animation: scroll-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.cd-val.slide-out { animation: scroll-out 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* 体验按钮 */
.btn-early-access {
    display: inline-flex; justify-content: center; align-items: center; text-decoration: none;
    color: #5c738b; font-size: clamp(14px, 3.5vw, 16px); font-weight: 600; letter-spacing: 0.5px;
    padding: clamp(10px, 2.5vw, 12px) clamp(30px, 6vw, 40px); border-radius: 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
    border: 1px solid rgba(92, 115, 139, 0.08); position: relative; overflow: hidden; z-index: 10;
    box-shadow: 0 8px 24px rgba(92, 115, 139, 0.08), inset 0 2px 3px rgba(255, 255, 255, 1), inset 0 0 5px rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.btn-early-access::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; z-index: -1; pointer-events: none; transition: opacity 0.3s ease;
    background: radial-gradient(circle 90px at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.15) 60%, transparent 100%);
}
.btn-early-access:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(92, 115, 139, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.8); }

/* =========================================================
   4. 玻璃拟物态特效 (Glassmorphism Shared)
   ========================================================= */
.spotlight-glass {
    position: relative; overflow: hidden; z-index: 10;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.05) 100%); 
    backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%);
    border: 1px solid rgba(92, 115, 139, 0.08); transform: translateZ(0); -webkit-transform: translateZ(0);
    box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 1), inset 0 0 4px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(255, 255, 255, 0.2), 0 8px 24px rgba(92, 115, 139, 0.06);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.spotlight-glass::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; z-index: -1; pointer-events: none; transition: opacity 0.3s ease;
    background: radial-gradient(circle 100px at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}
.cd-pill-wrapper.spotlight-glass { background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 100%); border-color: rgba(255, 255, 255, 0.4); box-shadow: inset 0 2px 4px rgba(255, 255, 255, 1), inset 0 0 8px rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(255, 255, 255, 0.2), 0 12px 32px rgba(92, 115, 139, 0.08); }

/* Hover 与 Touch Active 共享交互 */
.spotlight-glass.touch-active, .cd-pill-wrapper.spotlight-glass.touch-active { border-color: rgba(92, 115, 139, 0.15); }
.cd-pill-wrapper.spotlight-glass.touch-active { border-color: rgba(255, 255, 255, 0.6); }
.spotlight-glass.touch-active::before, .btn-early-access.touch-active::before { opacity: 1; }
.btn-early-access.touch-active { color: #5c738b; border-color: rgba(92, 115, 139, 0.18); box-shadow: 0 12px 32px rgba(92, 115, 139, 0.12), inset 0 2px 4px rgba(255, 255, 255, 1), inset 0 0 6px rgba(255, 255, 255, 0.7), inset 0 -1px 3px rgba(255, 255, 255, 0.4); }

@media (hover: hover) { 
    .spotlight-glass:hover { border-color: rgba(92, 115, 139, 0.15); }
    .spotlight-glass:hover::before, .btn-early-access:hover::before { opacity: 1; } 
    .cd-pill-wrapper.spotlight-glass:hover { border-color: rgba(255, 255, 255, 0.6); }
    .btn-early-access:hover { color: #5c738b; border-color: rgba(92, 115, 139, 0.18); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(92, 115, 139, 0.12), inset 0 2px 4px rgba(255, 255, 255, 1), inset 0 0 6px rgba(255, 255, 255, 0.7), inset 0 -1px 3px rgba(255, 255, 255, 0.4); }
}

/* =========================================================
   5. 页脚与动态备案面板 (Footer & ICP)
   ========================================================= */
.bottom-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 1em 1em max(1.5em, env(safe-area-inset-bottom)) 1em; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; z-index: 10; transition: opacity 0.3s ease; }
.copyright { color: #94a3b8; font-size: clamp(10px, 2vw, 11px); letter-spacing: 1px; font-weight: 400; text-transform: uppercase; user-select: none; pointer-events: none; }

/* 备案组竖屏基准 (上下堆叠) */
.beian-group.spotlight-glass { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 16px; pointer-events: auto; }
a.beian-link { display: inline-flex; align-items: center; gap: 6px; color: #7a8d9e; text-decoration: none; font-size: 11px; position: relative; transition: color 0.3s ease, transform 0.2s ease; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
a.beian-link:hover { color: #0070f5; transform: scale(1.02); }
a.beian-link:active { transform: scale(0.98); }
.icp-icon { width: 18px; height: 18px; object-fit: contain; opacity: 0.9; }

/* 动态分割线 (多于1个链接时自动生成) */
.beian-group.spotlight-glass .beian-link:not(:first-child)::before {
    content: ''; position: absolute; top: -6px; left: -10px; right: -10px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, rgba(92,115,139,0) 0%, rgba(92,115,139,0.15) 50%, rgba(92,115,139,0) 100%);
}

@media (min-width: 550px) {
    .beian-group.spotlight-glass { flex-direction: row; padding: 6px 24px; border-radius: 50px; gap: 16px; }
    .beian-group.spotlight-glass .beian-link:not(:first-child)::before { top: 50%; left: -8px; right: auto; width: 1px; height: 12px; transform: translateY(-50%); background: rgba(92,115,139,0.25); }
    a.beian-link { font-size: 12px; }
}

/* =========================================================
   6. 3D动态背景与边缘遮罩 (Background & Mask)
   ========================================================= */
.bg-animation { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }

/* 边缘褪晕系统级遮罩 */
.bg-animation::before, .bg-animation::after { content: ''; position: absolute; left: 0; right: 0; z-index: 5; pointer-events: none; user-select: none; -webkit-user-select: none; height: max(15vh, 120px); }
.bg-animation::before { top: 0; background: linear-gradient(180deg, #e0f0ff 0%, rgba(224, 240, 255, 0.9) 20%, rgba(224, 240, 255, 0.4) 60%, rgba(224, 240, 255, 0) 100%); }
.bg-animation::after { bottom: 0; background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 100%); }

/* 渐变流体气泡 */
.gradient-blob { position: absolute; border-radius: 50%; opacity: 0.5; animation: blob-float 20s ease-in-out infinite alternate; transform: translateZ(0); }
.gradient-blob:nth-child(1) { width: 80vw; height: 80vw; max-width: 800px; max-height: 800px; background: radial-gradient(circle, rgba(204, 227, 255, 0.8) 0%, rgba(204, 227, 255, 0) 70%); bottom: -20%; left: 10%; animation-delay: -5s; animation-duration: 25s; }
.gradient-blob:nth-child(2) { width: 70vw; height: 70vw; max-width: 700px; max-height: 700px; background: radial-gradient(circle, rgba(224, 240, 255, 0.8) 0%, rgba(224, 240, 255, 0) 70%); top: 10%; right: 0%; animation-delay: -10s; animation-duration: 22s; }

/* 3D 玻璃球体系 */
.glass-sphere-container { position: absolute; top: 50%; left: 50%; width: clamp(280px, 85vw, 600px); height: clamp(280px, 85vw, 600px); z-index: 1; transform: translate(-50%, -50%); }
.glow-waves { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.glow-waves .wave { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(0, 112, 245, 0.25); box-shadow: 0 0 40px 10px rgba(0, 112, 245, 0.08), inset 0 0 20px rgba(255, 255, 255, 0.8); opacity: 0; animation: glow-wave-expand 6s cubic-bezier(0.16, 1, 0.3, 1) infinite; will-change: transform, opacity; }
.glow-waves .wave:nth-child(2) { animation-delay: 2s; } 
.glow-waves .wave:nth-child(3) { animation-delay: 4s; }

.orbit-ring-1 { position: absolute; inset: -4%; border-radius: 50%; animation: orbit-rotate 24s linear infinite; will-change: transform; }
.orbit-ring-1::before { content: ''; position: absolute; top: 50%; left: -2%; transform: translateY(-50%); width: clamp(12px, 2vw, 18px); height: clamp(12px, 2vw, 18px); border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 1) 0%, rgba(128, 196, 255, 0.4) 30%, rgba(0, 112, 245, 0.1) 70%, rgba(255, 255, 255, 0.9) 100%); box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 1), inset -2px -2px 6px rgba(0, 112, 245, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.6), 0 0 15px rgba(0, 112, 245, 0.3); border: 1px solid rgba(255, 255, 255, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.orbit-ring-2 { position: absolute; inset: -9%; border-radius: 50%; animation: orbit-rotate 30s linear infinite reverse; will-change: transform; }
.orbit-ring-2::after { content: ''; position: absolute; left: 50%; bottom: -1.5%; transform: translateX(-50%); width: clamp(8px, 1.5vw, 12px); height: clamp(8px, 1.5vw, 12px); border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 1) 0%, rgba(153, 214, 255, 0.5) 25%, rgba(0, 112, 245, 0.1) 60%, rgba(255, 255, 255, 0.95) 100%); box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 1), inset -2px -2px 5px rgba(0, 112, 245, 0.3), 0 0 12px rgba(0, 112, 245, 0.2); border: 1px solid rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.glass-sphere { 
    position: absolute; inset: 0; border-radius: 50%; transform: translateZ(0); -webkit-transform: translateZ(0);
    background: radial-gradient(110% 110% at 30% 10%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(0, 112, 245, 0.02) 80%, rgba(0, 112, 245, 0.08) 100%);
    box-shadow: inset 0 12px 32px rgba(255, 255, 255, 1), inset 0 2px 6px rgba(255, 255, 255, 0.9), inset 0 -10px 24px rgba(0, 112, 245, 0.15), 0 20px 50px rgba(0, 112, 245, 0.08);          
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.7);
}

/* =========================================================
   7. 关键帧动画 (Keyframes)
   ========================================================= */
@keyframes wave-animation { 0%, 75%, 100% { transform: rotate(0deg); } 15% { transform: rotate(20deg); } 25% { transform: rotate(-10deg); } 35% { transform: rotate(14deg); } 45% { transform: rotate(-6deg); } 55% { transform: rotate(4deg); } 65% { transform: rotate(-2deg); } }
@keyframes scroll-in { 0% { transform: translateY(70%) scale(0.9); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes scroll-out { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-70%) scale(0.9); opacity: 0; } }
@keyframes breathe-fade { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes glow-wave-expand { 0% { transform: scale(0.85) translateZ(0); opacity: 0.8; border-width: 1.5px; } 100% { transform: scale(1.6) translateZ(0); opacity: 0; border-width: 0px; filter: blur(4px); } }
@keyframes orbit-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes blob-float { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.3; } 33% { transform: translate(3vw, -4vw) scale(1.05) rotate(2deg); opacity: 0.4; } 66% { transform: translate(-2vw, 3vw) scale(0.95) rotate(-2deg); opacity: 0.25; } }

/* =========================================================
   8. 响应式适配: 横屏设备 (Landscape)
   ========================================================= */
@media (max-height: 500px) and (orientation: landscape) {
    #nvpress-tips { 
        display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto auto 1fr; gap: 1vh 0; 
        align-content: stretch; align-items: center; justify-items: center; 
        padding: 0 0 max(40px, calc(10px + env(safe-area-inset-bottom))) 0; 
    }
    
    .logo-container { grid-column: 1; grid-row: 2; margin-bottom: 0.5vh; }
    .logo-container img { height: clamp(28px, 10vh, 48px); }
    .text-group { grid-column: 1; grid-row: 3; gap: 0.5vh; }
    #nvpress-tips h1 { font-size: clamp(20px, 7vh, 32px); }
    .desc-text { font-size: clamp(12px, 4vh, 15px); }
    .btn-early-access { grid-column: 1; grid-row: 4; padding: 1vh 3vw; font-size: 13px; margin-top: 1.5vh; }
    
    .glass-sphere-container { left: 25%; top: calc(50% - 20px); width: clamp(240px, 80vh, 400px); height: clamp(240px, 80vh, 400px); }
    
    .cd-pill-wrapper { grid-column: 2; grid-row: 2 / 5; padding: 14px 24px; gap: 12px; margin: 0; z-index: 20; backdrop-filter: blur(28px) saturate(160%); box-shadow: 0 16px 40px rgba(0, 112, 245, 0.12), inset 0 2px 4px rgba(255, 255, 255, 1); }
    .cd-item { flex-direction: row; }
    .cd-val-wrap { width: 36px; height: 34px; }
    .cd-val { font-size: 28px; }
    .cd-label { font-size: 11px; margin-bottom: 4px; margin-left: 5px; }
    .cd-colon { font-size: 18px; transform: translateY(-2px); }
    
    .bottom-footer { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 6px max(24px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: linear-gradient(0deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%); }
    .copyright { text-align: left; font-size: clamp(8px, 2vh, 10px); }
    
    .beian-group.spotlight-glass { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; padding: 6px 20px; border-radius: 50px; gap: 12px; }
    .beian-group.spotlight-glass .beian-link:not(:first-child)::before { top: 50%; left: -6px; right: auto; width: 1px; height: 12px; transform: translateY(-50%); background: rgba(92,115,139,0.3); }
    a.beian-link { font-size: 10px; gap: 4px; color: #8a9fb1; }
    .icp-icon { width: 16px; height: 16px; }
}