/* 视差背景样式 */
:root {
  --primary-color: #00c6ff;
  --secondary-color: #0072ff;
  --light-color: #f5f6fa;
  --dark-color: #0a192f;
  --accent-color: #64ffda;
  --grid-color: rgba(0, 198, 255, 0.07);
  --particle-color: rgba(0, 198, 255, 0.5);
  --connection-color: rgba(0, 198, 255, 0.3);
  --glow-color: rgba(0, 198, 255, 0.15);
}

/* 视差容器 */
.parallax-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 视差层 */
.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 背景层 - 深色渐变 */
.bg-layer {
  background: linear-gradient(135deg, var(--dark-color) 0%, #050b18 100%);
}

/* 网格层 */
.grid-layer {
  background-image: 
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.7;
  transform-style: preserve-3d;
}

/* 粒子层 */
.particles-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.particle {
  position: absolute;
  background-color: var(--particle-color);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--primary-color);
  animation: float 15s infinite ease-in-out;
}

/* 专利图标层 */
.icon-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.ip-icon {
  position: absolute;
  opacity: 0.15;
  filter: drop-shadow(0 0 5px var(--primary-color));
  transform-origin: center;
  animation: pulse 8s infinite ease-in-out;
}

.ip-icon.patent {
  background: url('../images/patent-icon.svg') no-repeat center center;
  background-size: contain;
}

.ip-icon.copyright {
  background: url('../images/copyright-icon.svg') no-repeat center center;
  background-size: contain;
}

.ip-icon.trademark {
  background: url('../images/trademark-icon.svg') no-repeat center center;
  background-size: contain;
}

.ip-icon.idea {
  background: url('../images/idea-icon.svg') no-repeat center center;
  background-size: contain;
}

/* 连接线层 */
.connections-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.connection {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--connection-color), transparent);
  transform-origin: left center;
  animation: fadeInOut 10s infinite ease-in-out;
  box-shadow: 0 0 8px var(--primary-color);
}

/* 光晕效果 */
.glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-color) 0%, rgba(0, 198, 255, 0) 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform, left, top;
  filter: blur(10px);
}

/* 添加数字矩阵效果 */
.matrix-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.05;
}

.matrix-column {
  position: absolute;
  top: -20%;
  color: var(--primary-color);
  font-family: monospace;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  animation: matrix-fall linear infinite;
}

/* 添加电路板效果 */
.circuit-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/circuit-pattern.png');
  background-size: cover;
  opacity: 0.05;
  mix-blend-mode: screen;
}

/* 添加扫描线效果 */
.scanline-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.1;
  pointer-events: none;
}

.scanline {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color);
  box-shadow: 0 0 10px var(--primary-color);
  animation: scanline 3s linear infinite;
}

/* 内容容器 */
.content-container {
  position: relative;
  z-index: 1;
}

/* 动画 */
@keyframes float {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(10px, -10px);
  }
  50% {
    transform: translate(20px, 0);
  }
  75% {
    transform: translate(10px, 10px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.15;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.2;
  }
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes matrix-fall {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(1000%);
  }
}

@keyframes scanline {
  0% {
    top: -5%;
  }
  100% {
    top: 105%;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .grid-layer {
    background-size: 30px 30px;
  }
}

/* 确保内容在视差背景之上 */
body {
  position: relative;
  z-index: 1;
}

/* 确保所有区块在视差背景之上 */
.navbar, section, .footer {
  position: relative;
  z-index: 2;
}