/* Cyberpunk Backdrop - Vanilla CSS Version */
/* Applied only to Hero Section */

.cyberpunk-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none; /* Allow clicks to pass through */
}

/* Base Layer - Deep Dark Background */
.cyberpunk-backdrop__base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #05070A;
  /* Alternative darker option: #020204 */
}

/* Grid Layer - Subtle Geometric Pattern */
.cyberpunk-backdrop__grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.15;
  background-image: 
    /* Horizontal grid lines */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 19px,
      rgba(0, 255, 255, 0.03) 19px,
      rgba(0, 255, 255, 0.03) 20px
    ),
    /* Vertical grid lines */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 19px,
      rgba(0, 255, 255, 0.03) 19px,
      rgba(0, 255, 255, 0.03) 20px
    ),
    /* Dot pattern overlay for more texture */
    radial-gradient(
      circle at 10px 10px,
      rgba(0, 255, 255, 0.05) 1px,
      transparent 1px
    );
  background-size: 
    100% 20px,
    20px 100%,
    20px 20px;
  background-position: 0 0, 0 0, 0 0;
}

/* Circuit Layer - Circuit Board Traces */
.cyberpunk-backdrop__circuit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle%3E.circuit-line%7Bstroke:%2300ffff;stroke-width:0.5;fill:none;opacity:0.3;%7D.circuit-node%7Bfill:%2300ffff;opacity:0.4;%7D%3C/style%3E%3C/defs%3E%3Cg%3E%3C!-- Horizontal traces --%3E%3Cline x1='0' y1='50' x2='200' y2='50' class='circuit-line'/%3E%3Cline x1='0' y1='100' x2='200' y2='100' class='circuit-line'/%3E%3Cline x1='0' y1='150' x2='200' y2='150' class='circuit-line'/%3E%3C!-- Vertical traces --%3E%3Cline x1='50' y1='0' x2='50' y2='200' class='circuit-line'/%3E%3Cline x1='100' y1='0' x2='100' y2='200' class='circuit-line'/%3E%3Cline x1='150' y1='0' x2='150' y2='200' class='circuit-line'/%3E%3C!-- Diagonal traces --%3E%3Cline x1='0' y1='0' x2='50' y2='50' class='circuit-line'/%3E%3Cline x1='150' y1='50' x2='200' y2='100' class='circuit-line'/%3E%3Cline x1='50' y1='150' x2='100' y2='200' class='circuit-line'/%3E%3C!-- Circuit nodes/terminals --%3E%3Ccircle cx='50' cy='50' r='2' class='circuit-node'/%3E%3Ccircle cx='100' cy='100' r='2' class='circuit-node'/%3E%3Ccircle cx='150' cy='150' r='2' class='circuit-node'/%3E%3Ccircle cx='50' cy='150' r='2' class='circuit-node'/%3E%3Ccircle cx='150' cy='50' r='2' class='circuit-node'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
  /* Add subtle glow effect */
  filter: blur(0.5px);
}

/* Additional subtle glow effect */
.cyberpunk-backdrop__circuit::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at 30% 30%,
    rgba(0, 255, 255, 0.03) 0%,
    transparent 50%
  ),
  radial-gradient(
    ellipse at 70% 70%,
    rgba(0, 255, 255, 0.03) 0%,
    transparent 50%
  );
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cyberpunk-backdrop__grid {
    opacity: 0.1; /* Slightly less visible on mobile */
  }
  
  .cyberpunk-backdrop__circuit {
    opacity: 0.08;
  }
}