/* Animated Background Patterns */

/* Base pattern class for all animated backgrounds */
.animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Alterado para -1 para ficar atrás de todos os elementos */
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none; /* Adicionado para garantir que o padrão não capture eventos de mouse */
}

/* Pattern 1: Floating Particles */
.pattern-particles .particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  animation: float 15s infinite ease-in-out;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) rotate(45deg);
  }
  50% {
    transform: translateY(0) rotate(90deg);
  }
  75% {
    transform: translateY(20px) rotate(45deg);
  }
}

/* Pattern 2: Wave Effect */
.pattern-wave {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
  background-size: 100px 100px;
  animation: wave-bg 8s linear infinite;
}

@keyframes wave-bg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}

/* Pattern 3: Gradient Pulse */
.pattern-pulse {
  background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
  animation: pulse 10s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.1;
  }
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
}

/* Pattern 4: Geometric Shapes */
.pattern-geometric .shape {
  position: absolute;
  opacity: 0.1;
  animation: rotate 20s infinite linear;
}

.pattern-geometric .shape.square {
  width: 80px;
  height: 80px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.pattern-geometric .shape.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.pattern-geometric .shape.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid rgba(255, 255, 255, 0.15);
}

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

/* Pattern 5: Bubbles */
.pattern-bubbles .bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: bubble-float 15s infinite ease-in-out;
  bottom: -50px;
}

@keyframes bubble-float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-120vh) scale(0);
    opacity: 0;
  }
}

/* Pattern 6: Grid */
.pattern-grid {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: grid-move 15s linear infinite;
}

@keyframes grid-move {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 20px 20px, 20px 20px;
  }
}

/* Pattern 7: Starfield */
.pattern-starfield .star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle 4s infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* Pattern 8: Noise */
.pattern-noise {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.15"/></svg>');
  animation: noise-move 1s steps(10) infinite;
}

@keyframes noise-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}

/* Pattern 9: Flowing Lines */
.pattern-lines {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.03) 10px,
    rgba(255, 255, 255, 0.03) 20px
  );
  animation: line-flow 10s linear infinite;
}

@keyframes line-flow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}

/* Pattern 10: Ripple Effect */
.pattern-ripple {
  position: relative;
}

.pattern-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  animation: ripple 6s linear infinite;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }
  100% {
    width: 500px;
    height: 500px;
    opacity: 0;
  }
}