/* ======================================================== FONDO ANIMADO sec4 ========================================================  */
/*
- Fondo FULL (animado, pesado, GPU)
- Fondo LITE (animado, pero machucho)
- Fondo plano (móvil)
*/

/* ========== Fondo full ========== */

.sec4-bg-animated {
  position: absolute;                                /* Saca el fondo del flujo normal y lo posiciona respecto a #sec4 */
  inset: 0;                                          /* Ocupa todo el ancho y alto de la sección */
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(40deg, rgb(0, 9, 35), rgb(0, 23, 70));
  will-change: transform;
  contain: layout paint;                             /* Aísla el layout y repintado SOLO dentro de este contenedor, para que no afecte a toda la pagina */
}

#sec4 .sec4-bg-animated * {                          /* Por defecto: animaciones pausadas (para que no funcionen fuera de sec4) */
  animation-play-state: paused;
}

body.sec4-active #sec4 .sec4-bg-animated * {         /* Solo cuando la sección está activa */
  animation-play-state: running;
}

.sec4-bg-animated svg {                              /* SVG usado SOLO para el filtro gooey */
  position: absolute;
  width: 0;                                          /* El SVG no es visible, solo define filtros. Si se quita, el filtro gooey deja de existir */
  height: 0;
}

.sec4-bg-animated .gradients-container {             /* Contenedor que agrupa todas las burbujas */
  filter: url(#gooSec5) blur(22px);                  /* Aplica el filtro SVG + desenfoque */
  width: 100%;
  height: 100%;
  position: relative;
}

.gradients-container {                               /* Optimización específica del filtro */
  will-change: filter;                               /* Le avisa al navegador que el filtro cambiará */
}

/* Variables de color y comportamiento */
:root {
  --s5-color1: 18, 113, 255;                         /* Color burbuja 1 */
  --s5-color2: 221, 74, 255;                         /* Color burbuja 2 */
  --s5-color3: 100, 220, 255;
  --s5-color4: 200, 50, 50;
  --s5-color5: 180, 180, 50;
  --s5-interactive: 140, 100, 255;                   /* Color de la burbuja que sigue al mouse */

  --s5-circle-size: 80%;                             /* Tamaño base de las burbujas */
  --s5-blending: hard-light;                         /* Modo de mezcla visual entre burbujas */
}

/* Animaciones base para los blobs FULL */
@keyframes s5-moveInCircle {                         /* Rotación continua */
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes s5-moveVertical {                         /* Subir y bajar */
  0% { transform: translateY(-50%); }
  50% { transform: translateY(50%); }
  100% { transform: translateY(-50%); }
}

@keyframes s5-moveHorizontal {                       /* Moverse a los lados */
  0% { transform: translateX(-50%) translateY(-10%); }
  50% { transform: translateX(50%) translateY(10%); }
  100% { transform: translateX(-50%) translateY(-10%); }
}

/* Cada burbuja */
.sec4-bg-animated .g1,
.sec4-bg-animated .g2,
.sec4-bg-animated .g3,
.sec4-bg-animated .g4,
.sec4-bg-animated .g5 {
  position: absolute;
  width: var(--s5-circle-size);
  height: var(--s5-circle-size);
  opacity: 0.75;
  background: radial-gradient(circle, rgba(var(--s5-color1),0.8), transparent 60%);
  top: 10%;
  left: 10%;
}
/* Estas burbujas se mezclaran con absolutamente cualquiera */
.sec4-bg-animated .g1,
.sec4-bg-animated .interactive {
  mix-blend-mode: var(--s5-blending);
  opacity: 0.85;
}
/* Estas burbujas no se mezclan entre si, pero se mezclan con las que si lo pueden hacer con cualquiera */
/* Estas burbujas NO usan mix-blend-mode. Se mezclan visualmente solo por opacidad y blur, reduciendo el costo */
.sec4-bg-animated .g2,
.sec4-bg-animated .g3,
.sec4-bg-animated .g4,
.sec4-bg-animated .g5 {
  opacity: 0.65;
}


/* Colores y animaciones individuales */
.sec4-bg-animated .g1 {
  background: radial-gradient(circle, rgba(var(--s5-color1),0.8), transparent 60%);
  animation: s5-moveVertical 30s ease infinite;      /* Movimiento vertical lento */
}

.sec4-bg-animated .g2 {
  background: radial-gradient(circle, rgba(var(--s5-color2),0.8), transparent 60%);
  animation: s5-moveInCircle 25s reverse infinite;   /* Movimiento circular invertido */
}

.sec4-bg-animated .g3 {
  background: radial-gradient(circle, rgba(var(--s5-color3),0.8), transparent 60%);
  animation: s5-moveInCircle 40s linear infinite;
}

.sec4-bg-animated .g4 {
  background: radial-gradient(circle, rgba(var(--s5-color4),0.8), transparent 60%);
  animation: s5-moveHorizontal 35s ease infinite;
}

.sec4-bg-animated .g5 {
  background: radial-gradient(circle, rgba(var(--s5-color5),0.8), transparent 60%);
  width: calc(var(--s5-circle-size) * 2);            /* Burbuja más grande */
  height: calc(var(--s5-circle-size) * 2);
  animation: s5-moveInCircle 20s ease infinite;
}

/* Burbuja interactiva (sigue al mouse) */
.sec4-bg-animated .interactive {
  position: absolute;
  width: 160%;
  height: 160%;
  top: -30%;
  left: -30%;
  background: radial-gradient(circle, rgba(var(--s5-interactive),0.8), transparent 60%);
  opacity: 0.6;
  transition: transform 0.2s linear;                 /* Suavidad del seguimiento */
  pointer-events: none;                              /* No interfiere con clics */
  will-change: transform;
}

#sec4 .content {                                     /* Asegurar que el contenido quede encima */
  position: relative;
  z-index: 10;
}

/* ========== sec4 — FONDO LITE (cuando no hay GPU) ========== */

#sec4-lite-bg {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;

  /* Degradado base */
  background: linear-gradient(
    135deg,
    #ff7a18,
    #f89b29,
    #6aa84f
  );
}

/* Grid sutil encima */
#sec4-lite-bg::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);

  background-size: 64px 64px;
  pointer-events: none;
}


/* Activación del modo LITE ----------- */
body.sec4-lite #sec4-lite-bg {
  display: block !important;                         /* Se muestra el fondo LITE */
}

body.sec4-lite #sec4-full-bg {
  display: none !important;                          /* Se oculta el fondo FULL */
}

/* ========== sec4 — FONDO PLANO PARA MOVILES ========== */
@media (hover: none) and (pointer: coarse) {         /* En celulares: desactivar completamente FULL y LITE, solo muestra el fondo de style.css */
  #sec4-full-bg,
  #sec4-lite-bg {
    display: none !important;
  }
}