/* ==========================================================================
   MOVIMENTO — sistema de transição da página
   Regra da casa: movimento serve à leitura. Nada gira, nada quica, nada
   entra de longe. Só opacidade, deslocamento curto e corte reto — os mesmos
   cantos retos do resto do design system, agora no tempo.

   Três papéis, e só três:
     · ENTRADA   um elemento aparece quando o scroll o alcança  (.revela)
     · SEQUÊNCIA irmãos entram em ordem, nunca juntos           (.escalona)
     · ESTADO    resposta a hover, foco e clique                (componentes)
   ========================================================================== */


/* --------------------------------------------------------------------------
   Chave geral — quem pediu menos movimento recebe a página inteira parada
   Vem primeiro para que nada abaixo precise repetir a checagem.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}


/* --------------------------------------------------------------------------
   ENTRADA — .revela
   O elemento nasce deslocado e transparente; o JS põe .visivel quando ele
   entra no campo de visão. Sem JS, o próprio JS marca tudo como visível na
   largada, então a página nunca fica em branco.
   -------------------------------------------------------------------------- */

.revela {
  transition: opacity var(--dur-lenta) var(--ease-saida),
              transform var(--dur-lenta) var(--ease-saida);
  transition-delay: calc(var(--i, 0) * var(--passo));
}

/* O estado inicial mora no :not(.visivel) de propósito. Assim que o elemento
   entra, a regra deixa de casar e nenhuma declaração de motion.css continua
   pendurada nele — importa quando quem entra é um botão ou um campo, que têm
   transform próprio de :active e de foco para defender. */
.revela:not(.visivel) {
  opacity: 0;
  transform: translate3d(0, var(--sobe), 0);
  will-change: opacity, transform;
}

/* Variantes de direção — a headline vem da esquerda, o par dela da direita */
.revela--esquerda:not(.visivel) { transform: translate3d(calc(var(--lado) * -1), 0, 0); }
.revela--direita:not(.visivel)  { transform: translate3d(var(--lado), 0, 0); }

/* Cortina — o traço some da esquerda para a direita, sem deslocar nada */
.revela--cortina {
  transition: opacity var(--dur-ampla) var(--ease-firme),
              clip-path var(--dur-ampla) var(--ease-firme);
  transition-delay: calc(var(--i, 0) * var(--passo));
}
.revela--cortina:not(.visivel) {
  transform: none;
  clip-path: inset(0 100% 0 0);
}


/* --------------------------------------------------------------------------
   SEQUÊNCIA — .escalona
   Vai no contêiner; quem entra são os filhos diretos, um a cada --passo.
   O índice --i é escrito pelo JS na largada.
   -------------------------------------------------------------------------- */

/* Aqui a entrada é animação, e não transição, por um motivo prático: os
   irmãos de um contêiner escalonado são componentes de verdade — botão,
   link de plataforma, campo de formulário —, e cada um já tem transform e
   transition próprios para hover, foco e :active. Uma transição de entrada
   precisaria manter `transform: none` pendurado para sempre e roubaria esses
   estados. A animação com fill `backwards` segura o quadro inicial durante o
   atraso, roda uma vez e sai de cena sem deixar nada escrito no elemento. */

.escalona:not(.visivel) > * { opacity: 0; }

.escalona.visivel > * {
  animation: entra-de-baixo var(--dur-lenta) var(--ease-saida) backwards;
  animation-delay: calc(var(--i, 0) * var(--passo));
}

/* As mesmas direções da .revela, agora valendo para a fila de irmãos: uma
   coluna de texto pode entrar pelo lado e ainda assim entregar título,
   parágrafo e chamada um de cada vez. */
@keyframes entra-da-esquerda {
  from { opacity: 0; transform: translate3d(calc(var(--lado) * -1), 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes entra-da-direita {
  from { opacity: 0; transform: translate3d(var(--lado), 0, 0); }
  to   { opacity: 1; transform: none; }
}
.escalona--esquerda.visivel > * { animation-name: entra-da-esquerda; }
.escalona--direita.visivel  > * { animation-name: entra-da-direita; }


/* --------------------------------------------------------------------------
   ABERTURA DO HERO — acima da dobra, entra no carregamento e não no scroll
   Roda por animação com fill both: se o JS não vier, o estado final fica.
   -------------------------------------------------------------------------- */

@keyframes entra-de-baixo {
  from { opacity: 0; transform: translate3d(0, var(--sobe), 0); }
  to   { opacity: 1; transform: none; }
}

.entra {
  animation: entra-de-baixo var(--dur-ampla) var(--ease-saida) both;
  animation-delay: calc(120ms + var(--i, 0) * var(--passo));
}


/* --------------------------------------------------------------------------
   PARALAXE DO HERO — deslocamento curto da imagem de fundo
   O JS escreve --deslocamento; sem JS o valor cai em 0 e nada se move.
   -------------------------------------------------------------------------- */

.hero__midia {
  transform: translate3d(0, var(--deslocamento, 0px), 0) scale(1.08);
  will-change: transform;
}


/* --------------------------------------------------------------------------
   PARALAXE DO CONTATO — mesmo princípio do hero, aplicado só ao fundo do
   bloco de conversão. O JS escreve --deslocamento-fundo; sem JS o valor cai
   em 0 e o gradient fica parado.
   -------------------------------------------------------------------------- */

.conversao__fundo {
  transform: translate3d(0, var(--deslocamento-fundo, 0px), 0);
  will-change: transform;
}


/* --------------------------------------------------------------------------
   BARRA DE PROGRESSO — 2px amarelos na base do cabeçalho
   Sem contorno próprio: é a mesma linha de 1px do cabeçalho, preenchida.
   -------------------------------------------------------------------------- */

.progresso {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--amarelo);
  transform: scaleX(var(--progresso, 0));
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity var(--dur-rapida) var(--ease-padrao);
  pointer-events: none;
}
.cabecalho.esta-fixo .progresso { opacity: 1; }