/* ============================================================
   Growthway Capital — FX cluster "particulas-dark" (módulo isolado)
   Camadas decorativas: nebulosa, brasas/constelação, poeira 3D,
   véu de névoa e flash do carimbo. Tudo pointer-events:none,
   z-index abaixo do conteúdo (.container fica em z2).
   ============================================================ */

.fxpd-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

/* 3) Nebulosa de Bronze — canvas 160x90 esticado com blur pesado */
.fxpd-aurora {
  z-index: 0;
  filter: blur(46px) saturate(1.12);
  transform: scale(1.22);
}

/* 1+2) Brasas + Constelação — canvas full-res */
.fxpd-field { z-index: 1; }

/* 4) véu de breu que "levanta" com o scroll (anéis emergem do escuro) */
.fxpd-veil {
  z-index: 1;
  background: linear-gradient(180deg, rgba(9, 9, 10, 0.97) 0%, rgba(20, 14, 9, 0.94) 100%);
  opacity: 0; /* só o JS (ScrollTrigger) levanta/abaixa — sem JS, invisível */
}

/* 4) poeira de arquivo (cena Three.js própria, por cima dos anéis) */
.fxpd-dust3d { z-index: 1; }
.fxpd-dust3d canvas { display: block; width: 100% !important; height: 100% !important; }

/* conteúdo dos capítulos escuros sempre acima das camadas FX */
.scene-dark > .container,
.scene-olive > .container { position: relative; z-index: 2; }

/* 5) flash + pó do carimbo — canvas sobre o palco do carimbo,
      z2 = atrás do canvas do carimbo (z3): a luz o silhueta */
.fxpd-stampfx {
  position: absolute;
  right: -5.5rem;
  top: -20.5rem;
  width: 32rem;
  height: 31rem;
  z-index: 2;
  pointer-events: none;
}

/* efeitos pesados desligam no mobile (o conteúdo nem sente falta) */
@media (max-width: 940px) {
  .fxpd-field, .fxpd-dust3d, .fxpd-veil, .fxpd-stampfx, .fxpd-aurora { display: none !important; }
}

/* reduced-motion: nada de FX (o módulo JS também sai cedo) */
@media (prefers-reduced-motion: reduce) {
  .fxpd-layer, .fxpd-stampfx { display: none !important; }
}