/**
 * 卿胜马个人网站 - 动态沉浸式主题系统 V2.0
 * 新增特性：动态呼吸背景、15+种配色方案
 */

 :root {
    /* === 基础变量 (默认：经典·蓝) === */
    --bg-body: #f8f9fa;
    --bg-gradient: linear-gradient(120deg, #f0f4ff 0%, #ffffff 100%); 
    --glass-nav: rgba(255, 255, 255, 0.8);
    
    --text-main: #212529;
    --text-brand: #0d6efd;
    --text-bio: #6c757d;
    --text-card-title: #212529;
    --text-card-desc: #6c757d;
    
    --card-bg: #ffffff;
    --card-border: #e9ecef;
    --card-shadow: 0 4px 20px rgba(0,0,0,0.05);
    
    --accent-btn: #0d6efd;
    --accent-btn-text: #ffffff;
    --tag-bg: #e9ecef;
    --tag-text: #495057;

    /* === 🖋️ 字体系统设计 (Typography System) === */
    
    /* 1. 艺术体 (用于"赵爽")：马善政书法体 -> 行楷 -> 手写体 */
    --font-artistic-cn: 'Ma Shan Zheng', 'STXingkai', '华文行楷', cursive;
    
    /* 2. 时尚体 (用于"Connect me")：Playfair Display -> 衬线体 */
    --font-artistic-en: 'Playfair Display', 'Times New Roman', serif;
    
    /* 3. 标题体 (用于各板块标题)：楷体 -> 华文楷体 -> 宋体 */
    --font-heading: 'KaiTi', 'STKaiti', '华文楷体', '楷体', serif;
    
    /* 4. 正文体 (用于详细内容)：Times New Roman (英) + SimSun (中) -> 最正式的学术搭配 */
    --font-body: 'Times New Roman', 'SimSun', '宋体', 'NSimSun', serif;
}

/* === 全局字体应用 === */
body {
    /* 正文默认使用宋体 + Times New Roman */
    font-family: var(--font-body); 
    background-color: var(--bg-body);
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    background-size: 300% 300%;
    animation: gradientFlow 15s ease infinite;
    color: var(--text-main);
    transition: color 0.5s ease;
    /* 稍微增加字间距，让宋体呼吸感更好 */
    line-height: 1.6;
}

/* 强制所有卡片正文、列表、段落使用正式字体 */
p, .card-text, .list-unstyled, .task-content, .bio-text {
    font-family: var(--font-body);
    font-size: 1.05rem; /* 宋体如果不加粗，稍微大一点点更好看 */
}

/* 导航栏保持现代无衬线字体 (看起来更像UI) */
.navbar {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    /* ...原有样式... */
    background-color: var(--glass-nav) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--card-border);
    transition: all 0.5s ease;
}

/* =========================================
   🎨 主题库 (Theme Gallery)
   ========================================= */

