/* ══════════════════════════════════════════════════════════════════════════
   MOVIMENTO — a parte de estilo. A coreografia está em `movimento.js` (GSAP).

   📌 Pedido do responsável (01/09/2026): parallax, scrollytelling, pinning,
   kinetic typography, bento com entrada em cascata, reação ao cursor. E, sobre
   a primeira versão, que era CSS puro: *"pq n bota a biblioteca? nao vai ficar
   melhor?"* — fica, e o motivo está escrito no cabeçalho do `movimento.js`:
   `animation-timeline` não existe no Safari, então todo iPhone via a página
   parada.

   🔑 ESTE ARQUIVO FICOU PEQUENO DE PROPÓSITO, e é uma decisão, não sobra.
   Quem anima é o GSAP; o CSS aqui só prepara o terreno. Duas folhas mexendo no
   mesmo `transform` é o defeito clássico desse tipo de página: o CSS escreve,
   o JS sobrescreve no quadro seguinte, e o elemento treme sem que nada apareça
   errado no console.

   ⛔ NENHUM ELEMENTO NASCE COM `opacity: 0` AQUI. Todo efeito de entrada é
   `gsap.from()`, que esconde e revela na mesma chamada — se o JS não carregar,
   a página está inteira e visível. Um `opacity: 0` nesta folha transformaria
   qualquer falha de JS numa vitrine em branco.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A barra de progresso da leitura ──────────────────────────────────────
   Nasce em `scaleX(0)`: sem o JS ela fica invisível, que é o estado honesto —
   uma barra parada em 0% seria mentira sobre a posição de quem lê. */
.progresso {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1200;   /* acima do Leaflet — ver a nota do .topo */
  background: linear-gradient(90deg, var(--ciano), var(--aco));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* ── O que o GSAP precisa que já esteja pronto ────────────────────────────
   🪤 `will-change` NAS DUAS PROPRIEDADES QUE ELE ANIMA, e só nelas. Ele promove
   o elemento a uma camada própria do compositor, o que faz o parallax rolar
   liso; usado à toa (num `.container`, por exemplo) consome memória de vídeo e
   piora justamente o que deveria melhorar. */
.bloco__arte { will-change: transform; }
.emp { will-change: transform; }

/* 🪤 O PIN PRECISA QUE A COLUNA TENHA ALTURA PRÓPRIA. O `.bloco__par` é um grid
   cujos itens esticam por padrão (`align-items: stretch`): a arte ganharia a
   altura da coluna de texto inteira, e prender um elemento tão alto quanto o
   contêiner não produz movimento nenhum — o pin existiria e não se veria.
   `align-items: start` devolve a ela a altura natural. */
@media (min-width: 900px) {
  .bloco__par { align-items: start; }
}

/* ── ♿ O desligamento ─────────────────────────────────────────────────────
   O `movimento.js` já retorna cedo em `prefers-reduced-motion` e nem registra as
   animações — este bloco é o cinto sobre o suspensório, para o caso de a
   preferência mudar com a página aberta (o JS já rodou, o CSS ainda responde).
   Não é "menos movimento": é nenhum. */
@media (prefers-reduced-motion: reduce) {
  .progresso { display: none; }
  .bloco__arte, .emp { will-change: auto; transform: none !important; }
}