/* Background Animations and Effects */
.organism-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.4;
  will-change: opacity;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

@media (max-width: 768px) {
  .organism-background {
    opacity: 0.2;
  }
  
  .organism-background__particles {
    display: none;
  }
  
  .organism-background__swirl {
    animation-duration: 40s;
    animation-timing-function: linear;
  }
  
  .organism-background__swirl--1,
  .organism-background__swirl--2,
  .organism-background__swirl--3 {
    animation-duration: 50s;
  }
  
  .organism-background__gradient {
    animation-duration: 30s;
  }
  
  .organism-background__glow {
    animation-duration: 12s;
    filter: blur(40px);
  }
  
  .organism-background__grid {
    animation-duration: 30s;
    opacity: 0.2;
  }
}

/* Animated Gradient Background */
.organism-background__gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 50%, rgba(147, 51, 234, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 50% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
  animation: gradientShift 20s ease infinite;
}

@keyframes gradientShift {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.1) rotate(5deg);
    opacity: 0.8;
  }
}

/* Floating Particles */
.organism-background__particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 15s infinite ease-in-out;
}

.particle--small {
  width: 4px;
  height: 4px;
  animation-duration: 20s;
}

.particle--medium {
  width: 8px;
  height: 8px;
  animation-duration: 25s;
}

.particle--large {
  width: 12px;
  height: 12px;
  animation-duration: 30s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-100px) translateX(50px);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-200px) translateX(-30px);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-100px) translateX(-50px);
    opacity: 0.7;
  }
}

/* Swirling Patterns */
.organism-background__swirl {
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.1) 0%, transparent 70%);
  animation: swirl 30s infinite linear;
  opacity: 0.5;
}

.organism-background__swirl--1 {
  top: -400px;
  left: -400px;
  animation-duration: 40s;
}

.organism-background__swirl--2 {
  bottom: -400px;
  right: -400px;
  animation-duration: 35s;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
}

.organism-background__swirl--3 {
  top: 50%;
  right: -200px;
  animation-duration: 45s;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.08) 0%, transparent 70%);
}

@keyframes swirl {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Animated Grid Pattern */
.organism-background__grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
  opacity: 0.3;
}

@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

/* Glow Effects */
.organism-background__glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.2) 0%, transparent 70%);
  filter: blur(60px);
  animation: glowPulse 8s ease-in-out infinite;
}

.organism-background__glow--1 {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.organism-background__glow--2 {
  bottom: 10%;
  right: 10%;
  animation-delay: 2s;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
}

.organism-background__glow--3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 4s;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.15) 0%, transparent 70%);
}

@keyframes glowPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.8;
  }
}