/* ================================================================
   科技动态主题样式表
   字体：Inter（免费商用，SIL Open Font License）
   配色：电光蓝 #00e0ff / 冰青色 #00a8ff / 深空底 #060918
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ========== 基础重置 ========== */
*{margin:0;padding:0;box-sizing:border-box}

body{
    font-family:'Inter','PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
    background:var(--bg-primary);
    color:var(--text-primary);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:var(--accent-primary);border-radius:2px;box-shadow:0 0 6px var(--shadow-glow)}
::-webkit-scrollbar-thumb:hover{background:var(--accent-secondary)}

/* ========== 加载屏 ========== */
#loading-screen{background:var(--loading-bg);transition:opacity .8s ease,visibility .8s ease}
#loading-screen.fade-out{opacity:0;visibility:hidden}

.loading-spinner{position:relative;width:72px;height:72px}
.spinner-ring{position:absolute;inset:0;border:2px solid transparent;border-radius:50%}
.spinner-ring:nth-child(1){border-top-color:var(--accent-primary);animation:spin 1s linear infinite;filter:drop-shadow(0 0 3px var(--accent-primary))}
.spinner-ring:nth-child(2){inset:8px;border-right-color:var(--accent-tertiary);animation:spin 1.4s linear infinite reverse;filter:drop-shadow(0 0 3px var(--accent-tertiary))}
.spinner-ring:nth-child(3){inset:16px;border-bottom-color:var(--accent-secondary);animation:spin 1.8s linear infinite;filter:drop-shadow(0 0 3px var(--accent-secondary))}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========== 导航栏 ========== */
.nav-underline{
    position:absolute;bottom:0;left:50%;width:0;height:2px;
    background:var(--gradient-cyber);transition:all .3s;transform:translateX(-50%);
    border-radius:1px;box-shadow:0 0 8px var(--shadow-glow);
}
.nav-link:hover .nav-underline,.nav-link.active .nav-underline{width:80%}

/* ========== 玻璃拟态面板 ========== */
.glass-panel{
    background:var(--bg-glass);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    border:1px solid var(--border-accent);
    border-radius:1rem;
    box-shadow:var(--shadow-card);
    transition:all .4s cubic-bezier(.4,0,.2,1);
}
.glass-panel:hover{
    background:var(--bg-glass-hover);
    border-color:var(--border-glow);
    box-shadow:var(--shadow-glow),var(--shadow-card);
    transform:translateY(-3px);
}

/* ========== 服务/作品卡片 ========== */
.service-card,.works-card{
    position:relative;
    background:var(--bg-glass);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    border:1px solid var(--border-color);
    border-radius:1rem;
    box-shadow:var(--shadow-card);
    transition:all .45s cubic-bezier(.4,0,.2,1);
    overflow:hidden;
}

/* 卡片hover发光边框 */
.service-card::before,.works-card::before{
    content:'';position:absolute;inset:-1px;border-radius:1rem;
    background:var(--gradient-cyber);opacity:0;transition:opacity .45s;z-index:-1;
}
.service-card:hover::before,.works-card:hover::before{opacity:.35}

/* 卡片hover扫光 */
.service-card::after,.works-card::after{
    content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(var(--particle-rgb),.04),transparent);
    transition:left .7s ease;z-index:0;
}
.service-card:hover::after,.works-card:hover::after{left:100%}

.service-card:hover,.works-card:hover{
    border-color:var(--border-accent);
    box-shadow:var(--shadow-glow),var(--shadow-card);
    transform:translateY(-4px);
}

/* ========== 全息投影卡片 ========== */
.hologram-card{
    position:relative;
    background:var(--bg-glass);
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    border:1px solid var(--border-color);
    border-radius:1rem;
    box-shadow:var(--shadow-card);
    transition:all .45s cubic-bezier(.4,0,.2,1);
    overflow:hidden;
}
.hologram-card::after{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:var(--gradient-cyber);opacity:0;transition:opacity .45s;
}
.hologram-card:hover{
    border-color:var(--border-accent);
    box-shadow:var(--shadow-glow),var(--shadow-card);
    transform:translateY(-3px);
}
.hologram-card:hover::after{opacity:1}

