/* ==========================================================================
   ARQUIBANCADA — MOVIMENTO
   ADR-0012: movimento em camadas por capacidade, sem biblioteca de scroll.
   Pesquisa: docs/research/movimento-scroll-driven.md

   TRÊS REGRAS QUE GOVERNAM ESTE ARQUIVO INTEIRO

   1. A página tem de estar completa e correta com este arquivo REMOVIDO
      **e também com a timeline parada**. São estados diferentes, e o segundo
      é o que quase escapou: `opacity: 0` no `from` de um reveal deixa o
      conteúdo INVISÍVEL sempre que a timeline existe mas não avança — captura
      de página inteira, impressão, preview embutido. Descoberto medindo um
      screenshot em 2026-08-25.
      Por isso o reveal daqui anima SÓ deslocamento, nunca opacidade.
      Nada de conteúdo que só existe animado — quem não tem suporte, quem pediu
      movimento reduzido e quem capturou a página veem a mesma coisa.
   2. O LCP nunca anima. O hero é o candidato a LCP; animar sua opacidade
      adiaria a métrica. Anima-se o bloco de cor por cima, nunca a foto.
   3. Movimento é declarado por `no-preference`, não removido por `reduce`.
      É aditivo: se a media query falhar, falha para o lado sem movimento.
      Padrão medido no on.com — 13 blocos `no-preference`, nenhum `reduce`.

   Nota honesta sobre conformidade: respeitar `prefers-reduced-motion` é
   técnica suficiente para o critério 2.3.3, que é **AAA**. O alvo do projeto
   é AA. Fazemos porque custa uma media query e é o certo — mas não é
   obrigação do nível contratado, e não deve ser comunicado como tal.
   ========================================================================== */


/* Registro do custom property que a costura do hero anima. Fica no topo, e
   fora de qualquer `@supports` ou `@media`, porque `@property` é uma regra de
   registro do documento — não uma declaração condicional.

   Sem o registro, o navegador trata `--costura-abre` como texto e a animação
   SALTA do valor inicial para o final na metade, em vez de interpolar. Com
   `syntax: "<length>"` ele passa a ser um comprimento de verdade.
   Suporte: Chrome 85+, Safari 16.4+, Firefox 128+ — o piso do projeto. */
@property --costura-abre {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}


/* ==========================================================================
   CAMADA 1 — funciona em TODO o piso de navegador do projeto
   Chrome 111+ · Safari 16.4+ · Firefox 128+. Zero JS, zero risco.
   É onde está quase todo o efeito percebido.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* Uma curva de entrada e uma de saída para o site inteiro. Transição com
     curva diferente a cada componente é o que faz um site parecer remendado:
     o olho percebe a inconsistência antes de saber nomeá-la. */

  /* --- Seção sticky --- */
  .sticky-painel {
    position: sticky;
    inset-block-start: calc(var(--altura-header) + var(--e-4));
  }

  /* --- Estados --- */
  .botao,
  .nav a,
  .cartao,
  .galeria__item,
  .rodape a {
    transition:
      background-color var(--tempo-curto) var(--curva-entrada),
      color var(--tempo-curto) var(--curva-entrada),
      border-color var(--tempo-curto) var(--curva-entrada),
      box-shadow var(--tempo-medio) var(--curva-entrada),
      transform var(--tempo-medio) var(--curva-entrada);
  }

  /* Elevação: a sombra cresce junto com o deslocamento, senão o cartão
     parece deslizar em vez de subir. */
  .cartao:hover {
    transform: translateY(-0.25rem);
    box-shadow: var(--sombra-2);
  }
  .botao:hover { transform: translateY(-0.0625rem); }
  .botao:active { transform: translateY(0); transition-duration: 60ms; }

  .galeria__item:hover { box-shadow: var(--sombra-2); }

  .regua { transform-origin: left center; }
}

/* `scroll-snap` fica FORA da media query: não é decoração, é o mecanismo de
   navegação da galeria. Desligá-lo sob movimento reduzido quebraria a função.
   O que a media query controla é o `scroll-behavior`. */
@media (prefers-reduced-motion: reduce) {
  .galeria__trilho { scroll-behavior: auto; }
  html { scroll-behavior: auto; }
}


