/* =====================================================================
   SOUL CORE ADS · prism-grid.css
   GRADE PRISMÁTICA da Hero — v1.0

   Port de um componente React ("Prism Grid"). O que mudou no caminho, e
   por quê:

   1. A GRADE NÃO É FEITA DE DIVS.
      O original cria um <div> por célula: 510 a 1920x1080 e 920 a
      2560x1440, cada um com border. Só que uma grade de linhas é
      exatamente o que dois repeating-linear-gradient desenham — em UM
      elemento, pintado pelo compositor, sem custo de layout.
      920 divs → 1 fundo + um punhado de células acesas. O visual é o
      mesmo; o que sai é a árvore de DOM.

   2. AS CÉLULAS ACESAS VÊM DE UM POOL.
      O original monta e desmonta nós a cada movimento do mouse. Aqui há
      N elementos fixos que só trocam de posição e opacidade — nada de
      criar/remover nó em resposta a pointermove.

   3. A MATEMÁTICA FOI PORTADA INTEIRA.
      screenToPlane() em prism-grid.js inverte a projeção em perspectiva
      para descobrir QUAL célula está sob o cursor num plano inclinado.
      Essa parte é a única não-óbvia do componente e ficou fiel.

   Parâmetros do preview, mantidos: célula 64px, borda 1px em #C9A227 a
   13%, rotação Y 6° / X -4°, perspectiva 1000px, paleta de 2 cores
   (#1A1A1A e #C9A227 — grafite e ouro da marca).
   ===================================================================== */

.prism{
  position:absolute; inset:0;
  z-index:0;                       /* .hero-inner é 1; a seta também é 0 */
  overflow:hidden;
  pointer-events:none;             /* nunca rouba clique do Hero */
  perspective:1000px;
  perspective-origin:center center;
  opacity:0;
  transition:opacity 900ms ease-out;
  contain:layout paint style;
}
.prism.is-on{ opacity:1; }

/* O PLANO
   Sobredimensionado em 16%: ao inclinar, a aresta distante encolhe para
   dentro e deixaria o fundo aparecendo nos cantos. A conta do cursor usa
   as medidas DESTE plano, não as da viewport — por isso o excedente não
   desalinha nada. */
.prism__plane{
  position:absolute; left:50%; top:50%;
  width:116%; height:116%;
  transform:translate(-50%,-50%) rotateY(6deg) rotateX(-4deg);
  transform-origin:center center;
  transform-style:preserve-3d;

  /* A GRADE, em duas passadas de gradiente repetido.
     Cada uma desenha UMA linha de 1px e um vão transparente de 63px; o
     cruzamento das duas dá a malha. Um único elemento, uma única camada
     de composição. */
  --cell:64px;
  --line:#C9A22721;
  background-image:
    repeating-linear-gradient(to right,  var(--line) 0 1px, transparent 1px var(--cell)),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--cell));
  background-position:0 0, 0 0;
}

/* CÉLULAS ACESAS · pool fixo, criado uma vez pelo JS.
   O JS só escreve --x/--y/--c e a opacidade. translate3d para o
   compositor cuidar do resto; nada de left/top, que disparariam layout. */
.prism__cell{
  position:absolute; left:0; top:0;
  width:var(--cell); height:var(--cell);
  background:var(--c, #C9A227);
  transform:translate3d(var(--x,0), var(--y,0), 0);
  opacity:0;
  pointer-events:none;
  will-change:opacity;
}
/* Acende no ato e apaga em 1s — mesmos tempos do preview
   (inDuration 0 / outDuration 1). O acender instantâneo é o que dá a
   sensação de resposta; o apagar longo é o que deixa o rastro. */
.prism__cell.is-lit{ opacity:.5; transition:none; }
.prism__cell.is-out{ opacity:0; transition:opacity 1000ms linear; }

/* HANDOFF COM O AMBIENT
   O #ambient-canvas é position:fixed e cobre a viewport inteira — não dá
   para "removê-lo do Hero" recortando por seção. Enquanto o Hero está em
   vista, ele sai de cena e a grade assume; ao rolar, ele volta.
   Uma camada entra, uma sai: a densidade visual do Hero não aumenta. */
html.prism-hero #ambient-canvas{
  opacity:0 !important;
  transition:opacity 700ms ease;
}

/* MOBILE E PONTEIRO GROSSO
   Sem cursor não há célula para acender, então sobra só a malha — que
   ainda vale como textura, mas mais discreta e sem o plano inclinado
   (em tela estreita a inclinação corta a grade em diagonal e lê como
   defeito de renderização). */
@media (hover:none), (pointer:coarse), (max-width:640px){
  .prism__plane{
    width:100%; height:100%;
    transform:translate(-50%,-50%);
    --cell:48px;
    --line:#C9A2271A;
  }
  .prism__cell{ display:none; }
}

/* ACESSIBILIDADE
   Mesmo critério do resto do projeto: a grade é estrutura, não enfeite,
   então permanece — o que some é o movimento. Sem células acendendo e
   sem fade de entrada. O ambient também não é desligado, porque sob
   reduced-motion ele já está em display:none (§ #ambient-canvas). */
@media (prefers-reduced-motion:reduce){
  .prism{ opacity:1; transition:none; }
  .prism__cell{ display:none; }
  html.prism-hero #ambient-canvas{ transition:none; }
}

@media print{ .prism{ display:none !important; } }

/* NOTA DE ESPECIFICIDADE
   .dc-ambient-on sobe a opacidade do canvas para 1 com especificidade de
   classe. O !important acima existe só para isso: o handoff precisa
   ganhar de uma regra que já está ligada, sem eu ter de editar o CSS do
   ambient e criar acoplamento entre os dois módulos. */