/* 
 * Enhanced Tech AI Background Animation Styles
 * Optimized for readability, accessibility, and visual impact
 */

/* Main background container */
.tech-ai-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10; /* Keep background behind all content */
  overflow: hidden;
  animation: reveal-background 2s ease-out forwards;
}

/* Layering system for background elements */
.bg-image-layer {
  z-index: -9;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/ai-background.jpg'); /* Your actual background image */
  background-size: cover;
  background-position: center;
  opacity: 1; /* Reduced opacity for better foreground visibility */
  /* filter: saturate(0.7) brightness(0.9); Lower saturation and brightness */
  animation: subtle-zoom 40s infinite alternate ease-in-out;
}

/* Grid pattern overlay - more subtle for better foreground visibility */
.grid-pattern {
  z-index: -8;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(to right, rgba(0, 128, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 128, 255, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.25; /* More subtle overlay */
}

/* Improved gradient overlay with reduced intensity
.gradient-overlay {
  z-index: -7;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 40, 100, 0.15) 100%
  );
  animation: gradient-shift 20s infinite alternate ease-in-out;
} */

/* Softer light rays for less distraction */
.light-rays {
  z-index: -6;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
              transparent 0%, 
              rgba(255, 255, 255, 0.03) 30%, 
              transparent 70%);
  animation: light-sweep 15s infinite ease-in-out;
}

/* Glowing orbs container */
.glow-orbs {
  z-index: -5;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Individual orbs with reduced intensity */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px); /* Increased blur for softer effect */
  opacity: 0.3; /* Reduced opacity */
  animation: orb-float 20s infinite ease-in-out;
  mix-blend-mode: screen;
}

.orb-1 {
  width: 400px;
  height: 400px;
  background-color: rgba(100, 180, 255, 0.25); /* Reduced blue tint intensity */
  top: 20%;
  left: 25%;
  animation-delay: 0s;
}

.orb-2 {
  width: 350px;
  height: 350px;
  background-color: rgba(255, 165, 0, 0.2); /* Reduced orange tint intensity */
  top: 60%;
  left: 60%;
  animation-delay: -5s;
}

.orb-3 {
  width: 300px;
  height: 300px;
  background-color: rgba(100, 220, 180, 0.2); /* Reduced teal tint intensity */
  top: 30%;
  left: 70%;
  animation-delay: -10s;
}

/* Animation keyframes */
@keyframes reveal-background {
  0% {
      opacity: 0;
      filter: blur(10px);
  }
  100% {
      opacity: 1;
      filter: blur(0);
  }
}

@keyframes subtle-zoom {
  0% {
      transform: scale(1);
      filter: saturate(1.2) brightness(1);
  }
  50% {
      filter: saturate(1.3) brightness(1.05);
  }
  100% {
      transform: scale(1.05);
      filter: saturate(1.2) brightness(1);
  }
}

@keyframes gradient-shift {
  0% {
      opacity: 0.1;
  }
  100% {
      opacity: 0.15;
  }
}

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

@keyframes light-sweep {
  0%, 100% {
      transform: rotate(0deg) scale(1.5);
      opacity: 0.2;
  }
  50% {
      transform: rotate(180deg) scale(2);
      opacity: 0.3;
  }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .grid-pattern {
      background-size: 15px 15px;
  }
  
  .orb {
      opacity: 0.2; /* Further reduce opacity on mobile */
      filter: blur(40px);
  }
  
  .bg-image-layer {
      opacity: 0.35; /* Slightly reduce background opacity on mobile */
  }
}

/* Adjustments for very small screens */
@media (max-width: 480px) {
  .orb {
      opacity: 0.15;
      filter: blur(30px);
  }
  
  .grid-pattern {
      opacity: 0.2;
  }
}


/* Add to tech-background.css */
.diagram-section {
  position: relative;
  z-index: 2;
}

.mermaid svg {
  z-index: 3 !important;
}