/* Animierte Hintergründe für Novaplex Docs */

/* Animierter Gradient-Hintergrund */
.animated-gradient-bg {
  background: linear-gradient(-45deg, #0f172a, #1e293b, #00b4d8, #4361ee);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  position: relative;
}

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

/* Floating Particles Hintergrund */
.particles-bg {
  position: relative;
  overflow: hidden;
}

.particles-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(0, 180, 216, 0.1) 0%, rgba(15, 23, 42, 0) 70%);
  z-index: -1;
}

/* Animierte Wellen */
.wave-bg {
  position: relative;
  overflow: hidden;
}

.wave-bg::before,
.wave-bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  opacity: 0.3;
  background-color: transparent;
}

.wave-bg::before {
  background: 
    radial-gradient(circle at 30% 50%, rgba(0, 180, 216, 0.1) 0%, rgba(15, 23, 42, 0) 50%),
    radial-gradient(circle at 70% 70%, rgba(67, 97, 238, 0.1) 0%, rgba(15, 23, 42, 0) 50%);
  animation: wave 15s ease-in-out infinite alternate;
}

.wave-bg::after {
  background: 
    radial-gradient(circle at 70% 30%, rgba(67, 97, 238, 0.1) 0%, rgba(15, 23, 42, 0) 50%),
    radial-gradient(circle at 30% 80%, rgba(0, 180, 216, 0.1) 0%, rgba(15, 23, 42, 0) 50%);
  animation: wave 15s ease-in-out infinite alternate-reverse;
}

@keyframes wave {
  0% {
    transform: translateX(-5%) translateY(-5%) rotate(0deg);
  }
  100% {
    transform: translateX(5%) translateY(5%) rotate(2deg);
  }
}

/* Sternenhimmel-Hintergrund */
.starry-bg {
  position: relative;
  overflow: hidden;
}

.starry-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(1px 1px at 25% 15%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 40%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 25%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15% 65%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 85% 75%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 35% 85%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 60%, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
  z-index: -1;
}

/* Glowing Lines Hintergrund */
.glowing-lines-bg {
  position: relative;
  overflow: hidden;
}

.glowing-lines-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 99%, rgba(0, 180, 216, 0.1) 100%),
    linear-gradient(0deg, transparent 99%, rgba(67, 97, 238, 0.1) 100%);
  background-size: 40px 40px;
  z-index: -1;
  animation: pulse 4s ease infinite alternate;
}

@keyframes pulse {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.7;
  }
}

/* Cyber Grid Hintergrund */
.cyber-grid-bg {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-dark);
}

.cyber-grid-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, rgba(0, 180, 216, 0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 180, 216, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: -1;
}

.cyber-grid-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 98%, rgba(0, 180, 216, 0.1) 100%),
    linear-gradient(0deg, transparent 98%, rgba(0, 180, 216, 0.1) 100%);
  background-size: 40px 40px;
  z-index: -1;
  animation: gridPulse 8s ease infinite alternate;
}

@keyframes gridPulse {
  0% {
    opacity: 0.3;
    background-position: 0px 0px;
  }
  100% {
    opacity: 0.7;
    background-position: 20px 20px;
  }
}