/* --- 原有经典款 --- */
[data-theme="dawn"] { --bg-body:#fff0f5; --bg-gradient:linear-gradient(120deg, #fff0f5 0%, #fff 50%, #ffe3e3 100%); --text-brand:#ff6b81; --text-bio:#ff9a9e; --accent-btn:#ff6b81; --tag-bg:#ffe3e3; --tag-text:#e03131; }
[data-theme="mint"] { --bg-body:#e6fffa; --bg-gradient:linear-gradient(120deg, #e6fffa 0%, #f0fff4 50%, #d1fae5 100%); --text-brand:#059669; --text-bio:#34d399; --accent-btn:#10b981; --tag-bg:#d1fae5; --tag-text:#064e3b; }
[data-theme="lavender"] { --bg-body:#f3f0ff; --bg-gradient:linear-gradient(120deg, #f3f0ff 0%, #fff 50%, #e9d5ff 100%); --text-brand:#7c3aed; --text-bio:#a78bfa; --accent-btn:#8b5cf6; --tag-bg:#ede9fe; --tag-text:#5b21b6; }
[data-theme="coffee"] { --bg-body:#f5f5f0; --bg-gradient:linear-gradient(120deg, #f5f5f0 0%, #fafaf9 50%, #e6ccb2 100%); --text-brand:#9c6644; --text-bio:#b08968; --accent-btn:#9c6644; --tag-bg:#ede0d4; --tag-text:#7f5539; }
[data-theme="dark"] { --bg-body:#050505; --bg-gradient:linear-gradient(120deg, #000000 0%, #1a1a1a 100%); --glass-nav:rgba(0,0,0,0.8); --text-main:#e0e0e0; --text-brand:#00ff9d; --text-bio:#8f9094; --text-card-title:#fff; --text-card-desc:#a1a1aa; --card-bg:#111; --card-border:#333; --accent-btn:#00ff9d; --accent-btn-text:#000; --tag-bg:#1a1a1a; --tag-text:#00ff9d; }

/* --- ✨ 新增 10 款高级主题 --- */

/* 6. 海洋 (Ocean) - 深邃蓝 */
[data-theme="ocean"] {
    --bg-body: #e0f7fa;
    --bg-gradient: linear-gradient(120deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
    --text-brand: #006064;
    --text-bio: #0097a7;
    --accent-btn: #00bcd4;
    --tag-bg: #b2ebf2;
    --tag-text: #006064;
}

/* 7. 日落 (Sunset) - 橙紫渐变 */
[data-theme="sunset"] {
    --bg-body: #fff3e0;
    --bg-gradient: linear-gradient(120deg, #ffe0b2 0%, #ffcc80 50%, #ffb74d 100%);
    --text-brand: #e65100;
    --text-bio: #f57c00;
    --accent-btn: #ff9800;
    --tag-bg: #ffe0b2;
    --tag-text: #e65100;
}

/* 8. 森林 (Forest) - 治愈森系 */
[data-theme="forest"] {
    --bg-body: #f1f8e9;
    --bg-gradient: linear-gradient(120deg, #dcedc8 0%, #c5e1a5 50%, #aed581 100%);
    --text-brand: #33691e;
    --text-bio: #558b2f;
    --accent-btn: #689f38;
    --tag-bg: #dcedc8;
    --tag-text: #33691e;
}

/* 9. 霓虹 (Neon) - 赛博朋克紫 */
[data-theme="neon"] {
    --bg-body: #0a0015;
    --bg-gradient: linear-gradient(120deg, #120024 0%, #1e0030 100%);
    --glass-nav: rgba(20, 0, 40, 0.85);
    --text-main: #fff;
    --text-brand: #d500f9;
    --text-bio: #e040fb;
    --text-card-title: #fff;
    --text-card-desc: #d1d5db;
    --card-bg: #1a0525;
    --card-border: #4a148c;
    --accent-btn: #d500f9;
    --accent-btn-text: #fff;
    --tag-bg: #4a148c;
    --tag-text: #e040fb;
}

/* 10. 黑金 (Gold) - 奢华黑金 */
[data-theme="gold"] {
    --bg-body: #000;
    --bg-gradient: linear-gradient(120deg, #000 0%, #1c1c1c 100%);
    --glass-nav: rgba(10, 10, 10, 0.9);
    --text-main: #ffd700;
    --text-brand: #ffc107;
    --text-bio: #ffe082;
    --text-card-title: #fff8e1;
    --text-card-desc: #ccc;
    --card-bg: #111;
    --card-border: #ffd700;
    --accent-btn: #ffd700;
    --accent-btn-text: #000;
    --tag-bg: #333;
    --tag-text: #ffc107;
}

/* 11. 水墨 (Ink) - 极简黑白灰 */
[data-theme="ink"] {
    --bg-body: #f5f5f5;
    --bg-gradient: linear-gradient(120deg, #ffffff 0%, #e0e0e0 100%);
    --text-brand: #000;
    --text-bio: #666;
    --accent-btn: #333;
    --tag-bg: #ddd;
    --tag-text: #000;
    --card-border: #999;
}

/* 12. 糖果 (Candy) - 缤纷马卡龙 */
[data-theme="candy"] {
    --bg-body: #fff0f5;
    --bg-gradient: linear-gradient(120deg, #fff0f5 0%, #e0f7fa 50%, #fff9c4 100%);
    --text-brand: #ff4081;
    --text-bio: #4dd0e1;
    --accent-btn: #ff4081;
    --tag-bg: #fff9c4;
    --tag-text: #ff4081;
}

/* 13. 午夜 (Midnight) - 深蓝护眼 */
[data-theme="midnight"] {
    --bg-body: #0f172a;
    --bg-gradient: linear-gradient(120deg, #0f172a 0%, #1e293b 100%);
    --glass-nav: rgba(15, 23, 42, 0.9);
    --text-main: #94a3b8;
    --text-brand: #38bdf8;
    --text-bio: #64748b;
    --text-card-title: #f1f5f9;
    --text-card-desc: #94a3b8;
    --card-bg: #1e293b;
    --card-border: #334155;
    --accent-btn: #38bdf8;
    --accent-btn-text: #0f172a;
    --tag-bg: #334155;
    --tag-text: #38bdf8;
}

/* 14. 极光 (Aurora) - 绚丽北极光 */
[data-theme="aurora"] {
    --bg-body: #002b36;
    --bg-gradient: linear-gradient(120deg, #002b36 0%, #073642 100%);
    --glass-nav: rgba(0, 43, 54, 0.9);
    --text-main: #839496;
    --text-brand: #2aa198;
    --text-bio: #859900;
    --text-card-title: #eee8d5;
    --text-card-desc: #93a1a1;
    --card-bg: #073642;
    --card-border: #586e75;
    --accent-btn: #2aa198;
    --accent-btn-text: #fff;
    --tag-bg: #002b36;
    --tag-text: #2aa198;
}

/* 15. 火山 (Volcano) - 激情红黑 */
[data-theme="volcano"] {
    --bg-body: #2b1d1d;
    --bg-gradient: linear-gradient(120deg, #420f0f 0%, #2b1d1d 100%);
    --glass-nav: rgba(50, 20, 20, 0.9);
    --text-main: #ffccc7;
    --text-brand: #ff4d4f;
    --text-bio: #ff7875;
    --text-card-title: #fff;
    --text-card-desc: #ffa39e;
    --card-bg: #5c0011;
    --card-border: #820014;
    --accent-btn: #f5222d;
    --accent-btn-text: #fff;
    --tag-bg: #2a0005;
    --tag-text: #ff4d4f;
}


/* =========================================
   🚀 动态效果引擎
   ========================================= */

body {
    background-color: var(--bg-body);
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    /* 关键：放大背景尺寸，让渐变有流动空间 */
    background-size: 300% 300%;
    /* 关键：应用背景流动动画 */
    animation: gradientFlow 15s ease infinite;
    
    color: var(--text-main);
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    transition: color 0.5s ease;
}

/* 定义背景流动动画 */
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 导航栏 */
.navbar {
    background-color: var(--glass-nav) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--card-border);
    transition: all 0.5s ease;
}

.navbar-brand-custom { color: var(--text-brand) !important; }
.nav-link { color: var(--text-bio) !important; transition: color 0.3s; }
.nav-link:hover { color: var(--text-brand) !important; }

/* 卡片 */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    color: var(--text-main);
    transition: all 0.5s ease;
}
.card-title { color: var(--text-card-title) !important; }
.text-muted { color: var(--text-card-desc) !important; }

/* 按钮 */
.btn-primary {
    background-color: var(--accent-btn);
    border-color: var(--accent-btn);
    color: var(--accent-btn-text);
    transition: all 0.3s;
}
.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}
.btn-outline-primary {
    color: var(--accent-btn);
    border-color: var(--accent-btn);
}
.btn-outline-primary:hover {
    background-color: var(--accent-btn);
    color: var(--accent-btn-text);
}

/* Badge (技能标签) */
.badge {
    background-color: var(--tag-bg) !important;
    color: var(--tag-text) !important;
    border: 1px solid var(--card-border);
}

/* =========================================
   🤖 导航栏机器人图标动态效果
   ========================================= */

/* 定义缓慢浮动和旋转的动画关键帧 */
@keyframes robotFloat {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-3px) rotate(5deg);
    }
    50% {
        transform: translateY(0px) rotate(0deg);
    }
    75% {
        transform: translateY(3px) rotate(-5deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* 应用于导航栏图标的类 */
.navbar-icon-animated {
    display: inline-block; /* 必须是 inline-block 才能应用 transform */
    animation: robotFloat 6s ease-in-out infinite; /* 6秒完成一次循环，无限重复 */
    color: var(--accent-color); /* 使用当前主题色，或者你可以指定一个固定颜色如 #00BFFF */
    font-size: 1.8rem; /* 稍微调大一点 */
    margin-right: 8px;
    filter: drop-shadow(0 0 2px currentColor); /* 添加一点发光效果 */
}