/* ============================================================
   网站背景效果合集
   通过 body 上的 data-bg 属性切换
   ============================================================ */

/* ---------- 1. 默认渐变（紫色） ---------- */
body[data-bg="default"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* ---------- 2. 深空星尘（深蓝 + 闪烁星星） ---------- */
body[data-bg="starry"] {
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    position: relative;
    overflow-x: hidden;
}
body[data-bg="starry"]::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #eee, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 160px 30px, #ddd, transparent),
        radial-gradient(1px 1px at 200px 110px, #fff, transparent),
        radial-gradient(2px 2px at 250px 50px, #eee, transparent),
        radial-gradient(1px 1px at 300px 90px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 350px 20px, #fff, transparent),
        radial-gradient(1px 1px at 400px 130px, #ddd, transparent),
        radial-gradient(2px 2px at 450px 60px, #eee, transparent),
        radial-gradient(2px 2px at 500px 100px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 550px 30px, #fff, transparent),
        radial-gradient(2px 2px at 600px 120px, #ddd, transparent),
        radial-gradient(1px 1px at 650px 70px, #eee, transparent),
        radial-gradient(2px 2px at 700px 40px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 750px 110px, #fff, transparent),
        radial-gradient(1px 1px at 800px 50px, #ddd, transparent),
        radial-gradient(2px 2px at 850px 90px, #eee, transparent),
        radial-gradient(2px 2px at 900px 20px, rgba(255,255,255,0.7), transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 0;
    animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* ---------- 3. 极光渐变（流动的彩色） ---------- */
body[data-bg="aurora"] {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: auroraFlow 15s ease infinite;
}
@keyframes auroraFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---------- 4. 海洋波浪（动态波浪 SVG） ---------- */
body[data-bg="ocean"] {
    background: linear-gradient(180deg, #0077b6 0%, #00b4d8 50%, #90e0ef 100%);
    position: relative;
}
body[data-bg="ocean"]::after {
    content: '';
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 60% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(255,255,255,0.12) 0%, transparent 55%);
    background-size: 200% 100%;
    animation: waveMove 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}
@keyframes waveMove {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 0%; }
}

/* ---------- 5. 粒子网格 ---------- */
body[data-bg="grid"] {
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
}
body[data-bg="grid"]::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(rgba(102,126,234,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(102,126,234,0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}
body[data-bg="grid"]::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(102,126,234,0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(118,75,162,0.12) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(35,166,213,0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ---------- 6. 霓虹光晕 ---------- */
body[data-bg="neon"] {
    background: #0a0a23;
}
body[data-bg="neon"]::before {
    content: '';
    position: fixed;
    top: -50%; left: -50%; right: -50%; bottom: -50%;
    background: 
        radial-gradient(circle at 30% 40%, rgba(255, 0, 128, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(0, 255, 255, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(255, 255, 0, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 20% 70%, rgba(0, 255, 128, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(128, 0, 255, 0.1) 0%, transparent 40%);
    animation: neonPulse 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}
@keyframes neonPulse {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.05); }
}

/* ---------- 7. 玻璃拟态 ---------- */
body[data-bg="glass"] {
    background: linear-gradient(135deg, #667eea22 0%, #764ba222 100%),
                radial-gradient(circle at 20% 30%, rgba(102,126,234,0.2) 0%, transparent 60%),
                radial-gradient(circle at 80% 70%, rgba(118,75,162,0.2) 0%, transparent 60%);
    background-color: #f0f2f5;
}

/* ---------- 8. 柔和暖色 ---------- */
body[data-bg="warm"] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #ffecd2 100%);
    background-size: 200% 200%;
    animation: warmShift 10s ease-in-out infinite alternate;
}
@keyframes warmShift {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* ---------- 9. 绿色森林 ---------- */
body[data-bg="forest"] {
    background: linear-gradient(135deg, #134e5e 0%, #71b280 50%, #2c5f2d 100%);
    background-size: 200% 200%;
    animation: forestBreath 12s ease-in-out infinite alternate;
}
@keyframes forestBreath {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 100%; }
}

/* ---------- 10. 简约纯色 ---------- */
body[data-bg="simple"] {
    background: #f5f7fa;
}
body[data-bg="simple"] .nav-btn {
    background: rgba(0,0,0,0.06);
    color: #555;
}
body[data-bg="simple"] .nav-btn:hover {
    background: rgba(0,0,0,0.1);
    color: #333;
}
body[data-bg="simple"] .nav-btn.active {
    background: #667eea;
    color: white;
}
body[data-bg="simple"] .section-title,
body[data-bg="simple"] .featured-title {
    color: #333;
}
body[data-bg="simple"] .subcategory-section {
    background: white;
    border: 1px solid #eef2f7;
}
body[data-bg="simple"] .subcategory-name {
    color: #333;
}
body[data-bg="simple"] footer {
    color: #999;
    border-top-color: #eee;
}

/* 确保内容在伪元素上方 */
body[data-bg="starry"] .container,
body[data-bg="ocean"] .container,
body[data-bg="grid"] .container,
body[data-bg="neon"] .container {
    position: relative;
    z-index: 1;
}
body[data-bg="starry"] footer,
body[data-bg="ocean"] footer,
body[data-bg="grid"] footer,
body[data-bg="neon"] footer {
    position: relative;
    z-index: 1;
}

/* ============================================================
   头部标题特效（通过 .logo 上的 data-title-effect 属性控制）
   ============================================================ */

/* ---- 1. 默认（无特效） ---- */
.logo[data-title-effect="none"] {
    color: #2c3e50;
}
.logo[data-title-effect="none"] .sub {
    color: #94a3b8;
}

/* ---- 2. 渐变色标题 ---- */
.logo[data-title-effect="gradient"] {
    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.logo[data-title-effect="gradient"] .sub {
    -webkit-text-fill-color: #94a3b8;
    background: none;
}

/* ---- 3. 发光效果 ---- */
.logo[data-title-effect="glow"] {
    color: #667eea;
    text-shadow: 0 0 10px rgba(102,126,234,0.3), 0 0 20px rgba(102,126,234,0.15);
    transition: text-shadow 0.3s;
}
.logo[data-title-effect="glow"]:hover {
    text-shadow: 0 0 15px rgba(102,126,234,0.5), 0 0 30px rgba(102,126,234,0.3);
}
.logo[data-title-effect="glow"] .sub {
    color: #94a3b8;
    text-shadow: none;
}

/* ---- 4. 闪烁流动 ---- */
.logo[data-title-effect="shimmer"] {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #764ba2 75%, #667eea 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerMove 3s linear infinite;
}
@keyframes shimmerMove {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.logo[data-title-effect="shimmer"] .sub {
    -webkit-text-fill-color: #94a3b8;
    background: none;
}

/* ---- 5. 文字阴影 ---- */
.logo[data-title-effect="shadow"] {
    color: #2c3e50;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1), 4px 4px 8px rgba(0,0,0,0.05);
}
.logo[data-title-effect="shadow"] .sub {
    color: #94a3b8;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}

/* ---- 6. 霓虹发光 ---- */
.logo[data-title-effect="neon"] {
    color: #fff;
    text-shadow: 
        0 0 7px #667eea,
        0 0 10px #667eea,
        0 0 21px #667eea,
        0 0 42px #764ba2,
        0 0 82px #764ba2;
    transition: text-shadow 0.3s;
}
.logo[data-title-effect="neon"]:hover {
    text-shadow:
        0 0 10px #667eea,
        0 0 20px #667eea,
        0 0 40px #667eea,
        0 0 80px #764ba2,
        0 0 120px #764ba2;
}
.logo[data-title-effect="neon"] .sub {
    color: rgba(255,255,255,0.8);
    text-shadow: 0 0 5px rgba(102,126,234,0.5);
}

/* ---- 7. 渐变色 + 发光 ---- */
.logo[data-title-effect="gradient-glow"] {
    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #764ba2);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientGlow 4s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 8px rgba(102,126,234,0.3));
}
@keyframes gradientGlow {
    0% { background-position: 0% 50%; filter: drop-shadow(0 0 5px rgba(102,126,234,0.2)); }
    50% { background-position: 100% 50%; filter: drop-shadow(0 0 12px rgba(102,126,234,0.4)); }
    100% { background-position: 0% 50%; filter: drop-shadow(0 0 5px rgba(102,126,234,0.2)); }
}
.logo[data-title-effect="gradient-glow"] .sub {
    -webkit-text-fill-color: rgba(255,255,255,0.7);
    filter: drop-shadow(0 0 4px rgba(102,126,234,0.15));
    background: none;
}