/* Cyberpunk Animated Background */
body {
  position: relative;
  overflow-x: hidden;
  background-color: #0d0221;
}

.cyberpunk-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(135deg, #0d0221 0%, #1a0933 50%, #0b0b2b 100%);
}

/* Further enhanced glowing grid with 3D perspective and even faster animation */
.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background-image: 
    linear-gradient(90deg, rgba(0, 255, 170, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(0, 255, 170, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.4;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: center top;
  animation: grid-move 10s linear infinite; /* Even faster animation (was 12s) */
}

@keyframes grid-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 120px; /* Increased movement range for smoother scrolling */
  }
}

/* Enhanced neon circuit lines */
.circuit-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

.circuit-line {
  position: absolute;
  background-color: #00ffaa;
  opacity: 0.8; /* More visible */
  box-shadow: 0 0 10px rgba(0, 255, 170, 0.8), 0 0 20px rgba(0, 255, 170, 0.6);
  animation: pulse 4s infinite alternate;
  transform-origin: center;
  transition: box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Circuit patterns - add node points */
.circuit-line:before {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #00ffaa;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0, 255, 170, 1), 0 0 25px rgba(0, 255, 170, 0.8);
  z-index: 3;
}

/* Add end point to horizontal lines */
.h-line1:before, .h-line2:before, .h-line3:before, .h-line4:before, .h-line5:before {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* Add end point to vertical lines */
.v-line1:before, .v-line2:before, .v-line3:before, .v-line4:before, .v-line5:before {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

/* Add start point to lines for connection appearance */
.circuit-line:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #00ffaa;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0, 255, 170, 1), 0 0 25px rgba(0, 255, 170, 0.8);
  z-index: 3;
}

/* Start points for horizontal lines */
.h-line1:after, .h-line2:after, .h-line3:after, .h-line4:after, .h-line5:after {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* Start points for vertical lines */
.v-line1:after, .v-line2:after, .v-line3:after, .v-line4:after, .v-line5:after {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* Horizontal circuit lines */
.h-line1 {
  top: 15%;
  left: -5%;
  width: 30%;
  height: 1px;
  animation-delay: 0s;
  transform: translateX(0);
  animation: pulse 4s infinite alternate, slideRight 15s infinite;
}

.h-line2 {
  top: 70%;
  left: 40%;
  width: 60%;
  height: 2px;
  animation-delay: 1s;
  transform: translateX(0);
  animation: pulse 4s infinite alternate, slideLeft 20s infinite;
}

.h-line3 {
  top: 40%;
  right: -5%;
  width: 25%;
  height: 1px;
  animation-delay: 2s;
  transform: translateX(0);
  animation: pulse 4s infinite alternate, slideLeft 12s infinite;
}

/* Vertical circuit lines */
.v-line1 {
  top: -5%;
  left: 20%;
  width: 1px;
  height: 25%;
  animation-delay: 0.5s;
  transform: translateY(0);
  animation: pulse 4s infinite alternate, slideDown 18s infinite;
}

.v-line2 {
  top: 30%;
  right: 30%;
  width: 2px;
  height: 45%;
  animation-delay: 1.5s;
  transform: translateY(0);
  animation: pulse 4s infinite alternate, slideUp 14s infinite;
}

.v-line3 {
  top: 80%;
  left: 60%;
  width: 1px;
  height: 20%;
  animation-delay: 2.5s;
  transform: translateY(0);
  animation: pulse 4s infinite alternate, slideUp 16s infinite;
}

/* Enhanced Circuit Lines & Data Flow Effects */

/* Glow overlay */
.glow-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 0, 255, 0.15) 0%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(circle at 70% 60%, rgba(0, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(circle at 50% 50%, rgba(57, 255, 20, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: glowPulse 10s infinite alternate;
}

@keyframes glowPulse {
  0% {
    opacity: 0.5;
    background-position: 30% 30%, 70% 60%, 50% 50%;
  }
  100% {
    opacity: 0.7;
    background-position: 35% 35%, 65% 55%, 45% 45%;
  }
}

/* Scan line effect */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(to bottom, transparent 50%, rgba(0, 255, 170, 0.03) 50%),
    linear-gradient(90deg, rgba(255, 0, 255, 0.03) 0%, rgba(0, 255, 255, 0.02) 50%, rgba(57, 255, 20, 0.03) 100%);
  background-size: 100% 3px, 100% 100%;
  pointer-events: none;
  opacity: 0.8;
  z-index: 2;
  animation: scanAnimation 8s linear infinite;
}

@keyframes scanAnimation {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 0 100px, 100px 0;
  }
}

/* Animation keyframes */
@keyframes pulse {
  0% { 
    opacity: 0.3;
    box-shadow: 0 0 5px rgba(0, 255, 170, 0.5), 0 0 10px rgba(0, 255, 170, 0.3);
  }
  50% { 
    opacity: 0.8;
    box-shadow: 0 0 10px rgba(0, 255, 170, 0.8), 0 0 20px rgba(0, 255, 170, 0.5), 0 0 30px rgba(0, 255, 170, 0.3);
  }
  100% { 
    opacity: 0.4;
    box-shadow: 0 0 5px rgba(0, 255, 170, 0.5), 0 0 10px rgba(0, 255, 170, 0.3);
  }
}

@keyframes slideRight {
  0% { transform: translateX(-100%); filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(30deg); }
  100% { transform: translateX(100%); filter: hue-rotate(0deg); }
}

@keyframes slideLeft {
  0% { transform: translateX(100%); filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(-30deg); }
  100% { transform: translateX(-100%); filter: hue-rotate(0deg); }
}

@keyframes slideUp {
  0% { transform: translateY(100%); filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(45deg); }
  100% { transform: translateY(-100%); filter: hue-rotate(0deg); }
}

@keyframes slideDown {
  0% { transform: translateY(-100%); filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(-45deg); }
  100% { transform: translateY(100%); filter: hue-rotate(0deg); }
}

@keyframes fadeInOut {
  0% { opacity: 0.1; }
  50% { opacity: 0.3; }
  100% { opacity: 0.1; }
}

@keyframes digitalRain {
  0% { 
    transform: translateY(-100px);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% { 
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* Enhanced circuit line effects */

/* New special effects */

/* Energy pulse effect */
.energy-pulse {
  background-color: #00ffff;
  position: absolute;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.5);
  filter: blur(1px);
  opacity: 0.7;
}

/* Glitch effect */
.cyber-glitch {
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Enhance particles */
.data-particle {
  will-change: transform, opacity;
  filter: blur(0.8px);
}

/* Make the background transitions smoother */
.cyberpunk-bg * {
  transition: box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Enhance parallax movement */
.parallax {
  will-change: transform;
  transform-style: preserve-3d;
}

/* Subtle pulse effect for non-animated elements */
.cyberpunk-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(57, 255, 20, 0.05) 0%, transparent 80%);
  animation: slowPulse 10s infinite alternate ease-in-out;
}

@keyframes slowPulse {
  0% {
    opacity: 0.3;
    transform: scale(0.95);
  }
  100% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}

/* Digital glitch effect */
@keyframes glitchAnimation {
  0% {
    opacity: 0;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
  20% {
    opacity: 0.8;
    transform: translateX(-5px);
    clip-path: inset(10% 0 20% 0);
  }
  40% {
    opacity: 0.6;
    transform: translateX(5px);
    clip-path: inset(30% 0 40% 0);
  }
  60% {
    opacity: 0.8;
    transform: translateX(-3px);
    clip-path: inset(50% 0 60% 0);
  }
  80% {
    opacity: 0.7;
    transform: translateX(3px);
    clip-path: inset(70% 0 80% 0);
  }
  100% {
    opacity: 0;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
}

/* Scanlines effect */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 3px
  );
  opacity: 0.8;
  pointer-events: none;
  z-index: 5;
}

/* Glow overlay for enhanced neon effect */
.glow-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(57, 255, 20, 0.05) 0%,
    rgba(0, 255, 255, 0.05) 30%,
    rgba(255, 0, 255, 0.05) 60%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0.8;
  mix-blend-mode: screen;
  animation: glowPulse 15s infinite alternate;
}

@keyframes glowPulse {
  0% {
    opacity: 0.7;
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    opacity: 0.8;
    filter: hue-rotate(30deg) brightness(1.1);
  }
  100% {
    opacity: 0.7;
    filter: hue-rotate(0deg) brightness(1);
  }
}

/* Digital distortion flicker - used for emphasizing glitches */
@keyframes digitalFlicker {
  0%, 100% {
    opacity: 1;
  }
  33% {
    opacity: 0.9;
  }
  66% {
    opacity: 0.85;
  }
  77% {
    opacity: 0.95;
  }
  88% {
    opacity: 0.8;
  }
}

/* Holographic data display effect */
.cyber-glitch {
  position: relative;
  overflow: hidden;
}

.cyber-glitch:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.2) 20%,
    rgba(0, 255, 255, 0.3) 20.5%,
    rgba(0, 255, 255, 0) 21%
  );
  animation: holoScan 10s linear infinite;
  pointer-events: none;
}

@keyframes holoScan {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Responsive adjustments for the cyberpunk background */
@media screen and (max-width: 768px) {
  .grid-overlay {
    background-size: 30px 30px; /* Smaller grid on smaller screens */
    transform: perspective(300px) rotateX(60deg);
  }

  /* Show fewer particles on mobile for better performance */
  .data-particle:nth-child(n+10) {
    display: none;
  }

  /* Adjust circuit lines positions for better mobile display */
  .h-line1 {
    width: 40%;
  }

  .h-line2 {
    width: 35%;
  }

  .v-line1, .v-line2, .v-line3, .v-line4, .v-line5 {
    height: 15%;
  }
}

/* High resolution screen enhancements */
@media screen and (min-width: 1920px) {
  .grid-overlay {
    background-size: 50px 50px; /* Larger grid on bigger screens */
  }
  
  /* Add more particles for high-res displays */
  .data-particle {
    opacity: 0.8; /* Make particles more visible */
  }

  /* Enhance scan lines for high DPI screens */
  .scan-line {
    background: repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.1) 3px,
      rgba(0, 0, 0, 0.1) 4px
    );
  }
}

/* Performance optimizations */
.cyberpunk-bg * {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Reduce animations when user prefers reduced motion */
@media (prefers-reduced-motion) {
  .rain-column, .grid-overlay, .hex, .city-buildings, .glow-overlay,
  .data-particle, .energy-pulse {
    animation-duration: 60s; /* Much slower animations */
    transition-duration: 1s;
  }
  
  .scan-line {
    display: none; /* Disable scan lines for reduced motion */
  }
}