/*
 * VirtaCard — public/assets/effects/forest.css
 * Floresta (cena em SVG gerada em forest.js). Fica sobre o fundo do tema (que não é alterado:
 * desligar o efeito volta exatamente ao que era), atrás de todo o conteúdo e dos outros efeitos
 * do mesmo elemento (z-index -2 num contexto isolado: a base é opaca e não pode cobrir aurora,
 * confetes, neve…), presa ao elemento e sem receber cliques.
 * Cores dos planos por variáveis (tons da mata: esmeralda, musgo, sombra densa); só a copa da
 * frente, parte do plano do meio, os raios e o pólen se movem (transform/opacity).
 */
[data-vcfx~="forest"]{isolation:isolate;}
.vcfx-forest{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-2;--fo-cx:50%;
  /* luz do céu entre as copas, clareira distante, mata escura nas bordas e no chão */
  --fo-sky:#c9d39a;--fo-haze:#7f9a6a;--fo-deep:#1d2b1c;--fo-ground:#0c130b;
  --fo-far:#6c8667;--fo-far-tr:#5b725a;
  --fo-mid:#22371e;--fo-mid-hi:#4a6a34;--fo-mid-tr:#2a261b;--fo-mid-lit:#6a6145;--fo-mid-sh:#101a0e;
  --fo-near:#0a1109;--fo-near-tr:#0d0f0a;--fo-near-edge:#3b3a26;--fo-fern:#0e1a0d;
  --fo-sun:255,236,170;--fo-ray:.2;--fo-mist:.55;
  background:
    radial-gradient(38% 30% at var(--fo-cx) 18%,var(--fo-sky),transparent 75%),
    radial-gradient(55% 60% at var(--fo-cx) 45%,var(--fo-haze),transparent 80%),
    linear-gradient(180deg,var(--fo-deep) 0%,#24352a 40%,var(--fo-deep) 70%,var(--fo-ground) 100%);}
[data-vcfx-forest-tone="moss"] > .vcfx-forest{--fo-sky:#d8d39a;--fo-haze:#8e8f5e;--fo-deep:#262a18;--fo-far:#7b7d5c;--fo-far-tr:#686a4e;
  --fo-mid:#2f3a1c;--fo-mid-hi:#646b31;--fo-mid-tr:#30291b;--fo-mid-lit:#76694a;}
[data-vcfx-forest-tone="shade"] > .vcfx-forest{--fo-sky:#9fb487;--fo-haze:#4f6b52;--fo-deep:#111c13;--fo-ground:#060a06;--fo-far:#455c49;--fo-far-tr:#3b4f40;
  --fo-mid:#172a19;--fo-mid-hi:#3d5f34;--fo-mid-lit:#4c4734;--fo-ray:.13;--fo-mist:.4;}
.vcfx-forest > *,.vcfx-forest .fo-scene > *{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
/* Cena levemente desfocada (profundidade de campo); as folhas caindo ficam fora dela, nítidas */
.vcfx-forest .fo-scene{filter:blur(6px);}

/* Cores de cada peça */
.vcfx-forest .fcn{fill:var(--fo-far);opacity:.8;}
.vcfx-forest .ftr{fill:var(--fo-far-tr);opacity:.8;}
.vcfx-forest .mtr{fill:var(--fo-mid-tr);}
.vcfx-forest .mlit{fill:var(--fo-mid-lit);opacity:.75;}
.vcfx-forest .mcn{fill:var(--fo-mid);}
.vcfx-forest .mhi{fill:var(--fo-mid-hi);opacity:.6;}
.vcfx-forest .msh{fill:var(--fo-mid-sh);opacity:.6;}
.vcfx-forest .mbu{fill:#14200f;}
.vcfx-forest .ntr{fill:var(--fo-near-tr);}
.vcfx-forest .nedge{fill:var(--fo-near-edge);opacity:.6;}
.vcfx-forest .ncn{fill:var(--fo-near);}
.vcfx-forest .nfern{fill:var(--fo-fern);}
.vcfx-forest .fo-far{opacity:.9;}

/* Névoa: só no plano distante, perto do chão da clareira */
.vcfx-forest .fo-mist{opacity:var(--fo-mist);
  background:radial-gradient(60% 18% at var(--fo-cx) 70%,rgba(215,225,205,.55),transparent 80%),
             linear-gradient(180deg,transparent 52%,rgba(190,205,185,.28) 68%,transparent 86%);}
[data-vcfx-forest-mist="off"] > .vcfx-forest .fo-mist{display:none;}

/* Raios de sol saindo da abertura das copas, iluminando partes da cena */
.vcfx-forest .fo-rays{mix-blend-mode:screen;}
.vcfx-forest .fo-rays > i{position:absolute;top:2%;left:var(--x);width:var(--w);height:96%;transform-origin:50% 0;transform:rotate(var(--a));
  background:linear-gradient(180deg,rgba(var(--fo-sun),var(--fo-ray)) 0%,rgba(var(--fo-sun),calc(var(--fo-ray) * .5)) 45%,transparent 90%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);
  opacity:var(--o);will-change:opacity,transform;animation:vcfx-fo-ray var(--d) ease-in-out var(--l) infinite alternate;}
@keyframes vcfx-fo-ray{0%{opacity:calc(var(--o) * .45);transform:rotate(calc(var(--a) - 1.2deg));}100%{opacity:var(--o);transform:rotate(calc(var(--a) + 1.2deg));}}

/* Brisa: só a copa da frente e algumas copas do meio */
.vcfx-forest .fo-near-sway{transform-origin:50% 0;will-change:transform;animation:vcfx-fo-sway 9s ease-in-out -3s infinite alternate;}
.vcfx-forest .fo-mid-sway{transform-origin:50% 100%;will-change:transform;animation:vcfx-fo-sway2 13s ease-in-out -6s infinite alternate;}
@keyframes vcfx-fo-sway{0%{transform:translateX(-.6%) rotate(-.35deg);}100%{transform:translateX(.6%) rotate(.35deg);}}
@keyframes vcfx-fo-sway2{0%{transform:translateX(-.4%) skewX(-.5deg);}100%{transform:translateX(.4%) skewX(.5deg);}}

/* Pólen na luz (secundário) */
.vcfx-forest .fo-life > i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,246,205,.95),rgba(var(--fo-sun),.3) 60%,transparent 75%);
  will-change:transform,opacity;animation:vcfx-fo-p var(--d) ease-in-out var(--l) infinite alternate;}
@keyframes vcfx-fo-p{0%{transform:translate3d(0,0,0);opacity:calc(var(--o) * .25);}50%{opacity:var(--o);}100%{transform:translate3d(var(--dx),var(--dy),0);opacity:calc(var(--o) * .5);}}

/* Contêiner das folhas isolado (contain: strict): a queda delas não estende a rolagem da página */
.vcfx-forest .fo-fall{overflow:hidden;contain:strict;}
/* Folhas caindo: a queda (vertical) no elemento, o balanço e o giro no filho, a "virada" da
   folha (achata e volta) no neto — três ritmos diferentes, sem trajetória repetida */
.vcfx-forest .fo-fall > .fo-leaf{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:calc(var(--s) * .6);opacity:0;
  animation:vcfx-fo-fall var(--d) cubic-bezier(.37,.1,.6,.96) forwards;}
.vcfx-forest .fo-leaf > b{position:absolute;inset:0;animation:vcfx-fo-swing var(--sd) ease-in-out infinite alternate;}
.vcfx-forest .fo-leaf > b > u{position:absolute;inset:0;border-radius:0 100% 0 100%;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 75%,#fff) 0%,var(--c) 45%,color-mix(in srgb,var(--c) 70%,#000) 100%);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.25);animation:vcfx-fo-flip var(--fl) ease-in-out infinite alternate;}
.vcfx-forest .fo-leaf:not(.near) > b > u{opacity:.82;}
@keyframes vcfx-fo-fall{0%{transform:translate3d(0,0,0);opacity:0;}8%{opacity:.95;}85%{opacity:.9;}100%{transform:translate3d(0,var(--fall),0);opacity:0;}}
@keyframes vcfx-fo-swing{0%{transform:translateX(calc(var(--sw) * -1)) rotate(var(--r0));}100%{transform:translateX(var(--sw)) rotate(calc(var(--r0) + var(--r1) * .25));}}
@keyframes vcfx-fo-flip{0%{transform:scaleX(1) rotate(0deg);}100%{transform:scaleX(.5) rotate(25deg);}}

/* Fora da tela: tudo parado */
.vcfx-forest.paused,.vcfx-forest.paused *{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){
  .vcfx-forest *{animation:none !important;}
  .vcfx-forest .fo-fall{display:none;}
  .vcfx-forest .fo-life > i{opacity:calc(var(--o) * .7);}
}

/* Tema claro com a Floresta no fundo da página: o que fica direto sobre o fundo (topo com a
   marca e os botões, rodapé com selos e links) recebe as cores claras para continuar legível. */
.amb[data-vcfx-tone="light"][data-vcfx~="forest"] ~ .c-outer :is(.c-top,.c-footer){
  --text2:rgba(238,248,236,.9);--text3:rgba(222,240,220,.74);--fg-rgb:255,255,255;--border2:rgba(255,255,255,.22);}