/* Esfera de luz sob o cursor, em todas as páginas.

   Substituiu o rastro de pixels de `componentes/Mouse Effects/8`, que ficou
   duro demais. O que se aproveitou daquela versão foram as duas soluções que
   já estavam certas:

   - `pointer-events: none`. Uma camada por cima do site inteiro que capture o
     ponteiro mataria todo link, botão, arrasto e hover. O ponteiro atravessa.
   - `mix-blend-mode: difference`. O site tem páginas de papel claro e páginas
     pretas; uma luz branca some numa e uma sombra some na outra. Com
     `difference` a esfera inverte o que estiver embaixo, então lê como luz nos
     dois casos, sem precisar detectar tema. É a mesma técnica do título dos
     Embaixadores. */

.cursor-luz {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;                /* acima das seções, abaixo do cabeçalho fixo */
  width: var(--luz-lado);
  height: var(--luz-lado);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
  /* O degradê já morre macio na borda; o blur é o que tira o contorno de
     círculo e deixa a luz difusa, como pedido. */
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 255, var(--luz-forca)) 0%,
    rgba(255, 255, 255, calc(var(--luz-forca) * .55)) 38%,
    rgba(255, 255, 255, 0) 72%);
  filter: blur(var(--luz-borrao));
  /* O JS escreve só translate3d; a centralização fica aqui para a conta do
     laço não ter de repetir metade do lado a cada quadro. */
  margin: calc(var(--luz-lado) / -2) 0 0 calc(var(--luz-lado) / -2);
  opacity: 0;
  transition: opacity .45s var(--ease-calone, ease);
  will-change: transform;
}

/* Só acende quando o ponteiro entra na página: sem isto ela nasce no canto
   superior esquerdo antes do primeiro movimento. */
.cursor-luz.is-viva {
  opacity: 1;
}

/* Sem cursor não há esfera; movimento reduzido desliga — é decoração pura. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-luz {
    display: none;
  }
}