/* ==========================================================================
   TAF COMUNICAÇÃO — EFEITOS GLOBAIS
   Lente f/1.2 na rolagem + marca-texto nos títulos.
   Carregado depois de css/style.css em todas as páginas.
   ========================================================================== */

/* Os deslocamentos laterais da lente não podem criar rolagem horizontal.
   clip (em vez de hidden) preserva o cabeçalho sticky. */
html,
body {
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   MARCA-TEXTO
   O preenchimento amarelo cresce da esquerda para a direita quando o trecho
   entra na faixa central da tela. A cor do texto continua a escura do site.
   -------------------------------------------------------------------------- */
.mark,
.section-title .mark,
.hero-title .mark,
.hero-title__accent.mark {
  background-color: transparent;
  background-image: linear-gradient(
    transparent 12%,
    var(--yellow) 12%,
    var(--yellow) 88%,
    transparent 88%
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.12em;
  margin: 0 -0.12em;
  color: var(--black);
  transition: background-size 1.1s cubic-bezier(0.7, 0, 0.2, 1);
}

.mark.on,
.section-title .mark.on,
.hero-title .mark.on,
.hero-title__accent.mark.on {
  background-size: 100% 100%;
}

/* --------------------------------------------------------------------------
   LENTE
   O JavaScript calcula blur, opacidade, escala e deslocamento a cada frame.
   Nenhuma transição nesses elementos: o movimento acompanha a rolagem.
   -------------------------------------------------------------------------- */
.lens {
  transform-origin: center;
  will-change: filter, transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .lens {
    will-change: auto;
  }

  .mark,
  .section-title .mark,
  .hero-title .mark,
  .hero-title__accent.mark {
    transition: none;
    background-size: 100% 100%;
  }
}