/* ═══════════════════════════════════════════════════════════════════
   HORAC · Beams Background — casca do efeito
   Par do beams-background.js. Opt-in: nada aqui atinge a página sem
   o elemento .feixes existir.
   ═══════════════════════════════════════════════════════════════════ */

.feixes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* O canvas renderiza a 45% e o desfoque acontece aqui: mais barato
     que o ctx.filter do original e é o que dá a maciez dos feixes. */
  filter: blur(18px);
  /* Duas funções na mesma máscara: dissolver as bordas do quadro (senão
     viram linha reta contra o papel) e recuar os feixes da coluna de
     texto — medido, eles derrubavam a microcopy para 4,49:1. O centro
     deslocado para 76% concentra o efeito onde vive o campo. */
  -webkit-mask-image: radial-gradient(58% 128% at 86% 42%, #000 26%, rgba(0,0,0,0.74) 54%, rgba(0,0,0,0.22) 79%, transparent 100%);
  mask-image: radial-gradient(58% 128% at 86% 42%, #000 26%, rgba(0,0,0,0.74) 54%, rgba(0,0,0,0.22) 79%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  /* sem movimento: um quadro estático, ainda mais discreto */
  .feixes { opacity: 0.6; }
}