/* ==========================================================================
   POLTERS — Animação
   --------------------------------------------------------------------------
   O cliente pediu movimento de scroll, de seção, de box e de slide, e o site
   tinha 7 fades de 14px na landing e nada no guia.

   Duas regras governam tudo aqui:

   1. A DURAÇÃO VEM DA DISTÂNCIA. Um elemento que percorre 40px não pode levar
      o mesmo tempo que um que atravessa a tela. Por isso cada variante tem sua
      própria duração, e não um token único.

   2. CADA ENTRADA RODA UMA VEZ. Movimento que repete a cada scroll é ruído, e
      o briefing é explícito: "nada de fundo constantemente movimentado".

   O estado de repouso é VISÍVEL. O estado inicial da animação só é aplicado
   quando o JS confirma que vai revertê-lo (html.js). Sem JS, com o observer
   falhando, ou numa aba em segundo plano, o conteúdo está lá.
   ========================================================================== */

:root {
  /* Curvas: ease-out exponencial. Sai rápido, assenta. Sem bounce. */
  --a-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --a-quint: cubic-bezier(0.22, 1, 0.36, 1);

  /* Escala de duração por distância percorrida */
  --a-curta: 0.36s;   /* 14-24px: texto, rótulo */
  --a-media: 0.52s;   /* 30-50px: card, box, imagem */
  --a-longa: 0.68s;   /* 60px+ : bloco de seção, entrada lateral */
}

/* ==========================================================================
   ENTRADA POR SCROLL — [data-anim]
   ========================================================================== */

/* Repouso: visível. Sempre. */
[data-anim] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* O estado inicial só existe quando há JS para desfazê-lo */
html.js [data-anim]:not([data-anim-in]) { opacity: 0; }

html.js [data-anim] {
  transition:
    opacity var(--a-media) var(--a-out) var(--anim-delay, 0ms),
    transform var(--a-media) var(--a-quint) var(--anim-delay, 0ms),
    filter var(--a-media) var(--a-out) var(--anim-delay, 0ms);
  /* Avisa o navegador antes do movimento, e libera depois: manter
     will-change permanente em dezenas de elementos custa memória de GPU. */
  will-change: opacity, transform;
}
html.js [data-anim][data-anim-in] {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* --- variantes de direção --- */

/* sobe: o padrão. 26px é a distância em que o olho registra a direção sem que
   o elemento pareça "cair" na tela. */
html.js [data-anim="up"]:not([data-anim-in]) { transform: translate3d(0, 26px, 0); }

/* desce: para o que vem de cima na hierarquia (kicker, rótulo) */
html.js [data-anim="down"]:not([data-anim-in]) { transform: translate3d(0, -20px, 0); }

/* entra da esquerda / da direita: o "slide" pedido. 44px porque a distância
   horizontal precisa ser maior que a vertical para ler como lateral. */
html.js [data-anim="left"]:not([data-anim-in])  { transform: translate3d(-44px, 0, 0); }
html.js [data-anim="right"]:not([data-anim-in]) { transform: translate3d(44px, 0, 0); }
html.js [data-anim="left"],
html.js [data-anim="right"] {
  transition-duration: var(--a-longa);
}

/* escala: para arte e emblema. Parte de 0.94, não de 0 — escala vinda do zero
   é a assinatura do template, e distorce o que está dentro. */
html.js [data-anim="scale"]:not([data-anim-in]) {
  transform: scale(0.94);
  transition-duration: var(--a-longa);
}

/* blur: entra desfocado e assenta. Só para imagem grande, onde o desfoque tem
   superfície para aparecer; em texto pequeno vira borrão. */
html.js [data-anim="blur"]:not([data-anim-in]) {
  transform: scale(1.03);
  filter: blur(12px);
  transition-duration: var(--a-longa);
}

/* cortina: revela por clip-path, sem mover nada. Para título de seção, onde
   deslocamento competiria com a leitura. */
/* O recorte SO vale para quem o JS armou (data-anim-armado): elemento longe
   o bastante da dobra para que a animacao aconteca dentro do campo de visao.

   Medido em producao: um <h2 wipe> parou em top=887 numa janela de 892 (5px
   visiveis). O observer, com rootMargin -12% e threshold 6%, corretamente nao
   o animou. Mas o repouso do wipe era recorte total — titulo legivel na tela e
   invisivel para sempre. Agora o repouso do wipe e visivel, como nas outras
   variantes. */
html.js [data-anim="wipe"][data-anim-armado]:not([data-anim-in]) {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
}
html.js [data-anim="wipe"] {
  transition: clip-path var(--a-longa) var(--a-quint) var(--anim-delay, 0ms);
}
html.js [data-anim="wipe"][data-anim-in] { clip-path: inset(0 0 0 0); }

/* texto curto: distância menor, duração menor */
html.js [data-anim="text"]:not([data-anim-in]) { transform: translate3d(0, 14px, 0); }
html.js [data-anim="text"] { transition-duration: var(--a-curta); }

/* ==========================================================================
   HEADER QUE REAGE AO SCROLL
   Esconde ao descer, volta ao subir. Devolve tela ao conteúdo sem tirar a
   navegação de alcance — um toque para cima e ela está de volta.
   ========================================================================== */
.header {
  transition:
    height var(--t-slow) var(--a-out),
    background-color var(--t-slow) var(--a-out),
    transform var(--t-slow) var(--a-quint),
    box-shadow var(--t-slow) var(--a-out);
}
.header.is-hidden { transform: translateY(-100%); }
.header.is-scrolled {
  /* Sombra em vez de borda: régua de 1px é banida no projeto */
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   BARRA DE PROGRESSO DE LEITURA
   Anima scaleX, não width: width causa layout a cada frame do scroll.
   ========================================================================== */
/* ==========================================================================
   BARRA DE PROGRESSO DO SCROLL — REMOVIDA
   --------------------------------------------------------------------------
   "essa animacao de linha conforme o scroll eh patetico"

   Era uma faixa roxa fixa no topo, preenchendo conforme a rolagem. O guia
   tinha DUAS ao mesmo tempo, empilhadas: esta (.scroll-progress, via main.js)
   e a .read-progress do guia.css, via guia.js — as duas fixas no topo, as
   duas em roxo, as duas medindo a mesma coisa.

   As duas sairam. O briefing pede zero "trejeitos de IA", e a barra e um
   enfeite que nao informa nada acionavel: a pessoa ja sabe onde esta pela
   posicao da barra de rolagem do proprio navegador. No guia, quem marca
   posicao de verdade e o capitulo ativo destacado no indice lateral.

   Se algum dia voltar: o markup era <div class="scroll-progress"> nos dois
   HTML, e o handler ficava no main.js apos o bloco 4 (header), escrevendo
   --p com o ratio do scroll.
   ========================================================================== */

/* ==========================================================================
   PARALLAX POR CAMADA
   ========================================================================== */
[data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  [data-parallax] { transform: translate3d(0, var(--py, 0px), 0); }
}

/* ==========================================================================
   REDUCED MOTION
   Não é opcional. Quem pediu menos movimento recebe crossfade, e as animações
   ambiente (brasa, carrossel) param.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.js [data-anim]:not([data-anim-in]) {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
  }
  html.js [data-anim] { transition-duration: 0.001s; }
  .header.is-hidden { transform: none; }
  [data-parallax] { transform: none; }
}