/* ========================================
   Page Header Animations
   ======================================== */

/* Base Animated Header */
.page-header-animated {
  position: relative;
  overflow: hidden;
}

.page-header-animated .container {
  position: relative;
  z-index: 2;
}

.header-bg-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ========================================
   Option 1: Floating Particles (CSS Only)
   ======================================== */

.particles-animation {
  overflow: hidden;
}

.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.floating-particle {
  position: absolute;
  border-radius: 50%;
  animation: floatParticle linear infinite;
  filter: blur(1px);
}

@keyframes floatParticle {
  0% {
    transform: translateY(100%) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
    transform: translateY(80%) translateX(10px) scale(1);
  }
  50% {
    opacity: 0.4;
    transform: translateY(40%) translateX(-10px) scale(0.8);
  }
  90% {
    opacity: 0.2;
    transform: translateY(10%) translateX(15px) scale(0.6);
  }
  100% {
    transform: translateY(-20%) translateX(0) scale(0);
    opacity: 0;
  }
}

/* ========================================
   Option 2: Animated Grid/Network
   ======================================== */

.grid-animation {
  background: transparent;
}

.grid-animation canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ========================================
   Option 4: Gradient Wave Animation (CSS Only)
   ======================================== */

.wave-animation {
  overflow: hidden;
  background: transparent;
}

.wave {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  border-radius: 40%;
  opacity: 0.1;
}

.wave-1 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
  animation: waveRotate 20s linear infinite;
}

.wave-2 {
  background: linear-gradient(135deg, rgba(91, 155, 213, 0.3) 0%, transparent 50%);
  animation: waveRotate 25s linear infinite reverse;
}

.wave-3 {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.2) 0%, transparent 50%);
  animation: waveRotate 30s linear infinite;
}

@keyframes waveRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Wave shimmer effect */
.wave-animation::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  animation: waveShimmer 6s ease-in-out infinite;
  z-index: 1;
}

@keyframes waveShimmer {
  0%, 100% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
}

/* ========================================
   CSS-Only Floating Dots (No JS Required)
   ======================================== */

.particles-animation::before,
.particles-animation::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: floatDot 15s ease-in-out infinite;
}

.particles-animation::before {
  width: 10px;
  height: 10px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.particles-animation::after {
  width: 8px;
  height: 8px;
  top: 60%;
  right: 15%;
  animation-delay: -5s;
}

/* Additional CSS-only particles using box-shadow */
.particles-css {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.particles-css::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 
    /* Row 1 */
    50px 80px 0 rgba(255, 255, 255, 0.3),
    150px 120px 0 rgba(91, 155, 213, 0.4),
    280px 60px 0 rgba(255, 255, 255, 0.2),
    400px 140px 0 rgba(0, 217, 255, 0.3),
    550px 90px 0 rgba(255, 255, 255, 0.25),
    700px 130px 0 rgba(91, 155, 213, 0.35),
    850px 70px 0 rgba(255, 255, 255, 0.3),
    /* Row 2 */
    100px 200px 0 rgba(0, 217, 255, 0.25),
    230px 180px 0 rgba(255, 255, 255, 0.3),
    380px 220px 0 rgba(91, 155, 213, 0.4),
    500px 190px 0 rgba(255, 255, 255, 0.2),
    650px 210px 0 rgba(0, 217, 255, 0.35),
    780px 175px 0 rgba(255, 255, 255, 0.25),
    /* Row 3 */
    80px 280px 0 rgba(91, 155, 213, 0.3),
    200px 260px 0 rgba(255, 255, 255, 0.35),
    350px 290px 0 rgba(0, 217, 255, 0.25),
    480px 270px 0 rgba(255, 255, 255, 0.4),
    620px 285px 0 rgba(91, 155, 213, 0.3),
    750px 255px 0 rgba(255, 255, 255, 0.2);
  animation: floatParticles 20s ease-in-out infinite;
}

.particles-css::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 
    120px 100px 0 rgba(255, 255, 255, 0.4),
    250px 150px 0 rgba(0, 217, 255, 0.3),
    420px 80px 0 rgba(91, 155, 213, 0.35),
    580px 170px 0 rgba(255, 255, 255, 0.25),
    720px 110px 0 rgba(0, 217, 255, 0.4),
    180px 240px 0 rgba(91, 155, 213, 0.3),
    330px 200px 0 rgba(255, 255, 255, 0.35),
    530px 250px 0 rgba(0, 217, 255, 0.25),
    680px 230px 0 rgba(255, 255, 255, 0.3);
  animation: floatParticles 25s ease-in-out infinite reverse;
}

@keyframes floatParticles {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.8;
  }
  25% {
    transform: translateY(-20px) translateX(10px);
    opacity: 1;
  }
  50% {
    transform: translateY(-10px) translateX(-15px);
    opacity: 0.9;
  }
  75% {
    transform: translateY(-25px) translateX(5px);
    opacity: 1;
  }
}

@keyframes floatDot {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-30px) translateX(20px) scale(1.2);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-15px) translateX(-25px) scale(0.8);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-40px) translateX(15px) scale(1.1);
    opacity: 0.6;
  }
}

/* ========================================
   Shooting Stars for Light Blue Heroes
   ======================================== */

.shooting-stars-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ========================================
   Subtle Gradient Overlay
   ======================================== */

.page-header-animated::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(43, 79, 135, 0.2) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ========================================
   Dark Mode
   ======================================== */

[data-theme="dark"] .wave {
  opacity: 0.06;
}

[data-theme="dark"] .floating-particle {
  filter: blur(0.5px);
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .floating-particle,
  .wave,
  .particles-css::before,
  .particles-css::after,
  .wave-animation::before {
    animation: none !important;
  }
  
  .wave {
    opacity: 0.05;
  }
}

/* ========================================
   Mobile Optimizations
   ======================================== */

@media (max-width: 768px) {
  .wave {
    animation-duration: 30s !important;
  }
  
  .particles-css::before,
  .particles-css::after {
    animation-duration: 30s !important;
  }
}