/* ============================================================
   BRAND JUNGLE — AURORA
   Gradientes fluidos de verde intenso sobre oliva oscuro.

   Arquitectura por banda:
     ::before  → cuatro manchas de luz desenfocadas, en movimiento lento
     ::after   → velo de lectura: oscurece el centro, deja arder los bordes
     contenido → z-index 1, siempre por encima de ambas

   El velo no es decorativo. Sin él, el texto cae por debajo de AA justo
   donde la aurora pasa. Con él, la luz vive en el perímetro —que es
   además donde se lee como aurora— y el centro queda legible.
   ============================================================ */

.hero,
#systems, #sistemas,
#marketing,
#growth, #ciclo,
#portfolio, #portafolio,
#quote, #cotiza,
#platform, #plataforma,
.problems,
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Capa de luz ---------- */
#systems::before, #sistemas::before,
#marketing::before,
#growth::before, #ciclo::before,
#portfolio::before, #portafolio::before,
#quote::before, #cotiza::before,
#platform::before, #plataforma::before,
.problems::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at var(--a1x, 22%) var(--a1y, 26%), rgba(169, 220, 92, 0.62) 0%, rgba(169, 220, 92, 0) 62%),
    radial-gradient(34% 40% at var(--a2x, 74%) var(--a2y, 22%), rgba(220, 220, 98, 0.42) 0%, rgba(220, 220, 98, 0) 60%),
    radial-gradient(46% 52% at var(--a3x, 62%) var(--a3y, 78%), rgba(156, 176, 1, 0.55) 0%, rgba(156, 176, 1, 0) 64%),
    radial-gradient(40% 44% at var(--a4x, 14%) var(--a4y, 82%), rgba(63, 122, 24, 0.50) 0%, rgba(63, 122, 24, 0) 62%);
  background-size: 190% 190%;
  background-position: 0% 0%;
  filter: blur(58px) saturate(1.35);
  will-change: transform, background-position;
  animation: aurora-flow 46s ease-in-out infinite alternate,
             aurora-drift 34s ease-in-out infinite alternate;
}

/* ---------- Velo de lectura ---------- */
#systems::after, #sistemas::after,
#marketing::after,
#growth::after, #ciclo::after,
#portfolio::after, #portafolio::after,
#quote::after, #cotiza::after,
#platform::after, #plataforma::after,
.problems::after,
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 96% at 50% 50%,
      rgba(12, 15, 1, 0.86) 0%,
      rgba(12, 15, 1, 0.70) 40%,
      rgba(12, 15, 1, 0.38) 72%,
      rgba(12, 15, 1, 0.08) 100%),
    linear-gradient(180deg, rgba(12, 15, 1, 0.55) 0%, rgba(12, 15, 1, 0) 22%,
      rgba(12, 15, 1, 0) 78%, rgba(12, 15, 1, 0.55) 100%);
}

/* El contenido va por delante de las dos capas */
#systems > *, #sistemas > *,
#marketing > *,
#growth > *, #ciclo > *,
#portfolio > *, #portafolio > *,
#quote > *, #cotiza > *,
#platform > *, #plataforma > *,
.problems > *,
.site-footer > * { position: relative; z-index: 1; }

/* Cada banda con su propia composición: la aurora nunca se repite igual */
#systems, #sistemas { --a1x: 14%; --a1y: 30%; --a2x: 82%; --a2y: 14%; --a3x: 70%; --a3y: 84%; --a4x: 8%;  --a4y: 88%; }
#marketing          { --a1x: 80%; --a1y: 22%; --a2x: 24%; --a2y: 16%; --a3x: 30%; --a3y: 82%; --a4x: 88%; --a4y: 76%; }
#growth, #ciclo     { --a1x: 50%; --a1y: 14%; --a2x: 14%; --a2y: 54%; --a3x: 86%; --a3y: 58%; --a4x: 48%; --a4y: 92%; }
#portfolio, #portafolio { --a1x: 26%; --a1y: 18%; --a2x: 76%; --a2y: 30%; --a3x: 54%; --a3y: 86%; --a4x: 6%; --a4y: 70%; }
#quote, #cotiza     { --a1x: 68%; --a1y: 26%; --a2x: 18%; --a2y: 34%; --a3x: 40%; --a3y: 80%; --a4x: 90%; --a4y: 84%; }
.problems           { --a1x: 18%; --a1y: 22%; --a2x: 84%; --a2y: 34%; --a3x: 66%; --a3y: 80%; --a4x: 12%; --a4y: 74%; }
/* El pie cierra la página: la luz sube desde abajo, como rescoldo */
#platform, #plataforma { --a1x: 76%; --a1y: 20%; --a2x: 22%; --a2y: 28%; --a3x: 44%; --a3y: 84%; --a4x: 90%; --a4y: 72%; }
.site-footer        { --a1x: 30%; --a1y: 88%; --a2x: 72%; --a2y: 96%; --a3x: 50%; --a3y: 70%; --a4x: 92%; --a4y: 84%; }

