/* Ethereal Dark Backgrounds - Override all existing styles */

/* Force deep black backgrounds on all sections */
section#about,
section#services, 
section#sectors,
section#technologies,
section#results,
section#testimonials,
section#blog,
footer.footer {
  background: #000000 !important;
  background-image: 
    radial-gradient(ellipse 1200px 600px at 20% 30%, rgba(15, 23, 42, 0.6) 0%, transparent 70%),
    radial-gradient(ellipse 1000px 500px at 80% 70%, rgba(30, 41, 59, 0.5) 0%, transparent 70%),
    radial-gradient(ellipse 1400px 300px at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 80%),
    radial-gradient(ellipse 800px 400px at 10% 90%, rgba(147, 51, 234, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, 
      hsl(220, 30%, 4%) 0%,
      hsl(220, 25%, 2%) 25%,
      hsl(220, 20%, 1%) 50%,
      hsl(220, 25%, 2%) 75%,
      hsl(220, 30%, 4%) 100%
    ) !important;
  position: relative;
  overflow: hidden;
  animation: etherealPulse 8s ease-in-out infinite;
}

/* Digital mist effects */
#about::before,
#services::before,
#sectors::before,
#technologies::before,
#results::before,
#testimonials::before,
#blog::before,
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse 600px 300px at 25% 40%, rgba(59, 130, 246, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 500px 250px at 75% 60%, rgba(147, 51, 234, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 800px 150px at 50% 90%, rgba(234, 179, 8, 0.04) 0%, transparent 80%),
    radial-gradient(ellipse 400px 200px at 10% 20%, rgba(168, 85, 247, 0.05) 0%, transparent 60%);
  animation: digitalMist 25s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

/* Floating particles and lines */
#about::after,
#services::after,
#sectors::after,
#technologies::after,
#results::after,
#testimonials::after,
#blog::after,
.footer::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background-image: 
    radial-gradient(1px 1px at 80px 120px, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(0.8px 0.8px at 200px 80px, rgba(59, 130, 246, 0.1), transparent),
    radial-gradient(0.6px 0.6px at 300px 200px, rgba(147, 51, 234, 0.08), transparent),
    radial-gradient(0.4px 0.4px at 150px 300px, rgba(234, 179, 8, 0.06), transparent),
    radial-gradient(0.5px 0.5px at 45px 280px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(0.3px 0.3px at 320px 150px, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(0.4px 0.4px at 180px 50px, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(0.2px 0.2px at 250px 320px, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(0.3px 0.3px at 120px 200px, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(0.2px 0.2px at 380px 100px, rgba(255, 255, 255, 0.2), transparent),
    linear-gradient(45deg, transparent 49.8%, rgba(255, 255, 255, 0.02) 50%, transparent 50.2%),
    linear-gradient(-45deg, transparent 49.9%, rgba(59, 130, 246, 0.015) 50%, transparent 50.1%),
    linear-gradient(90deg, transparent 49.95%, rgba(147, 51, 234, 0.01) 50%, transparent 50.05%);
  background-repeat: repeat;
  background-size: 400px 400px, 300px 300px, 500px 500px, 200px 200px, 600px 600px, 500px 500px, 400px 400px, 450px 450px, 350px 350px, 550px 550px, 250px 250px, 300px 300px, 400px 400px;
  animation: silentDrift 45s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* Distant stars layer with higher specificity */
section#about::after,
section#services::after,
section#sectors::after,
section#technologies::after,
section#results::after,
section#testimonials::after,
section#blog::after,
footer.footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 150px 100px, rgba(255, 255, 255, 0.4), transparent 2px),
    radial-gradient(0.8px 0.8px at 300px 250px, rgba(255, 255, 255, 0.3), transparent 1.5px),
    radial-gradient(1px 1px at 450px 180px, rgba(255, 255, 255, 0.35), transparent 2px),
    radial-gradient(0.6px 0.6px at 80px 320px, rgba(255, 255, 255, 0.25), transparent 1px),
    radial-gradient(1.1px 1.1px at 380px 80px, rgba(255, 255, 255, 0.4), transparent 2px),
    radial-gradient(0.7px 0.7px at 220px 380px, rgba(255, 255, 255, 0.3), transparent 1.5px),
    radial-gradient(1.3px 1.3px at 50px 200px, rgba(255, 255, 255, 0.35), transparent 2px),
    radial-gradient(0.5px 0.5px at 420px 300px, rgba(255, 255, 255, 0.2), transparent 1px),
    radial-gradient(0.9px 0.9px at 180px 50px, rgba(255, 255, 255, 0.3), transparent 1.5px),
    radial-gradient(0.4px 0.4px at 350px 400px, rgba(255, 255, 255, 0.2), transparent 1px);
  background-repeat: repeat;
  background-size: 600px 550px, 700px 650px, 650px 600px, 550px 500px, 750px 700px, 600px 550px, 500px 450px, 800px 750px, 550px 500px, 700px 650px;
  animation: gentleStarTwinkle 15s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}

/* Ensure content stays above effects */
#about .container,
#services .container,
#sectors .container,
#technologies .container,
#results .container,
#testimonials .container,
#blog .container,
.footer .container {
  position: relative;
  z-index: 10;
}

/* Animations for ethereal effects */
@keyframes digitalMist {
  0% { transform: translateX(-15px) translateY(-8px) scale(1); opacity: 0.6; }
  25% { transform: translateX(8px) translateY(-15px) scale(1.03); opacity: 0.8; }
  50% { transform: translateX(-8px) translateY(8px) scale(0.97); opacity: 0.7; }
  75% { transform: translateX(12px) translateY(-5px) scale(1.02); opacity: 0.75; }
  100% { transform: translateX(-15px) translateY(-8px) scale(1); opacity: 0.6; }
}

@keyframes silentDrift {
  0% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0.8; }
  25% { transform: translateX(-60px) translateY(-30px) rotate(1deg); opacity: 1; }
  50% { transform: translateX(-120px) translateY(-60px) rotate(2deg); opacity: 0.9; }
  75% { transform: translateX(-180px) translateY(-90px) rotate(1deg); opacity: 0.95; }
  100% { transform: translateX(-240px) translateY(-120px) rotate(0deg); opacity: 0.8; }
}

/* Add pulsing glow effect */
@keyframes etherealPulse {
  0%, 100% { box-shadow: inset 0 0 60px rgba(59, 130, 246, 0.1), inset 0 0 100px rgba(147, 51, 234, 0.05); }
  50% { box-shadow: inset 0 0 80px rgba(59, 130, 246, 0.15), inset 0 0 120px rgba(147, 51, 234, 0.08); }
}

/* Gentle star twinkling animation */
@keyframes gentleStarTwinkle {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  25% { opacity: 0.2; transform: scale(0.95); }
  50% { opacity: 0.6; transform: scale(1.05); }
  75% { opacity: 0.3; transform: scale(0.98); }
}

/* Original star twinkling for footer */
@keyframes starTwinkle {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  20% { opacity: 0.2; transform: scale(0.9); }
  40% { opacity: 0.8; transform: scale(1.1); }
  60% { opacity: 0.4; transform: scale(0.95); }
  80% { opacity: 0.7; transform: scale(1.05); }
}