/* ========================================
   TECH ENHANCE — AI/科技感增强层
   覆盖在 style.css 之上，为浅蓝科技主题注入灵魂
   ======================================== */

/* ====== 1. 导航栏 — 透明融入Hero ====== */
[data-theme="light-blue"] .navbar {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

[data-theme="light-blue"] .navbar.scrolled {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(46, 123, 255, 0.10);
    box-shadow: 0 4px 30px rgba(46, 123, 255, 0.06);
}

/* 导航Logo — 科技感发光 */
[data-theme="light-blue"] .logo-icon {
    background: linear-gradient(135deg, #2E7BFF, #00B4D8);
    box-shadow: 0 0 20px rgba(46, 123, 255, 0.40);
    border-radius: 10px;
}

/* 导航链接 — 科技感hover辉光 */
[data-theme="light-blue"] .nav-link {
    color: rgba(10, 22, 40, 0.65);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

[data-theme="light-blue"] .nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(46, 123, 255, 0.08), rgba(0, 180, 216, 0.08));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
}

[data-theme="light-blue"] .nav-link:hover::before,
[data-theme="light-blue"] .nav-link.active::before {
    opacity: 1;
}

[data-theme="light-blue"] .nav-link:hover,
[data-theme="light-blue"] .nav-link.active {
    color: #2E7BFF;
    text-shadow: 0 0 12px rgba(46, 123, 255, 0.30);
}

/* 导航下划线 — 辉光条 */
[data-theme="light-blue"] .nav-link::after {
    background: linear-gradient(90deg, #2E7BFF, #00B4D8);
    box-shadow: 0 0 8px rgba(46, 123, 255, 0.50);
    height: 2px;
    border-radius: 2px;
}

/* 滚动后导航文字颜色 */
[data-theme="light-blue"] .navbar.scrolled .nav-link {
    color: rgba(10, 22, 40, 0.70);
}

/* 主题切换/语言按钮 — 科技感 */
[data-theme="light-blue"] .lang-toggle,
[data-theme="light-blue"] .theme-toggle {
    border: 1px solid rgba(46, 123, 255, 0.15);
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    transition: all 0.3s ease;
}

[data-theme="light-blue"] .lang-toggle:hover,
[data-theme="light-blue"] .theme-toggle:hover {
    border-color: rgba(46, 123, 255, 0.35);
    box-shadow: 0 0 16px rgba(46, 123, 255, 0.15);
}

/* ====== 2. Hero — 科技感全面升级 ====== */

/* 科技网格背景 — 全局覆盖 */
[data-theme="light-blue"] .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(46, 123, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46, 123, 255, 0.04) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
    z-index: 0;
    pointer-events: none;
}

/* Hero 背景辉光球 — 模糊大气 */
[data-theme="light-blue"] .blob-1 {
    background: radial-gradient(circle, rgba(46, 123, 255, 0.25), transparent 70%);
    filter: blur(40px);
    opacity: 1;
}
[data-theme="light-blue"] .blob-2 {
    background: radial-gradient(circle, rgba(0, 180, 216, 0.20), transparent 70%);
    filter: blur(50px);
    opacity: 1;
}
[data-theme="light-blue"] .blob-3 {
    background: radial-gradient(circle, rgba(108, 184, 255, 0.18), transparent 70%);
    filter: blur(35px);
    opacity: 1;
}

/* Hero Emoji — 科技感光环 */
[data-theme="light-blue"] .hero-emoji {
    background: linear-gradient(135deg, rgba(46, 123, 255, 0.10), rgba(0, 180, 216, 0.10));
    border: 2px solid rgba(46, 123, 255, 0.20);
    box-shadow:
        0 0 40px rgba(46, 123, 255, 0.20),
        0 0 80px rgba(46, 123, 255, 0.10),
        inset 0 0 20px rgba(46, 123, 255, 0.05);
    animation: hero-emoji-pulse 4s ease-in-out infinite;
}

@keyframes hero-emoji-pulse {
    0%, 100% {
        box-shadow:
            0 0 40px rgba(46, 123, 255, 0.20),
            0 0 80px rgba(46, 123, 255, 0.10),
            inset 0 0 20px rgba(46, 123, 255, 0.05);
    }
    50% {
        box-shadow:
            0 0 60px rgba(46, 123, 255, 0.35),
            0 0 120px rgba(46, 123, 255, 0.15),
            inset 0 0 30px rgba(46, 123, 255, 0.08);
    }
}

/* Hero 标题 — 渐变流动动画 */
[data-theme="light-blue"] .hero-name {
    background: linear-gradient(135deg, #2E7BFF, #00B4D8, #6CB8FF, #2E7BFF);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 6s ease infinite;
    text-shadow: none;
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Hero greeting — 渐变文字 */
[data-theme="light-blue"] .gradient-text {
    background: linear-gradient(135deg, #2E7BFF, #00B4D8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero 按钮 — 科技感辉光 */
[data-theme="light-blue"] .btn-primary {
    background: linear-gradient(135deg, #2E7BFF, #1E66E0);
    box-shadow: 0 4px 20px rgba(46, 123, 255, 0.40);
    position: relative;
    overflow: hidden;
}

[data-theme="light-blue"] .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.5s ease;
}

[data-theme="light-blue"] .btn-primary:hover::before {
    left: 100%;
}

[data-theme="light-blue"] .btn-primary:hover {
    box-shadow: 0 8px 32px rgba(46, 123, 255, 0.55);
    transform: translateY(-2px);
}

[data-theme="light-blue"] .btn-ghost {
    background: rgba(255, 255, 255, 0.50);
    border: 1px solid rgba(46, 123, 255, 0.20);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

[data-theme="light-blue"] .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.80);
    border-color: rgba(46, 123, 255, 0.40);
    box-shadow: 0 4px 20px rgba(46, 123, 255, 0.15);
}

/* ====== 3. 3D悬浮卡片增强 ====== */
[data-theme="light-blue"] .floating-card-3d {
    background: rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(46, 123, 255, 0.15);
    box-shadow:
        0 8px 32px rgba(46, 123, 255, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.50) inset;
    transition: all 0.3s ease;
}

[data-theme="light-blue"] .floating-card-3d .icon {
    background: linear-gradient(135deg, #2E7BFF, #00B4D8);
    box-shadow: 0 4px 12px rgba(46, 123, 255, 0.35);
}

[data-theme="light-blue"] .floating-orb {
    filter: blur(2px);
}

[data-theme="light-blue"] .floating-ring {
    border-color: rgba(46, 123, 255, 0.10);
    animation: ring-rotate 30s linear infinite;
}

@keyframes ring-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ====== 4. Section 标题 — 科技感 ====== */
[data-theme="light-blue"] .section-tag {
    background: rgba(46, 123, 255, 0.08);
    color: #2E7BFF;
    border: 1px solid rgba(46, 123, 255, 0.15);
    font-family: 'Poppins', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 6px;
    position: relative;
}

[data-theme="light-blue"] .section-tag::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2E7BFF;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 8px rgba(46, 123, 255, 0.60);
    animation: tag-dot-pulse 2s ease-in-out infinite;
}

@keyframes tag-dot-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(46, 123, 255, 0.60); }
    50% { opacity: 0.5; box-shadow: 0 0 12px rgba(46, 123, 255, 0.80); }
}

[data-theme="light-blue"] .section-title {
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* 分隔线 — 辉光渐变 */
[data-theme="light-blue"] .section-line {
    background: linear-gradient(90deg, transparent, #2E7BFF, #00B4D8, transparent);
    height: 2px;
    box-shadow: 0 0 12px rgba(46, 123, 255, 0.30);
}

/* ====== 5. 卡片 — 玻璃拟态 + 辉光边框 ====== */
[data-theme="light-blue"] .hobby-card,
[data-theme="light-blue"] .portfolio-card,
[data-theme="light-blue"] .blog-card,
[data-theme="light-blue"] .video-card,
[data-theme="light-blue"] .contact-item,
[data-theme="light-blue"] .friend-card,
[data-theme="light-blue"] .highlight-card {
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(46, 123, 255, 0.10);
    box-shadow: 0 4px 24px rgba(46, 123, 255, 0.06);
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 卡片hover — 辉光边框 + 上浮 */
[data-theme="light-blue"] .hobby-card:hover,
[data-theme="light-blue"] .portfolio-card:hover,
[data-theme="light-blue"] .blog-card:hover,
[data-theme="light-blue"] .video-card:hover,
[data-theme="light-blue"] .contact-item:hover,
[data-theme="light-blue"] .friend-card:hover,
[data-theme="light-blue"] .highlight-card:hover {
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(46, 123, 255, 0.25);
    box-shadow:
        0 12px 40px rgba(46, 123, 255, 0.15),
        0 0 0 1px rgba(46, 123, 255, 0.10);
    transform: translateY(-4px);
}

/* 卡片顶部辉光线 */
[data-theme="light-blue"] .hobby-card::before,
[data-theme="light-blue"] .portfolio-card::before,
[data-theme="light-blue"] .blog-card::before,
[data-theme="light-blue"] .video-card::before,
[data-theme="light-blue"] .highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(46, 123, 255, 0.40), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

[data-theme="light-blue"] .hobby-card:hover::before,
[data-theme="light-blue"] .portfolio-card:hover::before,
[data-theme="light-blue"] .blog-card:hover::before,
[data-theme="light-blue"] .video-card:hover::before,
[data-theme="light-blue"] .highlight-card:hover::before {
    opacity: 1;
}

/* ====== 6. 筛选按钮 — 科技感 ====== */
[data-theme="light-blue"] .filter-btn {
    background: rgba(255, 255, 255, 0.70);
    border: 1px solid rgba(46, 123, 255, 0.10);
    border-radius: 8px;
    transition: all 0.3s ease;
}

[data-theme="light-blue"] .filter-btn:hover {
    border-color: rgba(46, 123, 255, 0.30);
    box-shadow: 0 0 16px rgba(46, 123, 255, 0.12);
}

[data-theme="light-blue"] .filter-btn.active {
    background: linear-gradient(135deg, #2E7BFF, #1E66E0);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(46, 123, 255, 0.35);
    color: #fff;
}

/* ====== 7. 表单 — 玻璃感输入框 ====== */
[data-theme="light-blue"] .contact-form {
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(46, 123, 255, 0.10);
    box-shadow: 0 8px 32px rgba(46, 123, 255, 0.08);
}

[data-theme="light-blue"] .form-group input,
[data-theme="light-blue"] .form-group textarea {
    background: rgba(240, 246, 255, 0.50);
    border: 1px solid rgba(46, 123, 255, 0.10);
    border-radius: 10px;
    transition: all 0.3s ease;
}

[data-theme="light-blue"] .form-group input:focus,
[data-theme="light-blue"] .form-group textarea:focus {
    border-color: #2E7BFF;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(46, 123, 255, 0.10), 0 0 20px rgba(46, 123, 255, 0.10);
}

/* ====== 8. 页脚 — 深色科技底 ====== */
[data-theme="light-blue"] .footer {
    background: linear-gradient(135deg, #0A1628 0%, #0D1F3C 50%, #102845 100%);
    border-top: 1px solid rgba(46, 123, 255, 0.15);
    position: relative;
    overflow: hidden;
}

[data-theme="light-blue"] .footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(46, 123, 255, 0.50), transparent);
}

[data-theme="light-blue"] .footer-brand {
    color: #fff;
}

[data-theme="light-blue"] .footer-text {
    color: rgba(255, 255, 255, 0.50);
}

[data-theme="light-blue"] .footer-copy {
    color: rgba(255, 255, 255, 0.30);
}

[data-theme="light-blue"] .footer-beian,
[data-theme="light-blue"] .footer-beian a {
    color: rgba(255, 255, 255, 0.25);
}

[data-theme="light-blue"] .footer-beian a:hover {
    color: rgba(255, 255, 255, 0.50);
}

[data-theme="light-blue"] .footer-social a {
    transition: all 0.3s ease;
}

[data-theme="light-blue"] .footer-social a:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 0 8px rgba(46, 123, 255, 0.40));
}

/* ====== 9. 回到顶部 — 辉光 ====== */
[data-theme="light-blue"] .back-to-top {
    background: linear-gradient(135deg, #2E7BFF, #1E66E0);
    box-shadow: 0 4px 20px rgba(46, 123, 255, 0.40);
    border: none;
}

[data-theme="light-blue"] .back-to-top:hover {
    box-shadow: 0 8px 32px rgba(46, 123, 255, 0.55);
    transform: translateY(-2px);
}

/* ====== 10. 技术标签 — 科技感 ====== */
[data-theme="light-blue"] .portfolio-tech span {
    background: rgba(46, 123, 255, 0.06);
    color: #2E7BFF;
    border: 1px solid rgba(46, 123, 255, 0.10);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
}

/* ====== 11. 时间线 — 科技感节点 ====== */
[data-theme="light-blue"] .timeline-item::before {
    background: linear-gradient(135deg, #2E7BFF, #00B4D8);
    box-shadow: 0 0 12px rgba(46, 123, 255, 0.40);
}

[data-theme="light-blue"] .timeline-content {
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(46, 123, 255, 0.10);
    box-shadow: 0 4px 20px rgba(46, 123, 255, 0.06);
    transition: all 0.3s ease;
}

[data-theme="light-blue"] .timeline-content:hover {
    border-color: rgba(46, 123, 255, 0.20);
    box-shadow: 0 8px 32px rgba(46, 123, 255, 0.12);
    transform: translateY(-2px);
}

/* ====== 12. 头像 — 科技光环 ====== */
[data-theme="light-blue"] .avatar-ring {
    box-shadow:
        0 0 0 2px rgba(46, 123, 255, 0.10),
        0 0 40px rgba(46, 123, 255, 0.20),
        0 20px 60px rgba(46, 123, 255, 0.15);
}

[data-theme="light-blue"] .badge-floating {
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(46, 123, 255, 0.12);
    box-shadow: 0 4px 16px rgba(46, 123, 255, 0.12);
    backdrop-filter: blur(10px);
}

/* ====== 13. 滚动进度条 — 科技感 ====== */
[data-theme="light-blue"] .scroll-progress {
    background: linear-gradient(90deg, #2E7BFF, #00B4D8);
    box-shadow: 0 0 8px rgba(46, 123, 255, 0.50);
}

/* ====== 14. 加载动画 — 科技感 ====== */
[data-theme="light-blue"] .preloader {
    background: linear-gradient(135deg, #E8F1FF, #FFFFFF, #D6E4FA);
}

[data-theme="light-blue"] .preloader-spinner {
    border-color: rgba(46, 123, 255, 0.15);
    border-top-color: #2E7BFF;
}

/* ====== 15. 区块背景 — 微妙渐变层次 ====== */
[data-theme="light-blue"] .highlights {
    background: linear-gradient(180deg, rgba(232, 241, 255, 0.50) 0%, transparent 100%);
}

[data-theme="light-blue"] .about {
    background: linear-gradient(180deg, transparent 0%, rgba(240, 246, 255, 0.50) 100%);
}

[data-theme="light-blue"] .timeline-section {
    background: linear-gradient(180deg, rgba(240, 246, 255, 0.50) 0%, transparent 100%);
}

[data-theme="light-blue"] .portfolio {
    background: linear-gradient(180deg, transparent 0%, rgba(232, 241, 255, 0.50) 100%);
}

[data-theme="light-blue"] .contact {
    background: linear-gradient(180deg, rgba(240, 246, 255, 0.50) 0%, transparent 100%);
}

/* ====== 16. 技能条 — 科技渐变 ====== */
[data-theme="light-blue"] .skill-bar-fill {
    background: linear-gradient(90deg, #2E7BFF, #00B4D8);
    box-shadow: 0 0 12px rgba(46, 123, 255, 0.30);
}

/* ====== 17. 统计数字 — 渐变 ====== */
[data-theme="light-blue"] .stat-number {
    background: linear-gradient(135deg, #2E7BFF, #00B4D8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ====== 18. 视频模态框 — 玻璃感 ====== */
[data-theme="light-blue"] .video-modal-content {
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(46, 123, 255, 0.15);
    box-shadow: 0 24px 80px rgba(46, 123, 255, 0.20);
}

/* ====== 19. 粒子增强 ====== */
[data-theme="light-blue"] .particle {
    background: rgba(46, 123, 255, 0.50);
    box-shadow: 0 0 10px rgba(46, 123, 255, 0.50);
}

/* ====== 20. 滚动指示器增强 ====== */
[data-theme="light-blue"] .scroll-indicator .wheel {
    background: #2E7BFF;
    box-shadow: 0 0 8px rgba(46, 123, 255, 0.50);
}

/* ====== 21. 通用辉光效果类 ====== */
[data-theme="light-blue"] .glow-blue {
    box-shadow: 0 0 20px rgba(46, 123, 255, 0.25);
}

[data-theme="light-blue"] .glow-blue-strong {
    box-shadow: 0 0 40px rgba(46, 123, 255, 0.40);
}

/* ====== 22. 暗黑主题也获得科技增强 ====== */
[data-theme="dark"] .nav-link::after {
    background: linear-gradient(90deg, #818cf8, #22d3ee);
    box-shadow: 0 0 8px rgba(129, 140, 248, 0.50);
}

[data-theme="dark"] .section-line {
    background: linear-gradient(90deg, transparent, #818cf8, #22d3ee, transparent);
    box-shadow: 0 0 12px rgba(129, 140, 248, 0.30);
}

[data-theme="dark"] .hero-name {
    background: linear-gradient(135deg, #818cf8, #22d3ee, #a78bfa, #818cf8);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 6s ease infinite;
}

[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.40);
}

[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.55);
}

[data-theme="dark"] .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s ease;
}

[data-theme="dark"] .btn-primary:hover::before {
    left: 100%;
}

[data-theme="dark"] .scroll-progress {
    background: linear-gradient(90deg, #818cf8, #22d3ee);
    box-shadow: 0 0 8px rgba(129, 140, 248, 0.50);
}

[data-theme="dark"] .section-tag::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #818cf8;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 8px rgba(129, 140, 248, 0.60);
    animation: tag-dot-pulse 2s ease-in-out infinite;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    text-shadow: 0 0 12px rgba(129, 140, 248, 0.30);
}

/* ====== 23. 浅色主题也获得部分增强 ====== */
[data-theme="light"] .nav-link::after {
    background: linear-gradient(90deg, #6366f1, #06b6d4);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.40);
}

[data-theme="light"] .section-line {
    background: linear-gradient(90deg, transparent, #6366f1, #06b6d4, transparent);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.20);
}

[data-theme="light"] .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.5s ease;
}

[data-theme="light"] .btn-primary:hover::before {
    left: 100%;
}

/* ====== 24. 移动端导航 — 科技感 ====== */
@media (max-width: 768px) {
    [data-theme="light-blue"] .navbar.scrolled {
        background: rgba(255, 255, 255, 0.92);
    }

    [data-theme="light-blue"] .nav-menu {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
    }
}