/* ---------- Hero: la aurora refuerza el foco que ya tenía ---------- */
.hero::before {
  inset: -30%;
  width: auto;
  height: auto;
  top: -30%;
  left: -30%;
  border-radius: 0;
  background:
    radial-gradient(36% 44% at 26% 24%, rgba(169, 220, 92, 0.55) 0%, rgba(169, 220, 92, 0) 62%),
    radial-gradient(32% 38% at 78% 30%, rgba(220, 220, 98, 0.38) 0%, rgba(220, 220, 98, 0) 60%),
    radial-gradient(44% 50% at 60% 82%, rgba(156, 176, 1, 0.48) 0%, rgba(156, 176, 1, 0) 64%);
  background-size: 180% 180%;
  filter: blur(64px) saturate(1.3);
  animation: aurora-flow 52s ease-in-out infinite alternate,
             aurora-drift 38s ease-in-out infinite alternate;
}

.hero::after {
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    radial-gradient(118% 96% at 50% 46%,
      rgba(12, 15, 1, 0.78) 0%,
      rgba(12, 15, 1, 0.60) 44%,
      rgba(12, 15, 1, 0.34) 76%,
      rgba(12, 15, 1, 0.06) 100%),
    /* viñeta: cubre la sección entera, sin cantos */
    radial-gradient(140% 118% at 50% 44%,
      rgba(0, 0, 0, 0) 46%,
      rgba(0, 0, 0, 0.24) 78%,
      rgba(0, 0, 0, 0.46) 100%);
  animation: none;
}

/* ---------- Movimiento ----------
   Dos animaciones independientes sobre la misma capa: transform mueve el
   conjunto, background-position desliza las manchas dentro de él. La suma
   no tiene periodo común corto, así que nunca se ve el bucle. */
@keyframes aurora-flow {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg)   scale(1.04); }
  50%  { transform: translate3d(3%, 3%, 0)   rotate(6deg)   scale(1.16); }
  100% { transform: translate3d(-2%, 4%, 0)  rotate(-5deg)  scale(1.08); }
}

@keyframes aurora-drift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 40%; }
  100% { background-position: 30% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #systems::before, #sistemas::before, #marketing::before,
  #growth::before, #ciclo::before, #portfolio::before, #portafolio::before,
  #quote::before, #cotiza::before, .problems::before, .hero::before,
  .site-footer::before {
    animation: none;
    will-change: auto;
  }
}

/* Fuera de pantalla no se anima: seis auroras a la vez no valen el gasto */
#systems::before, #sistemas::before, #marketing::before,
#growth::before, #ciclo::before, #portfolio::before, #portafolio::before,
#quote::before, #cotiza::before, #platform::before, #plataforma::before,
.problems::before, .site-footer::before {
  animation-play-state: paused;
}

.band-in-view::before,
.aurora-live::before { animation-play-state: running !important; }

/* ============================================================
   Modo claro: la aurora existe, pero como tinta sobre papel.
   Mismo movimiento, otra materia — no un intento de imitar el neón.
   ============================================================ */

/* En pantallas pequeñas el desenfoque grande es caro: se reduce */
@media (max-width: 719px) {
  #systems::before, #sistemas::before, #marketing::before,
  #growth::before, #ciclo::before, #portfolio::before, #portafolio::before,
  #quote::before, #cotiza::before, .problems::before, .hero::before,
  .site-footer::before {
    filter: blur(38px) saturate(1.25);
  }
}