/* ============================================================
   AC Solução — Interação de cursor (global, todas as páginas)
   Ativada por atributo:  data-fx="surface | surface-dark | glow | card | soft | panel"
   Relevo opcional:        data-fx-tilt="2"   (graus máximos)
   O JS (pointer-fx.js) só liga em mouse/trackpad e sem "reduzir movimento"
   (classe html.fx-pointer) e injeta uma camada .fx-light em cada alvo.
   A luz fica sempre atrás do conteúdo (z-index -1 em contexto isolado).
   ============================================================ */

.fx-pointer [data-fx]{isolation:isolate}
.fx-pointer [data-fx="panel"]{position:relative}

.fx-light{position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; opacity:0;
  background:radial-gradient(var(--fx-size,360px) circle at var(--fx-x,50%) var(--fx-y,50%),var(--fx-color,rgba(29,80,247,.06)),rgba(29,80,247,0) 70%);
  transition:opacity var(--dur-slow) var(--ease-standard)}
.fx-active > .fx-light{opacity:1}

/* Superfícies claras (Cena 02 em diante): luz azul visível com relevo —
   brilho branco no centro (ponto alto), halo azul e sombra suave deslocada para baixo/direita */
[data-fx="surface"]{--fx-size:640px; --fx-color:rgba(29,80,247,.13)}
[data-fx="surface"] > .fx-light{background:
  radial-gradient(150px circle at var(--fx-x,50%) var(--fx-y,50%),rgba(255,255,255,.9),rgba(255,255,255,0) 100%),
  radial-gradient(var(--fx-size) circle at var(--fx-x,50%) var(--fx-y,50%),var(--fx-color) 0%,rgba(29,80,247,.05) 42%,rgba(29,80,247,0) 70%),
  radial-gradient(520px circle at calc(var(--fx-x,50%) + 60px) calc(var(--fx-y,50%) + 80px),rgba(8,23,56,.07),rgba(8,23,56,0) 70%)}
/* Superfícies escuras (rodapé) */
[data-fx="surface-dark"]{--fx-size:620px; --fx-color:rgba(71,119,252,.10)}
/* Painéis da Tela 01: reflexo muito discreto só na área de texto */
[data-fx="panel"]{--fx-size:460px; --fx-color:rgba(141,182,255,.06)}
/* Diferenciais: pequena resposta visual */
[data-fx="soft"]{--fx-size:280px; --fx-color:rgba(29,80,247,.06)}

/* Cards escuros com brilho: luz interna que acompanha o mouse (linguagem do "Card com brilho") */
[data-fx="glow"]{--fx-size:340px; --fx-color:rgba(109,153,252,.40)}
[data-fx="glow"] > .fx-light{mix-blend-mode:screen}

/* Cards claros (Caminhos): halo interno + borda que acende perto do cursor */
[data-fx="card"]{--fx-size:340px; --fx-color:rgba(29,80,247,.06)}
[data-fx="card"] > .fx-light::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:radial-gradient(240px circle at var(--fx-x,50%) var(--fx-y,50%),rgba(29,80,247,.55),rgba(29,80,247,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude}

/* Relevo mínimo (sem seguir o cursor, só inclina levemente sob ele) */
.fx-pointer .stat.is-done.fx-active:hover,
.fx-pointer .path.is-done.fx-active:hover{
  transform:perspective(1000px) translateY(-4px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg))}

/* Superfícies (fundos claros e escuros das seções), 17/10: a luz que segue o mouse esmaece perto das bordas
   da área, em vez de ser cortada numa linha reta quando passa de uma parte da página para outra */
[data-fx="surface"] > .fx-light,
[data-fx="surface-dark"] > .fx-light{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 140px,#000 calc(100% - 140px),transparent 100%),
                     linear-gradient(to right,transparent 0,#000 140px,#000 calc(100% - 140px),transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom,transparent 0,#000 140px,#000 calc(100% - 140px),transparent 100%),
                     linear-gradient(to right,transparent 0,#000 140px,#000 calc(100% - 140px),transparent 100%);
          mask-composite:intersect}
/* blocos de texto sem fundo (Home · Tela 01, Manuais · abertura): o reflexo também esmaece nas bordas */
[data-fx="panel"] > .fx-light{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%),
                     linear-gradient(to right,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%),
                     linear-gradient(to right,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%);
          mask-composite:intersect}