/**
 * @file fondo-animado.css
 * @description Estilos para el componente web personalizado 'fondo-animado' - Sistema completo de fondo
 *              animado con partículas flotantes circulares. Incluye gradientes adaptativos por tema,
 *              animaciones 3D optimizadas con CSS transforms, efectos de mezcla (blend modes) avanzados,
 *              optimizaciones de rendimiento con will-change y soporte completo para temas claro/oscuro.
 * @author Enri Rego
 * @version 1.0.0
 * @date 01 de Junio 2025
 * @since 1.0.0
 * @requires scripts/components/fondo-animado.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

/* ===================================================================
   CONTENEDOR PRINCIPAL
   Estructura base del componente con posicionamiento y overflow
   =================================================================== */

/**
 * Elemento personalizado fondo-animado
 * Contenedor principal que define el área de trabajo para las animaciones.
 * Configuración responsive que se adapta al contenedor padre o pantalla completa.
 * Optimizado para rendimiento con overflow hidden y posicionamiento relativo.
 */
.fondo-animado {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* ===================================================================
   CAPA DE FONDO BASE
   Gradientes adaptativos según el tema activo
   =================================================================== */

/**
 * Capa de fondo base con gradiente
 * Proporciona el gradiente de fondo principal con transiciones suaves
 */
.fondo-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  transition: background 1s ease;
}

/**
 * Gradiente de fondo para tema claro
 * Tonos cálidos desde blanco cremoso hasta beige suave
 */
.fondo-animado.tema-claro .fondo-base {
  background: radial-gradient(ellipse at center, #fff7f2 0%, #fff0e5 80%, #ffe6d1 100%);
}

/**
 * Gradiente de fondo para tema oscuro
 * Tonos marrones oscuros con variaciones sutiles
 */
.fondo-animado.tema-oscuro .fondo-base {
  background: radial-gradient(ellipse at center, #423935 0%, #352e2a 80%, #2a2522 100%);
}

/* ===================================================================
   CONTENEDORES DE CÍRCULOS Y CAPAS
   Estructura de contenedores para las partículas animadas
   =================================================================== */

/**
 * Contenedor principal de círculos animados
 * Define el área de trabajo 3D con perspectiva para las animaciones
 */
.circulos-contenedor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  perspective: 1000px;
  overflow: hidden;
}

/**
 * Capa de desenfoque y efectos especiales
 * Contenedor secundario para aplicar filtros y efectos de fondo
 */
.blur-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: none;
  backdrop-filter: none;
}

/* ===================================================================
   CÍRCULOS ANIMADOS
   Partículas flotantes con animaciones 3D y custom properties
   =================================================================== */

/**
 * Círculos individuales animados
 * Partículas circulares con animación flotante y optimizaciones de rendimiento
 */
.circulo {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: flotar-circulo 100s infinite ease-in-out;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  --mov-x: 0vw;
  --mov-y: 0vh;
  --mov-x-simple: 0vw;
  --mov-y-simple: 0vh;
  --escala: 1;
}

/* ===================================================================
   ANIMACIONES KEYFRAMES
   Definición de movimientos flotantes complejos en 3D
   =================================================================== */

/**
 * Animación principal de flotación circular
 * Movimiento complejo en 4 etapas con transformaciones 3D y escalado dinámico
 */
@keyframes flotar-circulo {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  25% {
    transform: translate3d(var(--mov-x), var(--mov-y), 0) scale(var(--escala));
  }

  50% {
    transform: translate3d(calc(var(--mov-y) * -0.5), calc(var(--mov-x) * 0.5), 0) scale(1.1);
  }

  75% {
    transform: translate3d(calc(var(--mov-x) * -1), calc(var(--mov-y) * -1), 0) scale(var(--escala));
  }
}

/* ===================================================================
   EFECTOS DE MEZCLA POR TEMA
   Blend modes adaptativos según el tema activo
   =================================================================== */

/**
 * Efecto de mezcla para tema claro
 * Usa multiply para oscurecer y crear profundidad visual
 */
.fondo-animado.tema-claro .circulo {
  mix-blend-mode: multiply;
}

/**
 * Efecto de mezcla para tema oscuro
 * Usa screen para aclarar y crear contraste visual
 */
.fondo-animado.tema-oscuro .circulo {
  mix-blend-mode: screen;
}

/* ===================================================================
   CONFIGURACIÓN GLOBAL
   Estilos para modo de fondo de página completa
   =================================================================== */

/**
 * Configuración global del body cuando el fondo está activo
 * Establece posicionamiento relativo para el contexto de apilamiento global
 */
body.con-fondo-animado {
  position: relative;
}