/* ========================================
  	网格，点阵渐变背景
   ======================================== */
/* 2. 数据流线  ---在用*/
.bg-data-flow {
  background-color: #2c0000;
  background-image: repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(0,0,0,0.03) 5px, rgba(0,0,0,0.03) 5px, transparent 10px, transparent 10px);
}
/* 3. 矩阵网格 */
.bg-matrix-grid {
  background-color: #ffffff;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(0deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 10px 10px;
}
/* 5. 坐标网格（推荐） */
.bg-coordinate {
  background-color: #ffffff;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(0deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 10px 10px;
}
.bg-coordinate::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(circle at 0 0, rgba(255,0,0,0.08) 0, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
/* 6. 光纤纹理  ---浅色背景 */
.bg-fiber {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, rgba(0,0,0,0.04) 6px, transparent 1px, transparent 1px);
}
/* 8. 雷达扫描   ---goods-0使用*/
.bg-radar {
  background-color: #180000;
  background-image: radial-gradient(circle at 50% 50%, rgb(175 175 175 / 35%) 0, transparent 1px), radial-gradient(circle at 50% 50%, rgb(96 83 83 / 32%) 0, #dd1f1f00 2px);
  background-size: 20px 20px, 30px 30px;
}

/* 9. 二进制代码流 */
.bg-binary {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(360deg, #32313147, #04040400 1px, rgb(0 0 0 / 2%) 1px, rgb(0 0 0 / 2%) 1px, #00000000 1px, transparent 2px);
}

/* 10. 3D等距网格 ---goods-1在用*/
.bg-isometric {
  background-color: #072046;
  background-image: repeating-linear-gradient(0deg, rgb(0 0 0 / 15%) 0px, rgb(255 243 243 / 9%) 1px, transparent 1px, transparent 20px);
}

.bg-dot-matrix {
  background-color: #ffffff;
  background-image: radial-gradient(circle at 2px 2px, rgb(0 0 0 / 15%) 1px, transparent 1px);
  background-size: 16px 16px;
}
.bg-linen {
  background-color: #faf8f5;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.02) 0px,
    rgba(0, 0, 0, 0.02) 1px,
    transparent 1px,
    transparent 8px
  );
}
 /* 2. 微斜线纹理 */
.bg-lines {
  background-color: #f5f7fa;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.02) 0px,
    rgba(0, 0, 0, 0.02) 2px,
    transparent 2px,
    transparent 12px
  );
}

