/* Shared Animations & Background Styles for Project Pages */

/* Animated Background Elements */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background:
    radial-gradient(circle at 20% 80%, rgba(var(--animation-blue-rgb, 37, 99, 235), 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(var(--animation-blue-rgb, 37, 99, 235), 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.18) 0%, transparent 50%);
  animation: aiBackgroundFlow 25s ease-in-out infinite;
  pointer-events: none;
  z-index: -3;
}

body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image:
    linear-gradient(90deg, rgba(var(--animation-blue-rgb, 37, 99, 235), 0.03) 1px, transparent 1px),
    linear-gradient(rgba(var(--animation-blue-rgb, 37, 99, 235), 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: neuralGrid 30s linear infinite;
  pointer-events: none;
  z-index: -2;
}

.ai-particles {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
}

.ai-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(var(--animation-blue-rgb, 37, 99, 235), 0.75);
  border-radius: 50%;
  animation: floatParticle 20s linear infinite;
  filter: brightness(1.2);
}

.ai-particle:nth-child(2n) {
  background: rgba(var(--animation-blue-rgb, 37, 99, 235), 0.6);
  animation-duration: 25s;
  animation-delay: -5s;
}

.ai-particle:nth-child(3n) {
  background: rgba(var(--animation-blue-rgb, 37, 99, 235), 0.5);
  animation-duration: 30s;
  animation-delay: -10s;
}

.ai-particle:nth-child(4n) {
  background: rgba(var(--animation-blue-rgb, 37, 99, 235), 0.4);
  animation-duration: 35s;
  animation-delay: -15s;
}

.data-streams {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
}

.data-stream {
  position: absolute;
  width: 2px;
  height: 100px;
  background: linear-gradient(180deg, transparent, rgba(var(--animation-blue-rgb, 37, 99, 235), 0.8), transparent);
  animation: streamFlow 8s linear infinite;
}

.data-stream:nth-child(2n) {
  background: linear-gradient(180deg, transparent, rgba(var(--animation-blue-rgb, 37, 99, 235), 0.6), transparent);
  animation-duration: 10s;
  animation-delay: -2s;
}

.data-stream:nth-child(3n) {
  background: linear-gradient(180deg, transparent, rgba(var(--animation-blue-rgb, 37, 99, 235), 0.4), transparent);
  animation-duration: 12s;
  animation-delay: -4s;
}

.circuit-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(var(--animation-blue-rgb, 37, 99, 235), 0.1) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(var(--animation-blue-rgb, 37, 99, 235), 0.08) 1px, transparent 1px),
    linear-gradient(45deg, transparent 49%, rgba(var(--animation-blue-rgb, 37, 99, 235), 0.02) 49%, rgba(var(--animation-blue-rgb, 37, 99, 235), 0.02) 51%, transparent 51%);
  background-size: 100px 100px, 150px 150px, 200px 200px;
  animation: circuitPulse 40s ease-in-out infinite;
  pointer-events: none;
  z-index: -2;
}

@keyframes aiBackgroundFlow {
  0%, 100% { 
    opacity: 0.4; 
    transform: scale(1) rotate(0deg);
    filter: hue-rotate(0deg);
  }
  25% { 
    opacity: 0.6; 
    transform: scale(1.05) rotate(1deg);
    filter: hue-rotate(10deg);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.1) rotate(0deg);
    filter: hue-rotate(20deg);
  }
  75% { 
    opacity: 0.5; 
    transform: scale(1.02) rotate(-1deg);
    filter: hue-rotate(10deg);
  }
}

@keyframes neuralGrid {
  0% { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

@keyframes floatParticle {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) translateX(100px) scale(0);
    opacity: 0;
  }
}

@keyframes streamFlow {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

@keyframes circuitPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}