/* ===================================================================
   INDENANT BROKER - ANIMATED BACKGROUND
   Implementación de fondo animado con gradientes sutiles de grises oscuros
   =================================================================== */

/* Definición de la animación sutil con movimiento irregular */
@keyframes subtleFlow {
  0% { background-position: 0% 20%; }
  20% { background-position: 30% 10%; }
  40% { background-position: 70% 50%; }
  60% { background-position: 40% 80%; }
  80% { background-position: 10% 60%; }
  100% { background-position: 0% 20%; }
}

/* Aplicación del fondo animado con gradiente sutil */
body.animated-bg {
  background: linear-gradient(140deg,
    #101010,
    #131313,
    #151515,
    #171717,
    #191919,
    #1b1b1b,
    #191919,
    #171717,
    #151515,
    #131313,
    #101010
  );
  background-size: 300% 300%;
  animation: subtleFlow 35s ease infinite;
  background-attachment: fixed;
  will-change: background-position;
}

/* Soporte para navegadores específicos con prefijos */
@-webkit-keyframes subtleFlow {
  0% { background-position: 0% 20%; }
  20% { background-position: 30% 10%; }
  40% { background-position: 70% 50%; }
  60% { background-position: 40% 80%; }
  80% { background-position: 10% 60%; }
  100% { background-position: 0% 20%; }
}

/* Optimización para rendimiento */
@media (prefers-reduced-motion: reduce) {
  body.animated-bg {
    animation: none;
    background: linear-gradient(140deg, #101010, #151515, #191919);
    background-size: 100%;
  }
}

/* Para asegurar que la animación se mantenga detrás de todo */
body.animated-bg:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

/* Adaptación para cada sección/scroll view */
.snap-point {
  position: relative;
  z-index: 1;
}

/* Ensure particles stay on top of the animated background but below content */
#particles-js {
  z-index: -1 !important;
}