/* 统一背景样式文件 - 所有页面共用 */
:root {
    --bg-primary: #667eea;
    --bg-secondary: #764ba2;
    --particle-color-1: rgba(255, 182, 193, 0.8);
    --particle-color-2: rgba(173, 216, 230, 0.8);
    --particle-color-3: rgba(221, 160, 221, 0.7);
    --particle-color-4: rgba(255, 215, 0, 0.6);
    --geometric-color-1: rgba(102, 126, 234, 0.3);
    --geometric-color-2: rgba(255, 112, 67, 0.3);
    --geometric-color-3: rgba(77, 208, 225, 0.3);
}

/* 基础背景设置 - 蓝白色系纯色背景 */
body {
    background: #f5f9ff;
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}

/* 主背景层 - 纯色背景，无动效 */
.dynamic-bg {
    display: none; /* 隐藏动态背景 */
}

/* 鼠标跟随背景层 */
.bg-layer {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -5;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 112, 67, 0.15) 0%, 
        rgba(240, 98, 146, 0.12) 30%, 
        rgba(77, 208, 225, 0.08) 60%,
        transparent 80%);
    transition: all 0.3s ease;
    pointer-events: none;
}

.bg-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at calc(100% - var(--mouse-x, 50%)) calc(100% - var(--mouse-y, 50%)), 
        rgba(171, 71, 188, 0.12) 0%, 
        rgba(255, 171, 64, 0.08) 40%,
        transparent 70%);
}

/* 隐藏所有动态效果 - 纯色背景模式 */
.particles,
.geometric-shapes,
.bubble,
.bubble-1, 
.bubble-2, 
.bubble-3 {
    display: none !important;
}

/* 移除所有动画 */
.particle,
.geometric-shape {
    display: none !important;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .particle {
        animation-duration: 8s;
    }
    
    .geometric-shape {
        animation-duration: 15s;
    }
    
    .bubble-1, .bubble-2, .bubble-3 {
        animation-duration: 12s;
    }
    
    /* 减少移动端粒子数量 */
    .particle:nth-child(n+9) {
        display: none;
    }
    
    .geometric-shape:nth-child(n+7) {
        display: none;
    }
}

/* 低端设备优化 */
@media (max-width: 480px) {
    .particle:nth-child(n+6) {
        display: none;
    }
    
    .geometric-shape:nth-child(n+4) {
        display: none;
    }
    
    .dynamic-bg {
        filter: brightness(0.9);
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .particle, .geometric-shape {
        opacity: 0.2;
    }
    
    .bubble-1, .bubble-2, .bubble-3 {
        opacity: 0.05;
    }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
    .particle, .geometric-shape, .bubble-1, .bubble-2, .bubble-3 {
        animation: none;
    }
    
    .bg-layer {
        transition: none;
    }
}