/* ======================================================== FONDO ANIMADO SEC5 ========================================================  */

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

.sec5-bg-animated {
  position: absolute;
  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));
}

.sec5-bg-animated svg {
  position: absolute;
  width: 0;
  height: 0;
}

/* Contenedor del efecto gooey */
.sec5-bg-animated .gradients-container {
  filter: url(#gooSec5) blur(40px);                  /* Aplica el filtro goo + difuminado */
  width: 100%;
  height: 100%;
  position: relative;
}

/* 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 */
}

/* Animaciones base para los blobs FULL */
@keyframes s5-moveInCircle {                         /* Movimiento circular */
  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 */
.sec5-bg-animated .g1,
.sec5-bg-animated .g2,
.sec5-bg-animated .g3,
.sec5-bg-animated .g4,
.sec5-bg-animated .g5 {
  position: absolute;
  width: var(--s5-circle-size);
  height: var(--s5-circle-size);
  mix-blend-mode: var(--s5-blending);                /* Se mezclan entre sí */
  opacity: 0.9;
  background: radial-gradient(circle, rgba(var(--s5-color1),0.8) 0%, rgba(var(--s5-color1),0) 50%);
  top: 10%;
  left: 10%;
}

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

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

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

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

.sec5-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;
}

/* Elemento (burbuja) interactivo (sigue el mouse) */
.sec5-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%);
  mix-blend-mode: var(--s5-blending);
  opacity: 0.6;
  transition: transform 0.2s linear;                 /* Suavidad del seguimiento */
  pointer-events: none;                              /* No interfiere con clics */
}

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

/* ========== SEC5 — FONDO LITE OPTIMIZADO ========== */

#sec5-lite-bg {
  display: none;                                     /* Solo se activa con .sec5-lite */
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #8f9e6b, #4f8339);
}

/* ---- BLOBS ---- */
#sec5-lite-bg .blob {
  position: absolute;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.6;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: transform;                            /* Optimización */
}

/* Blob azul */
#sec5-lite-bg .blob.b1 {
  background: radial-gradient(circle, rgba(0, 255, 170, 0.87), transparent 70%);
  top: -15%;
  left: -10%;
}

/* Blob amarilla */
#sec5-lite-bg .blob.b2 {
  background: radial-gradient(circle, rgba(252, 255, 55, 0.87), transparent 70%);
  top: 45%;
  left: 55%;
}

/* ---- Animación ---- */

#sec5-lite-bg .blob.b1 {
  animation-name: blobFloat1;
  animation-duration: 12s;
}

#sec5-lite-bg .blob.b2 {
  animation-name: blobFloat2;
  animation-duration: 16s;
}

@keyframes blobFloat1 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  25%  { transform: translate(120px, 80px) scale(1.2) rotate(10deg); }
  50%  { transform: translate(200px, -40px) scale(1.05) rotate(-8deg); }
  75%  { transform: translate(90px, -20px) scale(1.15) rotate(4deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

@keyframes blobFloat2 {
  0%   { transform: translate(0, 0) scale(1.1) rotate(0deg); }
  25%  { transform: translate(-140px, -110px) scale(1) rotate(-12deg); }
  50%  { transform: translate(-200px, 40px) scale(1.15) rotate(6deg); }
  75%  { transform: translate(-100px, -20px) scale(1.05) rotate(-4deg); }
  100% { transform: translate(0, 0) scale(1.1) rotate(0deg); }
}


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

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

/* ========== SEC5 — FONDO PLANO PARA MOVILES ========== */
@media (max-width: 700px) {                          /* En celulares: desactivar completamente FULL y LITE, solo muestra el fondo de style.css */
  #sec5-full-bg,
  #sec5-lite-bg {
    display: none !important;
  }
}