/* 统一背景样式 - 展现国际化中国制造业形象 */
.unified-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -20; /* 降低层级，确保hero背景在上方 */
  overflow: hidden;
}

/* 主背景渐变 - 更明亮的蓝色调 */
.bg-main-gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0a4d75 0%, #1e6997 25%, #3687b8 50%, #4a97c3 75%, #66b0d8 100%);
}

/* 钢铁网格纹理 */
.steel-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.7;
}

/* 中国地图轮廓元素 */
.china-outline {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 35%;
  height: 60%;
  background-image: url('../img/china-outline.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.15;
}

/* 全球贸易路线 */
.world-trade-routes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/world-map.png');
  background-size: cover;
  background-position: center;
  opacity: 0.1;
}

/* 动态光束效果 */
.light-beam {
  position: absolute;
  background: linear-gradient(90deg, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.08) 20%, 
    rgba(255,255,255,0.12) 50%, 
    rgba(255,255,255,0.08) 80%, 
    rgba(255,255,255,0) 100%);
  transform-origin: center;
}

.light-beam-1 {
  top: 20%;
  left: -10%;
  width: 120%;
  height: 5%;
  transform: rotate(15deg);
  animation: moveBeam 20s linear infinite;
}

.light-beam-2 {
  top: 60%;
  left: -10%;
  width: 120%;
  height: 8%;
  transform: rotate(-20deg);
  animation: moveBeam 25s linear infinite;
  animation-delay: 5s;
}

/* 钢材质感装饰 */
.steel-plate {
  position: absolute;
  border-radius: 5px;
  background: linear-gradient(135deg, 
    rgba(180,200,220,0.25) 0%, 
    rgba(150,170,190,0.2) 100%);
  box-shadow: inset 0 0 15px rgba(255,255,255,0.2);
}

.plate-1 {
  top: 15%;
  left: 10%;
  width: 200px;
  height: 150px;
  transform: rotate(10deg);
}

.plate-2 {
  bottom: 20%;
  right: 15%;
  width: 250px;
  height: 180px;
  transform: rotate(-5deg);
}

.plate-3 {
  top: 40%;
  right: 8%;
  width: 180px;
  height: 220px;
  transform: rotate(15deg);
}

/* 丝路元素 */
.silk-road {
  position: absolute;
  bottom: 20%;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, 
    rgba(255,0,0,0) 0%, 
    rgba(255,0,0,0.3) 20%, 
    rgba(255,215,0,0.5) 50%, 
    rgba(255,0,0,0.3) 80%, 
    rgba(255,0,0,0) 100%);
  box-shadow: 0 0 15px rgba(255,215,0,0.6);
  animation: silkRoadPulse 8s ease-in-out infinite;
}

/* 制造业符号 */
.manufacturing-symbol {
  position: absolute;
  opacity: 0.15;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.symbol-1 {
  top: 25%;
  left: 15%;
  width: 100px;
  height: 100px;
  background-image: url('../img/gear-icon.svg');
}

.symbol-2 {
  bottom: 30%;
  right: 20%;
  width: 120px;
  height: 120px;
  background-image: url('../img/steel-icon.svg');
}

/* 内容覆盖层 - 减少暗度以增加亮度 */
.content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    transparent 0%,
    rgba(5, 28, 44, 0.2) 100%
  );
}

/* 滚动效果 */
.parallax-element {
  transition: transform 0.3s ease-out;
}

/* 为各区域增加透明度调整 */
.unified-section {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* Hero区域使用单独的背景图片，这里移除覆盖层 */

.tools::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  z-index: -1;
}

.testimonials::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(30, 100, 150, 0.3);
  z-index: -1;
}

/* 动画 */
@keyframes moveBeam {
  0% {
    transform: translateX(-30%) rotate(15deg);
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.7;
  }
  100% {
    transform: translateX(30%) rotate(15deg);
    opacity: 0;
  }
}

@keyframes silkRoadPulse {
  0%, 100% {
    opacity: 0.5;
    box-shadow: 0 0 10px rgba(255,215,0,0.5);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 20px rgba(255,215,0,0.8);
  }
}

/* 根据滚动位置应用的类 */
.section-active {
  position: relative;
  z-index: 5;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .china-outline {
    width: 60%;
    height: 40%;
  }
  
  .plate-1, .plate-2, .plate-3 {
    display: none;
  }
}

/* 添加浮动粒子动画 */
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-30px) translateX(15px);
  }
  50% {
    transform: translateY(-50px) translateX(-15px);
  }
  75% {
    transform: translateY(-20px) translateX(-25px);
  }
}