/* =========================================================
   HEADER BACKGROUND ANIMATION EFFECTS
   Subtle animations for professional header appearance
   ========================================================= */

/* =========================================================
   1) HEADER EFFECTS CONTAINER
   ========================================================= */
.header__background-effects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}

/* Ensure header content stays above effects */
.header-container {
  position: relative;
  z-index: 10;
}

/* =========================================================
   2) ANIMATED MESH GRADIENT
   ========================================================= */
.header__mesh-gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(
    135deg,
    rgba(31, 140, 255, 0.08) 0%,
    rgba(139, 92, 246, 0.06) 25%,
    rgba(16, 185, 129, 0.08) 50%,
    rgba(249, 115, 22, 0.06) 75%,
    rgba(31, 140, 255, 0.08) 100%
  );
  background-size: 200% 200%;
  animation: headerMeshFlow 20s ease infinite;
}

@keyframes headerMeshFlow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* =========================================================
   3) FLOATING PARTICLES (Minimal)
   ========================================================= */
.header__particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.header__particle {
  position: absolute;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  opacity: 0;
  animation: headerParticleFloat var(--duration, 10s) var(--delay, 0s) infinite ease-in-out;
}

@keyframes headerParticleFloat {
  0% {
    transform: translate(var(--x-start), var(--y-start)) scale(0);
    opacity: 0;
  }
  15% {
    opacity: var(--opacity, 0.4);
  }
  85% {
    opacity: var(--opacity, 0.4);
  }
  100% {
    transform: translate(var(--x-end), var(--y-end)) scale(1);
    opacity: 0;
  }
}

/* =========================================================
   4) SUBTLE GLOW LINES
   ========================================================= */
.header__glow-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.3;
}

.header__glow-line {
  position: absolute;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--line-color, rgba(56, 255, 181, 0.5)) 50%,
    transparent 100%
  );
  height: 1px;
  width: 100%;
  animation: headerGlowPulse var(--duration, 5s) var(--delay, 0s) infinite ease-in-out;
}

@keyframes headerGlowPulse {
  0%, 100% {
    opacity: 0.2;
    box-shadow: 0 0 3px var(--line-color, rgba(56, 255, 181, 0.3));
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 8px var(--line-color, rgba(56, 255, 181, 0.5)),
                0 0 15px var(--line-color, rgba(56, 255, 181, 0.2));
  }
}

/* =========================================================
   5) RADIAL GLOW (Center to edges)
   ========================================================= */
.header__radial-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(31, 140, 255, 0.1) 0%,
    rgba(31, 140, 255, 0.05) 30%,
    transparent 70%
  );
  animation: headerRadialPulse 8s ease-in-out infinite;
}

@keyframes headerRadialPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* =========================================================
   6) SCANNING LINE EFFECT
   ========================================================= */
.header__scan-line {
  position: absolute;
  width: 100%;
  height: 2px;
  top: 0;
  left: -100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(56, 255, 181, 0.6) 50%,
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(56, 255, 181, 0.5);
  animation: headerScanMove 8s linear infinite;
}

@keyframes headerScanMove {
  0% {
    left: -100%;
    top: 0%;
  }
  50% {
    left: 100%;
    top: 50%;
  }
  100% {
    left: -100%;
    top: 100%;
  }
}

/* =========================================================
   7) SCROLLED STATE EFFECTS
   ========================================================= */
.site-header.scrolled .header__background-effects {
  opacity: 0.8;
}

.site-header.scrolled .header__mesh-gradient {
  animation-duration: 15s;
}

/* =========================================================
   8) PERFORMANCE OPTIMIZATIONS
   ========================================================= */
.header__background-effects,
.header__background-effects * {
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* =========================================================
   9) RESPONSIVE ADJUSTMENTS
   ========================================================= */
@media (max-width: 768px) {
  .header__background-effects {
    opacity: 0.4;
  }
  
  .header__particles {
    display: none; /* Remove particles on mobile for performance */
  }
  
  .header__scan-line {
    display: none;
  }
}

@media (max-width: 576px) {
  .header__mesh-gradient {
    opacity: 0.8;
  }
  
  .header__glow-lines {
    opacity: 0.2;
  }
}

/* =========================================================
   10) ACCESSIBILITY - PREFERS REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .header__background-effects * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .header__background-effects {
    opacity: 0.3;
  }
}

/* =========================================================
   11) DARK MODE / THEME VARIATIONS
   ========================================================= */
.header__background-effects[data-theme="tech"] {
  --primary-glow: rgba(31, 140, 255, 0.8);
  --secondary-glow: rgba(56, 255, 181, 0.6);
}

.header__background-effects[data-theme="elegant"] {
  --primary-glow: rgba(139, 92, 246, 0.8);
  --secondary-glow: rgba(168, 85, 247, 0.6);
}

/* =========================================================
   12) SUBTLE NOISE TEXTURE (Optional Enhancement)
   ========================================================= */
.header__noise-texture {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  animation: noiseMove 8s steps(10) infinite;
}

@keyframes noiseMove {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -5%); }
  20% { transform: translate(-10%, 5%); }
  30% { transform: translate(5%, -10%); }
  40% { transform: translate(-5%, 10%); }
  50% { transform: translate(10%, 5%); }
  60% { transform: translate(5%, -5%); }
  70% { transform: translate(-10%, -10%); }
  80% { transform: translate(10%, 10%); }
  90% { transform: translate(-5%, 5%); }
}