/* ============================================================================
   efeitos.css — o feixe do farol e a entrada da primeira dobra
   ----------------------------------------------------------------------------
   O símbolo da Inriqueza é um feixe de luz de farol: três faixas assimétricas
   projetadas para a frente. A atmosfera do site sai daí, desenhada com
   gradientes — sem WebGL, sem biblioteca de animação, sem imagem.

   Houve aqui uma revelação por rolagem — cada seção e cada cartão chegando por
   um fade ao cruzar a dobra. Saiu a pedido do usuário; o registro de por que e de
   como refazer está no lugar dela, mais abaixo. O que restou de movimento é a
   entrada da primeira dobra, que roda uma vez no carregamento, e o feixe.
   ========================================================================== */

/* --- PALCO DO FEIXE ------------------------------------------------------- */
.beam-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  --beam-x: 18%;
  --beam-y: 12%;
}

.beam-stage::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(60% 55% at var(--beam-x) var(--beam-y),
      rgb(var(--accent-wash-rgb) / 0.20), transparent 62%),
    radial-gradient(45% 40% at calc(var(--beam-x) + 34%) calc(var(--beam-y) + 26%),
      rgb(var(--chart-4-rgb) / 0.14), transparent 68%);
  filter: blur(18px);
}

/* Varredura do farol: cunha clara girando devagar em torno da origem. */
.beam-sweep {
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg at var(--beam-x) var(--beam-y),
    transparent 0deg,
    rgb(var(--accent-wash-rgb) / 0.00) 6deg,
    rgb(var(--accent-wash-rgb) / 0.13) 15deg,
    rgb(var(--accent-wash-rgb) / 0.03) 27deg,
    transparent 40deg,
    transparent 190deg,
    rgb(var(--accent-wash-rgb) / 0.07) 205deg,
    transparent 226deg,
    transparent 360deg
  );
  -webkit-mask-image: radial-gradient(70% 70% at var(--beam-x) var(--beam-y), #000 10%, transparent 78%);
          mask-image: radial-gradient(70% 70% at var(--beam-x) var(--beam-y), #000 10%, transparent 78%);
  animation: farolSweep 26s linear infinite;
  transform-origin: var(--beam-x) var(--beam-y);
}

/* As três faixas do símbolo, em luz. */
.beam-bands {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(75% 70% at var(--beam-x) var(--beam-y), #000 5%, transparent 80%);
          mask-image: radial-gradient(75% 70% at var(--beam-x) var(--beam-y), #000 5%, transparent 80%);
}

.beam-band {
  position: absolute;
  left: -30%;
  width: 160%;
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--accent-wash-rgb) / 0.55) 22%,
    rgb(var(--accent-wash-rgb) / 0.12) 60%,
    transparent 92%
  );
  animation: bandDrift 14s var(--ease-out) infinite;
}

.beam-band:nth-child(1) { top: 26%; height: 2px; --band-rot: -11deg; animation-delay: 0s; }
.beam-band:nth-child(2) { top: 41%; height: 1px; --band-rot: -6deg;  animation-delay: -4.6s; }
.beam-band:nth-child(3) { top: 55%; height: 3px; --band-rot: -2deg;  animation-delay: -9.2s; }

@keyframes farolSweep { to { transform: rotate(360deg); } }
@keyframes bandDrift {
  0%, 100% { opacity: 0.15; transform: translateX(-4%) rotate(var(--band-rot, -8deg)); }
  50%      { opacity: 0.85; transform: translateX(4%)  rotate(var(--band-rot, -8deg)); }
}

/* Malha técnica de fundo — a planilha por trás da luz. */
.grid-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(var(--line-rgb) / 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--line-rgb) / 0.10) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent 85%);
          mask-image: radial-gradient(70% 60% at 50% 35%, #000, transparent 85%);
  opacity: 0.7;
}

/* Uma seção que hospeda o feixe precisa criar contexto de empilhamento e
   manter o conteúdo acima dele.

   `clip`, E NÃO `hidden`. Os dois recortam igual; só o `hidden` transforma a
   seção num CONTÊINER DE ROLAGEM. Nada aqui depende disso hoje — a revelação por
   rolagem que dependia foi removida —, mas `animation-timeline: view()` se prende
   ao contêiner de rolagem mais próximo, e em 21/09 este `hidden` congelava toda
   revelação dentro de uma seção com feixe: no `#metodo` os sete blocos marcavam
   83%, 68%, 70%, 40%… e não se mexiam ao rolar. Fica `clip` para a armadilha não
   ser redescoberta.

   `hidden` fica na linha de cima como reserva para quem não entende `clip`
   (Safari 15 e anteriores). */