/* ========== 按钮 ========== */
.cyber-btn{
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    padding:.7rem 1.8rem;font-weight:600;border-radius:.6rem;
    transition:all .4s cubic-bezier(.4,0,.2,1);overflow:hidden;z-index:1;
    cursor:pointer;text-decoration:none;
}
.cyber-btn-primary{
    background:var(--gradient-cyber);color:#060918;border:none;
}
.cyber-btn-primary:hover{
    box-shadow:var(--glow-accent);transform:translateY(-2px);filter:brightness(1.08);
}
/* 按钮hover流光 */
.cyber-btn-primary::after{
    content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
    background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
    transform:rotate(45deg) translateX(-100%);transition:transform .55s ease;
}
.cyber-btn-primary:hover::after{transform:rotate(45deg) translateX(100%)}

.cyber-btn-outline{
    background:transparent;color:var(--accent-primary);border:1px solid var(--border-accent);
}
.cyber-btn-outline:hover{
    background:rgba(var(--particle-rgb),.06);border-color:var(--border-glow);
    box-shadow:var(--glow-accent);transform:translateY(-2px);
}

/* ========== 点击涟漪光效 ========== */
.ripple-effect{
    position:absolute;border-radius:50%;
    background:radial-gradient(circle,rgba(var(--particle-rgb),.25) 0%,transparent 70%);
    transform:scale(0);animation:rippleAnim .6s ease-out forwards;pointer-events:none;
}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* ========== 输入框 ========== */
.cyber-input{
    width:100%;
    background:rgba(var(--particle-rgb),.03);
    border:1px solid var(--border-color);
    border-radius:.75rem;
    padding:.7rem 1rem;font-size:.875rem;
    color:var(--text-primary);
    transition:all .3s;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.cyber-input:focus{
    outline:none;border-color:var(--border-glow);
    box-shadow:var(--glow-accent);
    background:rgba(var(--particle-rgb),.05);
}
.cyber-input::placeholder{color:var(--text-muted)}

/* ========== 标签 ========== */
.cyber-tag{
    display:inline-flex;align-items:center;
    padding:.2rem .7rem;border-radius:9999px;
    font-size:.7rem;letter-spacing:.08em;
    background:rgba(var(--particle-rgb),.06);
    border:1px solid var(--border-accent);
    color:var(--accent-primary);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

/* ========== 分割线 ========== */
.cyber-divider{position:relative;height:1px;background:var(--gradient-cyber);opacity:.3}
.cyber-divider::before{
    content:'';position:absolute;top:-2px;left:0;width:5px;height:5px;
    background:var(--accent-primary);border-radius:50%;
    box-shadow:0 0 6px var(--accent-primary);
    animation:dividerPulse 2s ease-in-out infinite;
}
@keyframes dividerPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}

/* ========== 脉冲光环 ========== */
.pulse-ring{position:relative}
.pulse-ring::before{
    content:'';position:absolute;inset:-4px;border-radius:inherit;
    border:1px solid var(--accent-primary);opacity:0;
    animation:pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}

/* ========== 悬浮微动 ========== */
.float-anim{animation:floatY 4s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ========== 滚动渐入 ========== */
.scroll-animate{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
.scroll-animate.visible{opacity:1;transform:translateY(0)}

/* ========== Hero网格覆盖 ========== */
.hero-grid-overlay{
    background-image:
        linear-gradient(rgba(var(--particle-rgb),.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(var(--particle-rgb),.03) 1px,transparent 1px);
    background-size:56px 56px;
    animation:gridShift 24s linear infinite;
}
@keyframes gridShift{0%{background-position:0 0}100%{background-position:56px 56px}}

/* ========== 光束线 ========== */
.beam-line{
    position:absolute;width:280px;height:1px;
    background:linear-gradient(90deg,transparent,var(--accent-primary),var(--accent-tertiary),transparent);
    opacity:.35;animation:beamMove 9s ease-in-out infinite;
    filter:drop-shadow(0 0 3px var(--accent-primary));
}
.beam-1{top:30%;left:-280px;animation-delay:0s}
.beam-2{top:70%;right:-280px;animation-delay:4.5s;animation-direction:reverse}
@keyframes beamMove{
    0%,100%{transform:translateX(0);opacity:0}
    10%{opacity:.35}90%{opacity:.35}
    50%{transform:translateX(calc(100vw + 560px))}
}

/* ========== Hero背景脉冲 ========== */
.hero-bg-image img{animation:heroBgPulse 9s ease-in-out infinite}
@keyframes heroBgPulse{0%,100%{transform:scale(1);filter:brightness(.8)}50%{transform:scale(1.04);filter:brightness(1.05)}}

/* ========== 分页 ========== */
.pagination{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pagination a,.pagination span{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:34px;height:34px;padding:0 8px;border-radius:8px;
    font-size:13px;transition:all .3s;
    border:1px solid var(--border-color);color:var(--text-secondary);
    background:var(--bg-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.pagination a:hover{
    border-color:var(--border-accent);color:var(--accent-primary);
    background:var(--bg-glass-hover);box-shadow:var(--glow-accent);
}
.pagination .active{
    background:var(--gradient-cyber);color:#fff;border-color:transparent;
    font-weight:600;box-shadow:0 0 10px var(--shadow-glow);
}
.pagination .disabled{opacity:.3;cursor:not-allowed}

/* ========== 内容排版 ========== */
.prose-content p{margin-bottom:1rem;line-height:1.8}
.prose-content h2,.prose-content h3{color:var(--text-primary);margin-top:1.5rem;margin-bottom:.75rem}
.prose-content ul,.prose-content ol{margin-bottom:1rem;padding-left:1.5rem}
.prose-content li{margin-bottom:.5rem}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ========== 浅色主题覆盖 ========== */
[data-theme="light"] .text-white{color:var(--text-primary)!important}
[data-theme="light"] [class*="bg-gradient"] .text-white{color:#fff!important}
[data-theme="light"] .text-gray-200{color:var(--text-primary)!important}
[data-theme="light"] .text-gray-300{color:var(--text-secondary)!important}
[data-theme="light"] .text-gray-400{color:var(--text-muted)!important}
[data-theme="light"] .text-gray-500{color:var(--text-muted)!important}
[data-theme="light"] .text-gray-600{color:var(--text-muted)!important}

[data-theme="light"] .service-card,
[data-theme="light"] .works-card,
[data-theme="light"] .hologram-card,
[data-theme="light"] .glass-panel{
    background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-color:var(--border-color);box-shadow:var(--shadow-card);
}
[data-theme="light"] .service-card:hover,
[data-theme="light"] .works-card:hover,
[data-theme="light"] .hologram-card:hover,
[data-theme="light"] .glass-panel:hover{
    box-shadow:var(--shadow-soft),var(--shadow-card);
}
[data-theme="light"] .service-card::before,
[data-theme="light"] .works-card::before,
[data-theme="light"] .service-card::after,
[data-theme="light"] .works-card::after{display:none}

[data-theme="light"] #hero-banner .absolute.inset-0.bg-deep-blue\/70{background:rgba(245,248,252,.55)!important}
[data-theme="light"] .bg-dark-blue\/30,
[data-theme="light"] .bg-dark-blue\/50,
[data-theme="light"] .bg-dark-blue\/80{background:var(--bg-glass)!important;border-color:var(--border-color)!important}
[data-theme="light"] .bg-dark-blue\/95{background:var(--overlay-bg)!important}
[data-theme="light"] .bg-deep-blue\/60,
[data-theme="light"] .bg-deep-blue\/80{background:var(--bg-secondary)!important}
[data-theme="light"] .bg-white\/5{background-color:var(--bg-secondary)!important}

[data-theme="light"] input:not(.cyber-input),
[data-theme="light"] textarea:not(.cyber-input),
[data-theme="light"] select{
    background-color:#fff!important;border-color:var(--border-color)!important;
    color:var(--text-primary)!important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder{color:var(--text-muted)!important}
[data-theme="light"] .placeholder-gray-500::placeholder{color:var(--text-muted)!important}
[data-theme="light"] .bg-gradient-to-t.from-deep-blue{--tw-gradient-from:rgb(var(--c-deep-blue)/.8)!important}
[data-theme="light"] .prose-content{color:var(--text-secondary)}
[data-theme="light"] .cyber-btn-primary{color:#fff}
[data-theme="light"] .beam-line{opacity:.15}

/* ========== 响应式 ========== */
@media(max-width:1024px){
    .service-card .glow-border,.works-card .glow-border{display:none}
}
@media(max-width:768px){
    .service-card::before,.works-card::before,
    .service-card::after,.works-card::after{display:none}
    .beam-line{display:none}
    .hero-grid-overlay{background-size:40px 40px;animation-duration:16s}
    .cyber-btn{padding:.6rem 1.4rem;font-size:.875rem}
    .service-card:hover,.works-card:hover,.hologram-card:hover,.glass-panel:hover{
        transform:translateY(-2px);
    }
}
@media(max-width:480px){
    .cyber-tag{font-size:.6rem;padding:.15rem .5rem}
    .cyber-btn{padding:.55rem 1.2rem;font-size:.8rem}
}