/* 
 * 背景装饰效果样式
 * 独立文件，不影响现有样式
 */

/* ===== 全局背景装饰效果 ===== */
.bg-enhanced {
    background: 
        /* 大斑块1 - 浅奶黄色 */
        radial-gradient(ellipse 800px 600px at 20% 30%, rgba(255, 230, 150, 0.8) 0%, transparent 50%),
        /* 大斑块2 - 浅粉色 */
        radial-gradient(ellipse 600px 800px at 80% 20%, rgba(255, 200, 220, 0.75) 0%, transparent 50%),
        /* 大斑块3 - 浅薄荷色 */
        radial-gradient(ellipse 700px 500px at 60% 80%, rgba(200, 255, 210, 0.7) 0%, transparent 50%),
        /* 大斑块4 - 浅紫色 */
        radial-gradient(ellipse 500px 700px at 90% 70%, rgba(230, 200, 255, 0.65) 0%, transparent 50%),
        /* 大斑块5 - 浅蓝色 */
        radial-gradient(ellipse 900px 400px at 10% 90%, rgba(200, 230, 255, 0.7) 0%, transparent 50%),
        /* 基础渐变背景 */
        linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

/* 为了确保背景生效，添加额外的选择器 */
body.bg-enhanced {
    background: 
        /* 大斑块1 - 浅奶黄色 */
        radial-gradient(ellipse 800px 600px at 20% 30%, rgba(255, 230, 150, 0.8) 0%, transparent 50%),
        /* 大斑块2 - 浅粉色 */
        radial-gradient(ellipse 600px 800px at 80% 20%, rgba(255, 200, 220, 0.75) 0%, transparent 50%),
        /* 大斑块3 - 浅薄荷色 */
        radial-gradient(ellipse 700px 500px at 60% 80%, rgba(200, 255, 210, 0.7) 0%, transparent 50%),
        /* 大斑块4 - 浅紫色 */
        radial-gradient(ellipse 500px 700px at 90% 70%, rgba(230, 200, 255, 0.65) 0%, transparent 50%),
        /* 大斑块5 - 浅蓝色 */
        radial-gradient(ellipse 900px 400px at 10% 90%, rgba(200, 230, 255, 0.7) 0%, transparent 50%),
        /* 基础渐变背景 */
        linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

/* 增强卡片的层次感和毛玻璃效果 */
.bg-enhanced .layui-card {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.3s ease !important;
}

.bg-enhanced .layui-card:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px);
}

/* 优化产品卡片 */
.bg-enhanced .product-card {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    transition: all 0.3s ease !important;
}

.bg-enhanced .product-card:hover {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}

/* 分类卡片增强 */
.bg-enhanced .category-card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

.bg-enhanced .category-card:hover {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1) !important;
}

/* 最新产品项目增强 */
.bg-enhanced .latest-item {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    transition: all 0.3s ease !important;
}

.bg-enhanced .latest-item:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(14px);
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

/* 网站头部增强 */
.bg-enhanced .site-header {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* 搜索框增强 */
.bg-enhanced .search-box .layui-input-group {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* 面包屑导航增强 */
.bg-enhanced .breadcrumb {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .bg-enhanced,
    body.bg-enhanced {
        background: 
            /* 移动端简化背景 - 3个主要斑块 */
            radial-gradient(ellipse 400px 300px at 30% 40%, rgba(255, 220, 120, 0.7) 0%, transparent 50%),
            radial-gradient(ellipse 300px 400px at 70% 30%, rgba(255, 180, 200, 0.65) 0%, transparent 50%),
            radial-gradient(ellipse 350px 250px at 40% 80%, rgba(180, 255, 190, 0.6) 0%, transparent 50%),
            linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
        background-attachment: scroll !important; /* 移动端使用scroll避免性能问题 */
    }
    
    /* 移动端禁用复杂效果 */
    .bg-enhanced .product-card:hover,
    .bg-enhanced .category-card:hover,
    .bg-enhanced .latest-item:hover,
    .bg-enhanced .layui-card:hover {
        transform: none !important;
        backdrop-filter: blur(6px) !important;
    }
}

/* 性能优化 */
@media (prefers-reduced-motion: reduce) {
    .bg-enhanced .product-card:hover,
    .bg-enhanced .category-card:hover,
    .bg-enhanced .latest-item:hover,
    .bg-enhanced .layui-card:hover {
        transform: none !important;
        transition: none !important;
    }
}

/* 低性能设备优化 */
@media (max-width: 480px) {
    .bg-enhanced,
    body.bg-enhanced {
        background: 
            /* 极简背景 - 只保留2个斑块 */
            radial-gradient(ellipse 300px 200px at 30% 40%, rgba(255, 210, 100, 0.6) 0%, transparent 50%),
            radial-gradient(ellipse 250px 300px at 70% 60%, rgba(255, 170, 190, 0.55) 0%, transparent 50%),
            linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    }
    
    /* 禁用毛玻璃效果 */
    .bg-enhanced .layui-card,
    .bg-enhanced .product-card,
    .bg-enhanced .category-card,
    .bg-enhanced .latest-item {
        backdrop-filter: none !important;
    }
}

/* ===== 视频背景遮罩保护规则 ===== */
/* 确保视频遮罩层样式不被覆盖 - 仿微信弹窗遮罩效果 */
#videoOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -998 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    display: block !important;
}
/* 有视频背景时，不应用静态背景 */
body.bg-enhanced.has-video-background {
    background: transparent !important;
}