/* Faísca de Clique
   Cada clique solta um pequeno estouro de traços que saem do ponto clicado,
   encolhem e somem. Confirma o gesto sem mexer em nada do layout: é uma tela
   transparente por cima da área (ou da página inteira, com data-fx-pagina).
   Desenhado em canvas pelo JS; o CSS só posiciona a tela e guarda os tokens. */
:root{
  --fx-bg:#000000;
  --fx-ink:#ededed;
  --fx-accent:#ea5420;
  --fx-muted:#7c7c7c;
  --fx-speed:1;
  --fx-radius:12px;

  --fx-faisca-cor:#ededed;       /* cor dos traços */
  --fx-faisca-quantidade:8;      /* quantos traços por clique (8 = um a cada 45°) */
  --fx-faisca-tamanho:12px;      /* comprimento do traço no começo (encolhe até sumir) */
  --fx-faisca-raio:22px;         /* até onde o traço viaja a partir do ponto clicado */
  --fx-faisca-espessura:2px;     /* grossura da linha */
  --fx-faisca-duracao:460ms;     /* vida de cada estouro */
  --fx-faisca-brilho:0px;        /* halo em volta dos traços (0 = seco) */
  --fx-faisca-giro:0deg;         /* gira o leque inteiro (22.5deg = traços nas diagonais) */
  --fx-faisca-z:5;               /* camada da tela dentro da área */
}

/* a área que recebe os cliques: só precisa ser um contexto de posição */
.fx-faisca-de-clique{position:relative}

/* a tela onde os traços são desenhados: cobre a área e não rouba clique nenhum */
.fx-faisca-de-clique__tela{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:var(--fx-faisca-z);
  display:block;
}

/* página inteira: a tela vira fixa e acompanha a viewport */
.fx-faisca-de-clique--pagina{position:static}
.fx-faisca-de-clique--pagina .fx-faisca-de-clique__tela{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
}

/* reduced motion: o estouro aparece pronto (traços no meio do caminho) e some,
   sem viajar. Continua confirmando o clique. */
.fx-faisca-de-clique.fx-rm .fx-faisca-de-clique__tela{opacity:.9}