/* ======================================================================
   Eco Tech — Efeitos interativos (versão clean + mesh gradient)
   Último plano de TODAS as páginas (fixed, z -1):
     .etfx-bg
       .etfx-mesh > .etfx-blob (manchas de cor translúcidas em movimento)
       .etfx-rain (chuva digital sutil, por cima do mesh)
   Mais:
     .etfx-cursor = luz verde redonda que segue o mouse
     .etfx-sheen  = brilho de ponteiro nos cards
   Não cria contexto de empilhamento no header (não afeta menus/sticky).
   prefers-reduced-motion congela as animações.
   ====================================================================== */

/* body transparente para revelar o fundo global atrás de tudo. */
body { background-color: transparent; }

/* ---- Fundo GLOBAL (TEMA DARK) ----
   Recria a textura da assinatura Eco Tech: base quase-preta com leve
   vinheta verde no topo + hachura diagonal fina (linhas a ~118°).
   Os anéis topográficos verdes dos cantos vêm dos ::before/::after. */
.etfx-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    repeating-linear-gradient(118deg,
      rgba(255,255,255,0.022) 0 1px, transparent 1px 6px),
    radial-gradient(135% 125% at 50% -10%,
      #16271e 0%, #0d1611 42%, #090d0b 78%, #070a08 100%);
}

/* Anéis topográficos (como curvas de nível) nos cantos — mais fortes e
   verdes no canto inferior-direito, mais sutis/acinzentados no superior-
   esquerdo, exatamente como na assinatura. A máscara radial faz os anéis
   nascerem no canto e desaparecerem para dentro. */
.etfx-bg::before, .etfx-bg::after { content: ""; position: absolute; pointer-events: none; }
.etfx-bg::after { /* inferior-direito — verde do logo, destacado */
  right: -8%; bottom: -12%; width: 48vmax; height: 48vmax;
  background: repeating-radial-gradient(circle at 72% 72%,
    transparent 0 30px, rgba(96,170,116,0.20) 31px 32px, transparent 33px 64px);
  -webkit-mask: radial-gradient(circle at 72% 72%, #000 0%, rgba(0,0,0,.6) 42%, transparent 74%);
          mask: radial-gradient(circle at 72% 72%, #000 0%, rgba(0,0,0,.6) 42%, transparent 74%);
}
.etfx-bg::before { /* superior-esquerdo — verde-acinzentado, sutil */
  left: -10%; top: -13%; width: 34vmax; height: 34vmax;
  background: repeating-radial-gradient(circle at 30% 30%,
    transparent 0 26px, rgba(132,156,142,0.13) 27px 28px, transparent 29px 56px);
  -webkit-mask: radial-gradient(circle at 30% 30%, #000 0%, transparent 72%);
          mask: radial-gradient(circle at 30% 30%, #000 0%, transparent 72%);
}

/* mesh e chuva ficam ACIMA dos anéis (que são textura de base). */
.etfx-mesh { position: absolute; inset: -15%; filter: saturate(1.05); z-index: 1; }
.etfx-rain { z-index: 1; }

/* Manchas de cor translúcidas e desfocadas (aurora/mesh). Paleta ampliada:
   verde escuro, verde claro do logo, cinza, branco e um toque de preto. */
.etfx-blob {
  position: absolute; width: 58vmax; height: 58vmax; border-radius: 50%;
  filter: blur(56px); will-change: transform;
}
.etfx-blob.b1 { /* verde escuro */
  top: -12%; left: -8%;
  background: radial-gradient(circle, rgba(27,61,47,0.30) 0%, rgba(27,61,47,0) 62%);
  animation: etfxFloatA 30s ease-in-out infinite;
}
.etfx-blob.b2 { /* verde claro do logotipo */
  top: -6%; right: -10%; left: auto;
  background: radial-gradient(circle, rgba(106,165,122,0.34) 0%, rgba(106,165,122,0) 62%);
  animation: etfxFloatB 38s ease-in-out infinite;
}
.etfx-blob.b3 { /* cinza */
  bottom: -14%; left: 8%; top: auto;
  background: radial-gradient(circle, rgba(120,128,122,0.22) 0%, rgba(120,128,122,0) 64%);
  animation: etfxFloatC 34s ease-in-out infinite;
}
.etfx-blob.b4 { /* brilho suave esverdeado (era branco forte; suavizado p/ dark) */
  top: 24%; left: 34%;
  background: radial-gradient(circle, rgba(150,200,165,0.10) 0%, rgba(150,200,165,0) 60%);
  animation: etfxFloatA 46s ease-in-out infinite reverse;
}
.etfx-blob.b5 { /* profundidade verde (era preto; no dark vira brilho verde) */
  bottom: -16%; right: -6%; left: auto; top: auto; width: 46vmax; height: 46vmax;
  background: radial-gradient(circle, rgba(45,90,58,0.26) 0%, rgba(45,90,58,0) 62%);
  animation: etfxFloatB 42s ease-in-out infinite;
}
.etfx-blob.b6 { /* verde médio, centro */
  top: 40%; left: 58%; width: 50vmax; height: 50vmax;
  background: radial-gradient(circle, rgba(74,124,89,0.22) 0%, rgba(74,124,89,0) 62%);
  animation: etfxFloatC 50s ease-in-out infinite reverse;
}

@keyframes etfxFloatA {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(9%, 7%) scale(1.16); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes etfxFloatB {
  0%   { transform: translate(0,0) scale(1.1); }
  50%  { transform: translate(-11%, 9%) scale(1); }
  100% { transform: translate(0,0) scale(1.1); }
}
@keyframes etfxFloatC {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(7%, -9%) scale(1.2); }
  100% { transform: translate(0,0) scale(1); }
}

/* chuva digital desenhada por cima do mesh, ainda atrás de tudo. */
.etfx-rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---- Luz verde redonda que segue o cursor (global) ---- */
.etfx-cursor {
  position: fixed; top: 0; left: 0; z-index: 2147482000;
  width: 620px; height: 620px; margin: -310px 0 0 -310px;
  border-radius: 50%; pointer-events: none;
  /* screen = adiciona luz (clareia a área) em vez de apenas tingir;
     deixa o facho mais nítido e realça a funcionalidade no tema escuro. */
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(127,195,149,0.42) 0%,
    rgba(96,170,116,0.26) 30%,
    rgba(74,124,89,0.12) 52%,
    transparent 72%);
  opacity: 0; transition: opacity .3s ease;
  will-change: transform; transform: translate3d(-9999px, -9999px, 0);
}
.etfx-cursor.etfx-on { opacity: 1; }

/* ---- Brilho de ponteiro nos cards ---- */
.etfx-sheen {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0; border-radius: inherit;
  transition: opacity .4s ease;
  background: radial-gradient(
    220px circle at var(--etfx-mx, 50%) var(--etfx-my, 50%),
    rgba(181,147,90,0.16), transparent 60%);
}
.etfx-card-hot .etfx-sheen { opacity: 1; }

/* Telas pequenas: menos desfoque (poupa GPU). */
@media (max-width: 640px) {
  .etfx-blob { filter: blur(40px); }
}

@media (prefers-reduced-motion: reduce) {
  .etfx-blob { animation: none; }
  .etfx-cursor, .etfx-sheen { display: none; }
}