/* ============================================
   AI CIRCUIT BOARD BACKGROUND EFFECT
   SPARK4BRAND Brand Colors Integration
   ============================================ */

/* Circuit Board Container */
.ai-circuit-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* Ensure content stays above circuit background */
.hero-content {
  position: relative;
  z-index: 10;
}

/* Hexagon Grid - Navy/Gold/Green themed */
.hexagon {
  position: absolute;
  width: 60px;
  height: 35px;
  background: rgba(0, 26, 77, 0.1); /* Navy transparent */
  margin: 17.5px 0;
  border-left: solid 2px rgba(255, 215, 0, 0.3); /* Gold border */
  border-right: solid 2px rgba(255, 215, 0, 0.3);
  animation: hexFloat 20s ease-in-out infinite;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  left: 0;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 17.5px solid rgba(255, 215, 0, 0.3);
}

.hexagon:after {
  top: 100%;
  border-top: 17.5px solid rgba(255, 215, 0, 0.3);
}

/* Glowing hexagons - Gold accent */
.hexagon.glow {
  background: rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4),
              inset 0 0 10px rgba(255, 215, 0, 0.3);
  animation: hexFloat 20s ease-in-out infinite, hexGlow 3s ease-in-out infinite;
}

.hexagon.glow:before {
  border-bottom-color: rgba(255, 215, 0, 0.6);
}

.hexagon.glow:after {
  border-top-color: rgba(255, 215, 0, 0.6);
}

/* Circuit Lines - Navy base with Gold/Green accents */
.circuit-line {
  position: absolute;
  background: linear-gradient(90deg, 
    rgba(0, 26, 77, 0.3) 0%,
    rgba(255, 215, 0, 0.5) 50%,
    rgba(0, 204, 102, 0.4) 100%
  );
  height: 2px;
  transform-origin: left;
  opacity: 0.6;
}

.circuit-line.vertical {
  width: 2px;
  height: 150px;
  background: linear-gradient(180deg,
    rgba(0, 26, 77, 0.3) 0%,
    rgba(255, 215, 0, 0.5) 50%,
    rgba(0, 204, 102, 0.4) 100%
  );
}

/* Animated Light Pulses - Gold */
.light-pulse {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255, 215, 0, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.8),
              0 0 20px rgba(255, 215, 0, 0.6),
              0 0 30px rgba(255, 215, 0, 0.4);
  animation: pulseThroughCircuit 8s linear infinite;
}

/* Data Packets - Green accent */
.data-packet {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(0, 204, 102, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 204, 102, 0.8),
              0 0 15px rgba(0, 204, 102, 0.5);
  animation: dataFlow 6s linear infinite;
}

/* Circuit Nodes - Navy with Gold glow */
.circuit-node {
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgba(0, 26, 77, 0.8);
  border: 2px solid rgba(255, 215, 0, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
  animation: nodePulse 4s ease-in-out infinite;
}

/* Connection Lines between nodes - subtle Green */
.connection-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0, 204, 102, 0.4),
    transparent
  );
  transform-origin: left center;
  animation: connectionPulse 5s ease-in-out infinite;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes hexFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-15px) rotate(2deg);
  }
  66% {
    transform: translateY(15px) rotate(-2deg);
  }
}

@keyframes hexGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4),
                inset 0 0 10px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.7),
                inset 0 0 15px rgba(255, 215, 0, 0.5);
  }
}

@keyframes pulseThroughCircuit {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100vw + 100px));
    opacity: 0;
  }
}

@keyframes dataFlow {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(100vw, 50vh);
    opacity: 0;
  }
}

@keyframes nodePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8),
                0 0 35px rgba(0, 204, 102, 0.4);
  }
}

@keyframes connectionPulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  .hexagon {
    width: 40px;
    height: 23px;
  }
  
  .hexagon:before,
  .hexagon:after {
    border-left-width: 20px;
    border-right-width: 20px;
  }
  
  .hexagon:before {
    border-bottom-width: 11.5px;
  }
  
  .hexagon:after {
    border-top-width: 11.5px;
  }
  
  .circuit-node {
    width: 8px;
    height: 8px;
  }
  
  .light-pulse {
    width: 6px;
    height: 6px;
  }
}

/* ============================================
   INTENSITY VARIANTS
   ============================================ */

/* Subtle version for pages with more content */
.ai-circuit-bg.subtle .hexagon {
  opacity: 0.5;
}

.ai-circuit-bg.subtle .circuit-line {
  opacity: 0.3;
}

.ai-circuit-bg.subtle .light-pulse {
  opacity: 0.6;
}

/* Intense version for hero sections */
.ai-circuit-bg.intense .hexagon.glow {
  animation-duration: 2s;
}

.ai-circuit-bg.intense .light-pulse {
  animation-duration: 5s;
}

.ai-circuit-bg.intense .circuit-node {
  animation-duration: 2.5s;
}