/* ==========================================================================
   Ellos — Ambiente

   O fundo vivo do "Em Breve" transformado em classe utilitária: cole
   `ec-ambient` no campo CSS Classes de qualquer container do Elementor e a
   seção ganha gradiente que respira, halo na base e manchas de luz à deriva.

   No plugin Em Breve o efeito usa três <div> extras. Aqui não dá para
   injetar HTML dentro de um container do Elementor, então tudo cabe em dois
   pseudo-elementos: ::before é o halo, ::after são as manchas, e o gradiente
   é o background do próprio elemento.

   Princípio 2 do sistema: presença de fundo se resolve na transição de cor,
   nunca em camada de brilho por cima. Sem varredura, sem reflexo, sem
   mix-blend-mode. A profundidade vem da parada intermediária do gradiente,
   levemente mais funda que a média das pontas.
   ========================================================================== */

.ec-ambient {
  /* Cores. Sobrescreva no próprio elemento para variar por seção. */
  --ec-amb-1: var(--ec-blue-700, #3360E1);
  --ec-amb-2: var(--ec-violet-600, #7D3CEE);
  --ec-amb-luz: var(--ec-blue-400, #65B3FD);
  --ec-amb-halo: var(--ec-blue-400, #65B3FD);

  /* Intensidade: amplitude do movimento e opacidade do halo e das manchas.
     Nunca mexe nas cores em si, então o contraste do texto é o mesmo em
     qualquer valor. */
  --ec-amb-int: .85;

  position: relative;
  isolation: isolate;
  /* clip e não hidden: não cria contexto de rolagem. */
  overflow: clip;
  color: var(--ec-white, #fff);

  background-color: #02143f;
  background-image: linear-gradient(
    158deg,
    var(--ec-amb-1) 0%,
    color-mix(in srgb,
      color-mix(in srgb, var(--ec-amb-1), var(--ec-amb-2)) 84%,
      #010A2E) 46%,
    var(--ec-amb-2) 100%
  );
  /* Quanto maior que a área, mais distância a cor percorre e mais perceptível
     o movimento. */
  background-size:
    calc(112% + 78% * var(--ec-amb-int))
    calc(112% + 78% * var(--ec-amb-int));
  animation: ec-amb-pan 42s cubic-bezier(.65, 0, .35, 1) infinite alternate;
}

@keyframes ec-amb-pan {
  from { background-position: 0% 18%; }
  to   { background-position: 100% 82%; }
}

/* --- Halo na base: assenta a composição e apoia o rodapé ------------------ */

.ec-ambient::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: -2;
  width: min(180%, 1400px);
  aspect-ratio: 2.4 / 1;
  transform: translate(-50%, 38%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--ec-amb-halo) 78%, #fff) 0%,
    color-mix(in srgb, var(--ec-amb-halo) 45%, transparent) 42%,
    transparent 72%);
  filter: blur(46px);
  opacity: calc(.42 * var(--ec-amb-int));
  animation: ec-amb-halo 18s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes ec-amb-halo {
  0%, 100% { transform: translate(-50%, 40%) scale(1);    opacity: calc(.34 * var(--ec-amb-int)); }
  50%      { transform: translate(-50%, 34%) scale(1.09); opacity: calc(.5  * var(--ec-amb-int)); }
}

/* --- Manchas de luz -------------------------------------------------------

   No Em Breve são três <div> com blur. Aqui são três radial-gradients numa
   única camada: o blur real de 70px em três elementos custa caro em telas
   grandes, e o gradiente já entrega borda difusa de graça.
   -------------------------------------------------------------------------- */

.ec-ambient::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -3;
  pointer-events: none;
  opacity: calc(.55 * var(--ec-amb-int));
  background:
    radial-gradient(circle at 12% 14%, var(--ec-amb-luz) 0%, transparent 42%),
    radial-gradient(circle at 86% 88%, var(--ec-amb-2) 0%, transparent 45%),
    radial-gradient(circle at 78% 46%, var(--ec-green-500, #21C55D) 0%, transparent 28%);
  animation: ec-amb-drift 34s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes ec-amb-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(32px, -18px, 0) scale(1.06); }
}

/* --- Variantes ------------------------------------------------------------ */

.ec-ambient--calmo  { --ec-amb-int: .5; }
.ec-ambient--forte  { --ec-amb-int: 1.15; }

/* Sem halo: para seção que termina numa borda dura, onde a luz na base
   vazaria para o bloco seguinte. */
.ec-ambient--sem-halo::before { display: none; }

/* Só o gradiente, sem manchas nem halo. Fundo sólido e vivo, para blocos com
   muito conteúdo, onde as manchas competem com o texto. */
.ec-ambient--liso::before,
.ec-ambient--liso::after { display: none; }

/* Paleta vermelha, para blocos de urgência. */
.ec-ambient--brasa {
  --ec-amb-1: var(--ec-red-500, #D42F2E);
  --ec-amb-2: #6E1414;
  --ec-amb-luz: #FF8A5B;
  --ec-amb-halo: #FF8A5B;
}

/* Paleta institucional fechada, sem o violeta. */
.ec-ambient--institucional {
  --ec-amb-1: var(--ec-blue-700, #3360E1);
  --ec-amb-2: var(--ec-blue-900, #013FB6);
  --ec-amb-luz: var(--ec-blue-400, #65B3FD);
  --ec-amb-halo: var(--ec-blue-400, #65B3FD);
}

/* --- Movimento reduzido --------------------------------------------------- */

/* O fundo continua, parado. Tirar o gradiente deixaria a seção sem
   identidade; tirar só o movimento resolve o que incomoda. */
@media (prefers-reduced-motion: reduce) {
  .ec-ambient,
  .ec-ambient::before,
  .ec-ambient::after { animation: none; }
}

/* --- Sem color-mix -------------------------------------------------------- */

/* Navegador antigo ignora a regra inteira que contém color-mix, o que deixaria
   o halo sem fundo. Aqui uma versão simples entra antes, como base. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .ec-ambient {
    background-image: linear-gradient(158deg, var(--ec-amb-1) 0%, var(--ec-amb-2) 100%);
  }
  .ec-ambient::before {
    background: radial-gradient(ellipse at 50% 50%, var(--ec-amb-halo) 0%, transparent 70%);
  }
}