/* ==========================================================================
   CAMADA 2 — scroll-driven, dentro de @supports

   `animation-timeline` NÃO é Baseline. Chrome 115+ e Safari 26+/iOS 26+ têm;
   o Firefox não suporta em NENHUMA versão estável, e é ele que bloqueia o
   Baseline desde set/2025. Safari 16.4 a 25 também ficam de fora.

   Sem suporte, a animação não roda e o elemento fica no estado final: a
   página fica correta. O @supports torna essa degradação explícita.

   Fonte: MDN + WebDX web-features explorer, verificados em 2026-08-25.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* --- Reveal ao entrar na viewport ---
           `view()` mede o progresso do elemento atravessando a viewport.
           Estado final = estado sem animação: é o que garante a regra 1. */
    .revela {
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    /* Sem `opacity`, de propósito — ver a regra 1 no topo do arquivo.
       O pior caso possível é o conteúdo aparecer deslocado, nunca invisível. */
    @keyframes revelar {
      from { transform: translateY(2rem) scale(0.985); }
      to   { transform: none; }
    }

    /* Escalonamento: itens irmãos entram em sequência, não em bloco.
       Feito com `animation-range` deslocado por posição — não com delay,
       porque delay em timeline de scroll não faz o que parece: a timeline é
       posição, não tempo. */
    .cartoes > :nth-child(2),
    .depoimentos > :nth-child(2) { animation-range: entry 6% entry 61%; }
    .cartoes > :nth-child(3),
    .depoimentos > :nth-child(3) { animation-range: entry 12% entry 67%; }
    .cartoes > :nth-child(4) { animation-range: entry 18% entry 73%; }


    /* ====================================================================
       O HERO SAI EM CAMADAS — 2026-08-26

       Parallax é duas camadas correndo em velocidades diferentes. Aqui a
       camada que NÃO se move é a foto: regra 2 no topo deste arquivo, o LCP
       nunca anima. Quem se move é o bloco de cor por cima dela, e o texto
       por cima do bloco.

       A ordem das velocidades é a que a física do parallax pede: o fundo é o
       mais lento e a frente é a mais rápida. A foto acompanha a página (mais
       lenta), o bloco ganha um pouco, o texto ganha mais. O olho lê isso como
       profundidade, e nenhuma das três precisou de biblioteca.

       TODO `from` É IDENTIDADE, e isso não é estilo — é a regra 1. Com
       `transform: none` no `from`, o primeiro paint e a timeline parada dão
       exatamente a mesma tela que dariam sem este arquivo. Um `from` com
       deslocamento faria o hero nascer torto em quem não rola a página.
       ==================================================================== */

    .hero__bloco {
      animation: hero-bloco-sai linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }

    @keyframes hero-bloco-sai {
      from { transform: none; }
      to   { transform: translateY(-12%); }
    }

    .hero__texto {
      animation: hero-texto-sai linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }

    @keyframes hero-texto-sai {
      from { transform: none; }
      to   { transform: translateY(-28%); }
    }

    /* --- A costura abre conforme o hero sai ---
       O corte diagonal é a assinatura da marca; é ele que deve se mexer, não
       um enfeite ao lado. Enquanto o hero sobe, o bloco recua na diagonal e
       entrega mais estádio.

       `@property` é o que torna um custom property de comprimento animável de
       verdade — sem o registro, o valor salta no meio em vez de interpolar.
       Suporte: Chrome 85+, Safari 16.4+, Firefox 128+, que é exatamente o
       piso de navegador do projeto.

       A degradação está costurada em dois pontos, de propósito:
       · o `clip-path` base em `componentes.css` NÃO menciona esta variável,
         então onde este arquivo não roda a diagonal continua igual;
       · o `var()` abaixo carrega fallback `0px`. Se o `@property` não
         registrar, a conta vira o valor estático e a diagonal fica parada —
         nunca ausente. Sem o fallback, o `var()` inválido derrubaria o
         `clip-path` inteiro e o bloco viraria um retângulo. */
    @media (min-width: 768px) {
      .hero__bloco {
        clip-path: polygon(
          0 0,
          100% 0,
          calc(100% - var(--costura-hero) - var(--costura-abre, 0px)) 100%,
          0 100%
        );
        animation:
          hero-bloco-sai linear both,
          hero-costura-abre linear both;
        animation-timeline: view(), view();
        animation-range: exit 0% exit 100%, exit 0% exit 100%;
      }

      @keyframes hero-costura-abre {
        from { --costura-abre: 0px; }
        to   { --costura-abre: 5rem; }
      }
    }

    /* ====================================================================
       AS SEÇÕES CHEGAM — título, régua e corpo em sequência

       O escalonamento é por `animation-range` deslocado, nunca por `delay`:
       numa timeline de scroll o eixo é POSIÇÃO, não tempo, e delay ali não
       faz o que o nome promete. O mesmo motivo já está registrado no
       escalonamento dos cartões, acima.

       Sem opacidade, como todo o resto do arquivo.
       ==================================================================== */

    .titulo-secao {
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }

    .titulo-secao + .regua + .texto-guia,
    .titulo-secao ~ .texto-guia {
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 58%;
    }

    /* ====================================================================
       O CABEÇALHO ENCOLHE E FICA TRANSLÚCIDO AO ROLAR

       `scroll(root block)` com alcance curto: a troca acontece nos primeiros
       6rem de rolagem e não volta a mudar. Sem JS e sem classe `.rolado`.

       O par de contraste foi calculado no pior caso, que é o bloco escuro do
       hero passando por baixo: o fundo composto vira ~#DEE0E5 e o texto tinta
       `#111827` fica em **13,4:1**. Passa com folga larga — o cabeçalho nunca
       chega perto do limite, o que é a única forma honesta de animar algo
       atrás de texto.
       ==================================================================== */

    .cabecalho {
      animation: cabecalho-rola linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 6rem;
    }

    @keyframes cabecalho-rola {
      from {
        background-color: var(--color-surface);
        box-shadow: none;
      }
      to {
        background-color: var(--color-header-rolado);
        box-shadow: var(--sombra-1);
      }
    }

    /* --- Régua que cresce ao entrar na viewport --- */
    .regua {
      animation: crescer linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }

    @keyframes crescer {
      from { transform: scaleX(0.2); }
      to   { transform: scaleX(1); }
    }

    /* --- O hero não anima. Removido em 2026-08-26 com a reescrita da peça.
       Três motivos, e o primeiro basta:

       1. ADR-0012: o LCP nunca anima. A foto do hero é o candidato a LCP, e
          as regras anteriores lhe davam `transform` e `will-change` já no
          primeiro paint — o `from` do keyframe é estado inicial, não repouso.
       2. O degradê que a outra regra fechava não existe mais: o contraste do
          hero agora é o do bloco sólido, não o de uma camada sobre a foto.
       3. Numa faixa de 27rem, parallax é ruído. Ele existia para dar o que
          fazer a uma cortina de 74% da janela.

       O `scale(1.08)` daquela regra também era a causa do vazamento de
       transform documentado em `componentes.css` (15px acima e 32px abaixo do
       hero, invadindo a faixa de aviso). Sai a animação, sai o vazamento. --- */

    /* --- Véu que fecha conforme a seção entra ---
           A foto de fundo aparece mais quando a seção chega e escurece
           conforme sai. O véu NUNCA passa abaixo do limiar de contraste:
           a animação vai de 0,72 (o token) para 0,84, sempre acima dos 0,62
           medidos. Animar para o lado mais claro seria animar acessibilidade,
           e isso não se faz. --- */
    .secao--velada::before {
      animation: adensar linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    @keyframes adensar {
      0%   { opacity: 1; }
      50%  { opacity: 0.88; }
      100% { opacity: 1; }
    }

    /* --- A foto de fundo desliza devagar dentro da seção --- */
    .secao--velada > .fundo img {
      animation: fundo-desliza linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    @keyframes fundo-desliza {
      from { transform: scale(1.12) translateY(-3%); }
      to   { transform: scale(1.12) translateY(3%); }
    }

    /* --- Barra de progresso de leitura ---
           Decorativa e `aria-hidden` no HTML: não é status para leitor de
           tela, é ornamento. */
    .progresso {
      position: fixed;
      inset-block-start: 0;
      inset-inline: 0;
      block-size: 3px;
      background: var(--color-grafismo);
      transform-origin: left center;
      z-index: 30;
      animation: progredir linear both;
      animation-timeline: scroll(root block);
    }

    @keyframes progredir {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
  }
}

/* Sem suporte a scroll-driven, a barra de progresso não faz sentido: ela
   ficaria cheia o tempo todo. Esconde. */
@supports not (animation-timeline: view()) {
  .progresso { display: none; }
}


/* ==========================================================================
   TRANSIÇÃO ENTRE PÁGINAS
   `@view-transition` é declaração pura: onde existe, a navegação
   Home -> produto deixa de piscar branco; onde não existe, a navegação é a
   de sempre. Nada depende dela.
   ========================================================================== */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}


/* ==========================================================================
   IMPRESSÃO — nenhum movimento sobrevive ao papel
   ========================================================================== */

@media print {
  .revela,
  .secao--velada > .fundo img,
  .secao--velada::before,
  .cabecalho,
  .progresso {
    animation: none !important;
    transform: none !important;
  }
  .progresso { display: none; }
  .sticky-painel,
  .cabecalho { position: static; }
}