/* 红色网格线 */
.grid-red::before {
    background-image: 
        linear-gradient(to bottom, rgba(255, 0, 0, 0.08) 1px, transparent 1px),
        linear-gradient(to right, rgba(255, 0, 0, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
}
/* 点阵网格版本 */
.dot-grid::before {
    background-image: radial-gradient(circle, #e0e0e0 1px, transparent 1px);
    background-size: 30px 30px;
}
/* 红点网格版本 */
.dot-red::before {
    background-image: radial-gradient(circle, rgba(255, 0, 0, 0.1) 1.5px, transparent 1.5px);
    background-size: 30px 30px;
}
/* 叠加渐变光晕 */
.glow::after {
    content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 0, 0, 0.03), transparent 60%);      
}
/* ========================================
   纯色渐变背景
   ======================================== */
/* 基础渐变 - 从上到下 */
.gradient-vertical {background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);}
/* 基础渐变 - 从左到右 */
.gradient-horizontal {background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);}
/* 基础渐变 - 对角线下 */
.gradient-diagonal {background: linear-gradient(135deg, #f8f9fa 0%, #dee2e6 100%);}
/* 浅色柔和渐变（暖色系） */
.gradient-warm {background: linear-gradient(120deg, #fdfbfb 0%, #f0e9e4 100%);}
/* 浅色柔和渐变（冷色系） */
.gradient-cool {background: linear-gradient(135deg, #0e3a5c 0%, #1a5f9e 100%);}
/* 科技感深色渐变（适合白色文字） */
.gradient-dark-tech {background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);}
/* 品牌红渐变（红色主题） */
.gradient-brand-red {background: linear-gradient(135deg, #c62828 0%, #b71c1c 50%, #8b0000 100%);}
/* 品牌红浅渐变（柔和红色系） */
.gradient-brand-light {background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);}
/* 朦胧光晕渐变（中心向外） */
.gradient-radial {background: radial-gradient(circle at center, #ffffff 0%, #f5f5f5 100%);}
/* 顶部光效渐变（模拟光源从顶部照射） */
.gradient-top-glow {background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.8) 0%, #f0f0f0 70%);}
/* 双色渐变（红白过渡） */
.gradient-red-white {background: linear-gradient(135deg, #fff5f5 0%, #ffebee 50%, #ffcdd2 100%);}
/* ========================================
   射线类型 & 高级渐变背景
   ======================================== */
/* 射线渐变 - 从中心向外辐射（爆炸射线效果） */
.gradient-radial-rays {background: radial-gradient(circle at center, #ffffff 0%, #f5f5f5 20%, #e8e8e8 40%, #f5f5f5 60%, #ffffff 80%, #f0f0f0 100%);}
/* 射线渐变 - 从左上角向外辐射 */
.gradient-radial-tl {background: radial-gradient(circle at 0% 0%, #fff5f5 0%, #ffebee 40%, #f5f5f5 100%);}
/* 射线渐变 - 从右下角向外辐射 */
.gradient-radial-br {background: radial-gradient(circle at 100% 100%, #e8f0f5 0%, #d9e4ed 40%, #f5f5f5 100%);}
/* 双向射线渐变（X形交叉光效）----可用 */
.gradient-x-rays {
    background: linear-gradient(45deg, rgba(255,0,0,0.03) 0%, transparent 50%),
    linear-gradient(-45deg, rgba(255,0,0,0.03) 0%, transparent 50%),
    linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
}
/* 锥形渐变 - 饼图效果（灰色系） ---浅灰色背景 --几何 */
.gradient-cone {
    background: conic-gradient(from 0deg, #fafafa 0deg 72deg, #f5f5f5 72deg 144deg, #eeeeee 144deg 216deg, #e0e0e0 216deg 288deg, 
    #f5f5f5 288deg 360deg);
}
/* 锥形渐变 - 柔和扫光效果 ---浅红色背景 --几何*/
.gradient-cone-soft {
    background: conic-gradient(from 90deg, 
    rgba(255,0,0,0.02) 0deg 120deg,rgba(255,0,0,0.08) 120deg 180deg,rgba(255,0,0,0.02) 180deg 240deg,transparent 240deg 360deg);
}
/* 锥形渐变 - 雷达扫描风格 --浅红色背景 --几何 */
.gradient-radar {background: conic-gradient(from 115deg, transparent 0deg 300deg,rgba(0, 0, 0, 0.02) 300deg 345deg,rgba(0, 0, 0, 0.05) 345deg 360deg);}

/* 多重渐变叠加 - 立体光晕 ---浅色背景 */
.gradient-multi-glow {
    background: radial-gradient(ellipse at 20% 30%, rgba(255,0,0,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(255,0,0,0.03) 0%, transparent 50%),linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
/* 波浪渐变（模拟波动射线）---浅色背景 */
.gradient-wave {
    background: repeating-linear-gradient(45deg,
    rgba(255,0,0,0.02) 0px,rgba(255,0,0,0.02) 20px,transparent 20px,transparent 40px,
    rgba(255,0,0,0.01) 40px,rgba(255,0,0,0.01) 60px,transparent 60px,transparent 80px),
    linear-gradient(135deg, #fdfbfb 0%, #f0e9e4 100%);
}
/* 星放射状渐变（光芒四射） ---浅红色背景 --几何 */
.gradient-starburst {
    background: conic-gradient(from 0deg,
    rgba(255,0,0,0.04) 0deg,transparent 10deg,rgba(255,0,0,0.02) 20deg,transparent 30deg,
    rgba(255,0,0,0.04) 40deg,transparent 50deg,rgba(255,0,0,0.02) 60deg,transparent 70deg,rgba(255,0,0,0.03) 80deg,transparent 90deg);
}
/*渐变+大网格  ---可用， ---商品列表，方案列表*/
.gradient-grid-large{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}
/* 可选：添加网格背景装饰 */
.gradient-grid-large::before {content: '';
	position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: 60px 60px;pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px);     
}
/* 可选：添加光晕效果 */
.gradient-grid-large::after {
    content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);   
}
/* ========================================
   炫酷渐变背景 - 科技感/未来感
   ======================================== */
/* 科幻扫描线渐变（显示器扫描效果）---good3使用 */
.gradient-scanline {background: linear-gradient(180deg, #0a0f1a 0%, #121826 50%, #0a0f1a 100%);position: relative;}
.gradient-scanline::before {
    content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0px,transparent 2px,rgba(0, 255, 255, 0.05) 2px,rgba(0, 255, 255, 0.05) 3px); 
}
.gradient-scanline::after {
    content: '';position: absolute;top: -100%;left: 0;width: 100%;height: 100%;pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 255, 255, 0.15) 50%, transparent 100%);
    animation: scan-line 4s ease-in-out infinite; 
}
@keyframes scan-line {
    0% { top: -100%; }
    100% { top: 100%; }
}
/* 脉冲光晕渐变（动态呼吸光效） ---good2使用 */
.gradient-pulse-glow {background: radial-gradient(ellipse at 50% 50%, #1a0f2e 0%, #0d0b1a 100%);position: relative;}
.gradient-pulse-glow::before {
    content: '';position: absolute;top: 50%;left: 50%;width: 200%;height: 200%;transform: translate(-50%, -50%);pointer-events: none;
    background: radial-gradient(circle, rgba(100, 80, 255, 0.08) 0%, transparent 50%);   
    animation: pulse-glow 3s ease-in-out infinite;   
}
@keyframes pulse-glow {
    0% { opacity: 0.3; width: 100%; height: 100%; }
    50% { opacity: 1; width: 140%; height: 140%; }
    100% { opacity: 0.3; width: 100%; height: 100%; }
}
/* 火焰流光渐变（动态火焰效果）---good5使用 */
.gradient-flame-flow {
    background: linear-gradient(135deg, #1a0505 0%, #4a1505 30%, #8b2a0a 50%, #4a1505 70%, #1a0505 100%);
    background-size: 200% 200%;position: relative;   
    animation: flame-pulse 4s ease infinite;
}
.gradient-flame-flow::before {
    content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 100, 0, 0.15) 0%, transparent 70%);  
}
@keyframes flame-pulse {
    0% { background-position: 0% 0%; opacity: 0.9; }
    50% { background-position: 100% 100%; opacity: 1; }
    100% { background-position: 0% 0%; opacity: 0.9; }
}
/* 变体1：深灰色背景 + 红色网格 + 十字射线  --good4使用*/
.grid-red-radial {background: linear-gradient(135deg, #1a1a1a 0%, #242424 100%);position: relative;}
.grid-red-radial::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-size: 30px 30px;
    background-image: linear-gradient(to bottom, rgb(86 86 86 / 20%) 1px, transparent 1px), linear-gradient(to right, rgb(62 61 61 / 20%) 1px, transparent 1px);
}
.grid-red-radial::after {
    content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;
    background: 
    repeating-linear-gradient(90deg, transparent 0px,transparent 60px,rgba(255, 0, 0, 0.04) 60px,rgba(255, 0, 0, 0.04) 61px),
    repeating-linear-gradient(0deg, transparent 0px,transparent 60px,rgba(255, 0, 0, 0.04) 60px,rgba(255, 0, 0, 0.04) 61px);   
}
/* 变体3：碳灰背景 + 红色网格 + 扫描射线动画 ---首页客户案例在用 */
.grid-red-scan {background: radial-gradient(ellipse at 50% 0%, #ffffff 0%,#ffffff 40%,#ffffff 100%);position: relative;overflow: hidden;}
.grid-red-scan::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 10px 10px;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgb(255 255 255 / 21%) 1px, transparent 1px), linear-gradient(to right, rgb(233 233 233 / 40%) 1px, transparent 1px);
}
.grid-red-scan::after {
    content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;pointer-events: none;
    background: conic-gradient(from 0deg,
    transparent 0deg 80deg,rgba(255, 0, 0, 0.04) 80deg 100deg,
    transparent 100deg 260deg,rgba(255, 0, 0, 0.04) 260deg 280deg,transparent 280deg 360deg);
    animation: radar-scan 6s linear infinite; 
}
@keyframes radar-scan {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}