.tem-feixe {
  position: relative;
  overflow: hidden;
  overflow: clip;
}
.tem-feixe > *:not(.beam-stage):not(.grid-veil) { position: relative; z-index: 1; }

/* O FEIXE SANGRA A SEÇÃO INTEIRA, e não os 1.360px do miolo.
   `.beam-stage` e `.grid-veil` moram dentro de um `wp:html`, e o layout
   `constrained` trata todo filho como CONTEÚDO: carimba `max-width: 1360px` e
   `margin-inline: auto` — em elemento posicionado por `inset: 0` também, porque
   ali `left: 0; right: 0; width: auto` com margem automática resulta em caixa
   centralizada de 1.360px. A seção é `alignfull`, então numa janela de 1.440px a
   atmosfera parava 32px antes de cada borda e deixava uma faixa de fundo cru dos
   dois lados — visível como "moldura" em qualquer tela acima de ~1.425px, e
   invisível abaixo disso. Não era diferença de tema: era de largura de janela.

   A margem zero também importa: sendo o segundo filho, o véu ganhava o `blockGap`
   do grupo como `margin-block-start` e descia 24px, o que abria a mesma faixa no
   topo. */
.tem-feixe > .beam-stage,
.tem-feixe > .grid-veil {
  max-width: none;
  margin: 0;
}

/* --- REALCE QUE SEGUE O CURSOR ------------------------------------------- */
/* `clip` pelo mesmo motivo do `.tem-feixe`: recortar o brilho nos cantos
   arredondados não deve custar um contêiner de rolagem no meio do caminho. */
.flashlight-target {
  position: relative;
  overflow: hidden;
  overflow: clip;
}

.flashlight-target::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(480px circle at var(--mouse-x, 50%) var(--mouse-y, 0),
    rgb(var(--accent-wash-rgb) / 0.16), transparent 42%);
  opacity: 0;
  transition: opacity var(--t-slow) ease;
  pointer-events: none;
  z-index: 0;
}
.flashlight-target:hover::before { opacity: 1; }
.flashlight-target > * { position: relative; z-index: 1; }

/* --- REVELAÇÃO POR ROLAGEM: NÃO EXISTE MAIS ------------------------------
   Houve aqui um `animation-timeline: view()` que trazia cada seção e cada cartão
   por um fade ao cruzar a dobra. Saiu a pedido do usuário, depois de visto no ar:
   o conteúdo deste site é denso — tabelas, demonstrativos, cifras — e um bloco
   que chega esmaecido atrapalha exatamente quem está lendo número.

   O que fica de movimento é a entrada da primeira dobra (`surgir`, em blocos.css),
   que acontece uma vez no carregamento, e o feixe do farol.

   Se um dia voltar: o mecanismo é `animation-timeline: view()` com
   `animation-range` em `cover` dos dois lados — `entry` percorre a altura do
   próprio elemento e faz um olho de seção de 18px animar em 1px de rolagem. E a
   seção precisa de `overflow: clip`, nunca `hidden`, senão vira contêiner de
   rolagem e congela a linha do tempo (ver `.tem-feixe`, acima). */

/* --- MOVIMENTO REDUZIDO ---------------------------------------------------
   A luz para, o conteúdo permanece. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* A LUZ DE AMBIENTE PARA. A varredura do farol e as três faixas giram e
     deslizam para sempre, sem que ninguém tenha pedido — é exatamente o tipo de
     movimento contínuo de que a preferência trata. Ficam paradas e acesas. */
  .beam-sweep { animation: none; opacity: 0.5; }
  .beam-band { animation: none; opacity: 0.4; }

  /* A ENTRADA DA PRIMEIRA DOBRA FICA, SÓ QUE SEM ANDAR.
     Zerar o deslocamento e o desfoque deixa o fade de opacidade, que não desloca
     nada na tela — o que incomoda em transtorno vestibular é a coisa ANDAR, não a
     opacidade. Apagar a entrada inteira seria tirar mais do que a preferência
     pede.

     O `!important` da duração existe para vencer a regra do `*` lá em cima, que é
     quem neutraliza as animações de plugin: sem ele a entrada do herói terminaria
     em 0,001ms, que é o mesmo que não existir. */
  :root {
    --surge-y: 0px;
    --surge-blur: 0px;
  }
  .heroi-texto .wp-block-column > * { animation-duration: 900ms !important; }
}