/* =================== 科技感动态粒子背景 =================== */

/* 确保父容器能显示伪元素 */
.visual-section.dark,
.vision-section,
footer {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* 粒子容器伪元素 */
.visual-section.dark::before,
.vision-section::before,
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;  /* 确保粒子背景不会覆盖文字 */
  pointer-events: none;

  /* 背景粒子和光线效果 */
  background: 
    radial-gradient(circle, rgba(77,163,255,0.15) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,77,163,0.1) 1px, transparent 2px),
    linear-gradient(45deg, rgba(77,163,255,0.05), rgba(255,77,163,0.05));
  
  background-size: 40px 40px, 80px 80px, 100% 100%;
  animation: techBackgroundMove 30s linear infinite;
}

/* 动画移动粒子 */
@keyframes techBackgroundMove {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 100px 100px, -80px 80px, 0 0; }
}

/* 内容层在前面 */
.visual-section.dark > *,
.vision-section > *,
footer > * {
  /*position: relative;*/
  /*z-index: 1;*/
}

/* 保证粒子背景不遮挡页面内容 */
.visual-section.dark,
.vision-section,
footer {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* 为Canvas设置基础样式 */
.canvas-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}


/* 可选发光渐变叠加 */
.visual-section.dark {
  background-image: linear-gradient(135deg, rgba(77,163,255,0.03), rgba(255,77,163,0.03)), 
                    linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0.95));
}

.vision-section {
  background-image: linear-gradient(135deg, rgba(77,163,255,0.03), rgba(255,77,163,0.03)), 
                    linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0.95));
}

footer {
  background-image: radial-gradient(circle at top left, rgba(77,163,255,0.05), transparent),
                    radial-gradient(circle at bottom right, rgba(255,77,163,0.05), transparent),
                    linear-gradient(to top, #0b0b0b, #111);
}