/* ==========================================================================
   Zinho Toda Hora — estados de animação.

   ÚLTIMO <link rel="stylesheet"> do <head>, depois de tokens.css, lp.css e
   cta.css. É o único arquivo da LP autorizado a esconder alguma coisa, e ele
   só o faz sob a classe .js-anim, que `assets/js/anim-boot.js` escreve no
   <html>.

   NENHUM HEX AQUI TAMBÉM. Este arquivo não tem cor: só opacidade e transform.
   ========================================================================== */

/* --------------------------------------------- 1. A dependência invertida */

/* NADA esconde nada por padrão. O esconder é opt-in do JS.
   Sem .js-anim o documento renderiza COMPLETO (ANIM-04). Uma regra
   `.rev { opacidade zerada }` fora de .js-anim seria catástrofe silenciosa: o
   JS falha, a LP fica invisível, 100% de bounce em mídia paga — e na máquina
   do dev funciona, porque lá o JS nunca falha.

   Três travas, não uma:
     1. esta regra depende de .js-anim, que só existe se um <script> rodou;
     2. o failsafe de 3s do anim-boot.js remove .js-anim se o lp.js não chegar
        ao fim do init (vendor 404, erro de parse, CSP inesperada);
     3. `gsap.from()` é proibido no lp.js — from() grava inline na CRIAÇÃO e
        prenderia o elemento invisível mesmo sem esta classe. */
.js-anim .rev { opacity: 0; transform: translateY(32px); }

/* O TÍTULO É O ÚNICO .rev COM TETO, E O TETO NÃO É NEGOCIÁVEL.
   A parada de 30% do gradiente é o mecanismo que sustenta o achado 1 do
   design-chief: se nenhum caractere cai sobre a banda da marca parceira, então
   nenhuma cor licenciada precisa ser alterada e não há exposição contratual.
   Deslocar o título para BAIXO no repouso consome exatamente esse orçamento.

   MEDIDO nas quatro larguras (distância entre a base do título já entrado e a
   parada de 30%, em px):

     360px  100 a 127px       1024px  37,1px
     768px   31,1px  <- pior  1440px  65,3px

   Com os 32px do estado geral, em 768px a base do título ia a 30,12% e
   invadia a banda. Com 16px vai a 27,83% e sobram ~15px — metade do orçamento
   da pior largura, que é a margem que absorve uma palavra a mais num título
   editado na Fase 3 sem reabrir o problema.

   NÃO aumente este valor sem reexecutar `node scripts/regua-bloco.mjs`. Ele
   reprova sozinho se alguém "arredondar" daqui para 32px de novo. */
.js-anim .bloco__titulo.rev { transform: translateY(16px); }

/* O PÃO ENTRA COM MAIS CURSO, E PODE.
   `.pao-entra` é o nível do meio do contrato de três níveis: o de cima recebe o
   parallax, a <img> de dentro recebe a flutuação, e este recebe a entrada. Três
   movimentos simultâneos, três elementos — nenhum disputa canal com ninguém.

   44px em vez dos 32px do estado geral porque o pão é decorativo e NÃO tem teto
   geométrico: a restrição dele (nenhum pão na faixa 88–100%, onde vive o texto
   legal) é medida em `.pao-parallax`, e transform de descendente não move a
   caixa do ancestral. O título é o oposto disso — ver a regra acima. */
.js-anim .pao-entra.rev { transform: translateY(44px); }

/* Estado FINAL da entrada, escrito pelo lp.js no onStart do tween.
   Sem esta regra o `clearProps: 'opacity,transform'` do fim da entrada é um
   apagador de luz: ele remove o estilo inline que o GSAP escreveu, a regra
   acima volta a valer e o elemento que acabou de aparecer some de novo.
   A ordem importa e está garantida: a classe entra ANTES de o inline sair, e
   enquanto o tween roda é o inline que governa (inline vence classe).

   `html.js-anim` e não `.js-anim`: a regra do título acima tem 3 classes, e
   esta também teria — empate resolvido por ordem no arquivo. Empate resolvido
   por ordem é uma armadilha para quem reordenar o arquivo em janeiro, e o
   sintoma seria o título PULANDO 16px para baixo no instante em que a entrada
   dele termina. O seletor de elemento desempata de vez. */
html.js-anim .rev.is-revelado { opacity: 1; transform: none; }

/* ---------------------------------------- 2. Preferência de menos movimento */

/* Isto NÃO substitui o guard de JS do lp.js: o parallax é JS escrevendo
   `transform` no atributo style, e inline vence media query. Os dois
   coexistem. Este bloco cobre o intervalo entre o parse do CSS e a execução
   do lp.js, e cobre o caso de o lp.js nunca rodar. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* Esta linha é o que impede "reduzir movimento" de virar "página em branco".
     É a armadilha de a11y mais comum em LP animada: o autor mata a animação e
     esquece que o estado inicial dela era invisível. */
  .js-anim .rev { opacity: 1 !important; transform: none !important; }
}
