/* ==========================================================================
   Growthway Capital — FX cluster "fotos-vivas" (módulo isolado)
   1) .gw-grain   — grão de filme 16mm (canvas fixo, 12fps, soft-light)
   2) .gw-slices  — reveal editorial por réguas de coluna (fatias + hairlines)
   3) .gw-depth   — pedra com profundidade (canvas WebGL sobre a foto-âncora)
   Tudo decorativo: pointer-events none, aria-hidden, e sem JS nada disso
   existe no DOM — as fotos originais ficam intactas.
   ========================================================================== */

/* grão de filme: abaixo do dock (z 60) e do skip-link (z 100);
   o JS fura o desenho (clearRect) sobre .topbar/.footer-legal/.scene-legal/
   .footer-meta e zera a opacidade sobre o rodapé */
.gw-grain {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

/* fatias de coluna: grid de 7 colunas com hairline de 2px (o vão mostra o
   fundo do card, como réguas de diagramação); fecha e se remove ao selar */
.gw-slices {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  pointer-events: none;
}

.gw-slices > div {
  background-repeat: no-repeat;
  will-change: clip-path, transform;
}

/* profundidade: canvas colado sobre a foto full-bleed da cena; herda o
   filter/opacity computados da própria <img> via JS (mesma direção de arte).
   Fica em z 0, abaixo do ::after de legibilidade (z 1) e do .container (z 2) */
.gw-depth {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.gw-depth canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* efeito pesado desliga no mobile (grão incluído: modulava ±6% sobre texto pequeno) */
@media (max-width: 940px) {
  .gw-depth, .gw-grain { display: none !important; }
}

/* cinto e suspensório: com reduced-motion o JS nem cria os nós, mas se
   a preferência mudar em runtime nada decorativo permanece visível */
@media (prefers-reduced-motion: reduce) {
  .gw-grain, .gw-depth, .gw-slices { display: none !important; }
}