/* Movimento e acabamento.

   Três regras que valem para tudo aqui, e não são preferência:

   1. Só se anima `transform` e `opacity`. São as duas propriedades que o
      navegador resolve na GPU sem recalcular layout; animar `height`, `top`
      ou `width` engasga em celular fraco, que é onde o cliente dele vai abrir.
   2. Nunca `transition: all`. Cada propriedade é listada. `all` faz o
      navegador vigiar tudo e dispara transição em coisa que não devia.
   3. Tudo morre em `prefers-reduced-motion`. Quem marcou "reduzir movimento"
      no sistema tem motivo, e boa parte é gente que passa mal com animação.
      O conteúdo aparece igual, só não se move.
*/

/* ===== Entrada por rolagem ===============================================

   Isto é feito com a linha do tempo de rolagem do CSS, não com JavaScript.

   A primeira versão escondia por CSS e revelava por IntersectionObserver, e
   isso tem uma falha que eu vi acontecer: em aba estrangulada o observador não
   dispara, o elemento fica em opacity:0 e a seção some. Site de prospecção com
   seção em branco é pior do que site sem animação nenhuma.

   Com `animation-timeline: view()` quem controla o quadro é o compositor do
   navegador, não a thread principal. E o mais importante: onde o recurso não
   existe, a regra inteira é ignorada e o conteúdo simplesmente aparece. Não há
   estado intermediário em que ele possa ficar preso.

   `animation-range: entry` também resolve sozinho o caso do bloco que já está
   na tela no carregamento: ele nasce no fim da faixa, ou seja, visível. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .secao > .container > *,
    .faixa-prazo__interno > *,
    .cartoes > *,
    .passos > li,
    .duvidas > *,
    .tabela-rolagem,
    .quadro,
    .cartao-registro,
    .mapa {
      animation: entra linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 20%;
    }

    /* A capa é a primeira tela: entra na carga, não na rolagem. */
    .capa .container > * { animation: none; }

    /* Escada nas grades: cada filho começa um pouco depois do anterior,
       usando o próprio avanço da rolagem em vez de atraso em segundos. */
    .cartoes > *:nth-child(2), .duvidas > *:nth-child(2), .passos > li:nth-child(2) { animation-range: entry 7% cover 23%; }
    .cartoes > *:nth-child(3), .duvidas > *:nth-child(3), .passos > li:nth-child(3) { animation-range: entry 10% cover 26%; }
    .cartoes > *:nth-child(4), .duvidas > *:nth-child(4), .passos > li:nth-child(4) { animation-range: entry 13% cover 29%; }
    .cartoes > *:nth-child(n+5), .duvidas > *:nth-child(n+5), .passos > li:nth-child(n+5) { animation-range: entry 16% cover 32%; }
  }
}

@keyframes entra {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* A capa entra na carga da página, com fill backwards para não piscar. */
@media (prefers-reduced-motion: no-preference) {
  .capa .sobrelinha { animation: sobe 0.7s 0.05s cubic-bezier(0.16,1,0.3,1) backwards; }
  .capa h1          { animation: sobe 0.8s 0.13s cubic-bezier(0.16,1,0.3,1) backwards; }
  .capa__resumo     { animation: sobe 0.8s 0.24s cubic-bezier(0.16,1,0.3,1) backwards; }
  .capa .linha-botoes { animation: sobe 0.8s 0.34s cubic-bezier(0.16,1,0.3,1) backwards; }
  .capa__registro   { animation: sobe 0.8s 0.44s cubic-bezier(0.16,1,0.3,1) backwards; }
  .capa__foto img   { animation: aproxima 1.6s cubic-bezier(0.16,1,0.3,1) backwards; }
}
@keyframes sobe {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes aproxima {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

/* ===== Cabeçalho que encolhe =============================================
   Também sem JavaScript: a linha do tempo de rolagem do documento move as
   duas propriedades. Onde não houver suporte, o cabeçalho fica no tamanho
   normal, que é um estado perfeitamente bom. */
.topo { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
.marca__selo { transition: transform 0.28s ease; }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Sombra e fundo: propriedades que não mexem no layout. A primeira versão
       animava padding, e padding recalcula layout a cada quadro de rolagem.
       O encolher visual vem do selo, que usa transform. */
    .topo {
      animation: assenta-topo linear both;
      animation-timeline: scroll();
      animation-range: 0px 120px;
    }
    .marca__selo {
      animation: encolhe-selo linear both;
      animation-timeline: scroll();
      animation-range: 0px 120px;
      transform-origin: 50% 50%;
    }
  }
}
@keyframes assenta-topo {
  to {
    box-shadow: 0 10px 30px rgba(8, 16, 36, 0.34);
    background-color: rgba(18, 31, 60, 0.98);
  }
}
@keyframes encolhe-selo {
  to { transform: scale(0.86); }
}

/* ===== Barra de progresso da leitura =====================================
   Fio dourado no topo, movido pela rolagem do documento. Sem suporte, ele
   simplesmente não é desenhado. */
.progresso {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 90;
  background: linear-gradient(90deg, var(--ouro-vivo), var(--ouro-claro));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  display: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progresso {
      display: block;
      animation: avanca linear both;
      animation-timeline: scroll();
    }
  }
}
@keyframes avanca { to { transform: scaleX(1); } }

/* ===== Acabamento dos elementos ========================================== */

/* Cartões: sobem e acendem a borda dourada. */
.cartao {
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.24s ease,
              border-color 0.24s ease;
}
a.cartao:hover, a.cartao:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(22, 38, 74, 0.16);
  border-color: var(--ouro-vivo);
}
/* A seta do "Ver a página" anda um pouco no hover. Detalhe pequeno que faz o
   cartão parecer clicável antes do clique. */
a.cartao .cartao__ver::after {
  content: "›";
  display: inline-block;
  margin-left: 7px;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
a.cartao:hover .cartao__ver::after { transform: translateX(5px); }

/* Botões: um leve levantar, e o verde do WhatsApp ganha halo. */
.btn { transition: background-color 0.18s ease, border-color 0.18s ease,
                   color 0.18s ease, transform 0.14s ease, box-shadow 0.22s ease; }
.btn--zap { box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28); }
.btn--zap:hover { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.42); transform: translateY(-2px); }
.btn--ouro:hover { box-shadow: 0 8px 24px rgba(201, 162, 39, 0.35); transform: translateY(-2px); }
.btn--marinho:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }

/* Links do menu: fio dourado que cresce do centro. */
@media (min-width: 1180px) {
  .topo__menu a { position: relative; }
  .topo__menu a::after {
    content: "";
    position: absolute;
    left: 11px; right: 11px; bottom: 3px;
    height: 2px;
    background: var(--ouro-claro);
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .topo__menu a:hover::after { transform: scaleX(1); }
  .topo__menu a[aria-current="page"]::after { transform: scaleX(1); }
}

/* Dúvidas: a resposta desliza em vez de pular. */
.duvida { transition: border-color 0.22s ease, box-shadow 0.22s ease; }
.duvida:hover { border-color: var(--borda-forte); }
.duvida[open] { border-color: var(--ouro-vivo); box-shadow: 0 6px 20px rgba(22,38,74,0.09); }
.duvida[open] .duvida__corpo { animation: abre-duvida 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes abre-duvida {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Linhas de tabela e de prazo acendem ao passar o mouse: em tabela de datas,
   ajuda a não perder a linha que se está lendo. */
.tabela tbody tr { transition: background-color 0.16s ease; }
.tabela tbody tr:hover { background: #f3f6fd; }
.prazo { transition: background-color 0.16s ease; }

/* Capa: brilho dourado que respira atrás do título. Lento de propósito —
   movimento rápido em fundo distrai de texto. */
.capa--foto .capa__brilho {
  position: absolute;
  z-index: 1;
  top: -18%; left: -12%;
  width: 62%; height: 150%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.2), transparent 72%);
  animation: respira 11s ease-in-out infinite;
}
@keyframes respira {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.1); }
}

/* O filete dourado no pé da capa corre uma vez, no carregamento. */
.capa::after { transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .capa::after { animation: risca 1.1s 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
}
@keyframes risca { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ===== Toque e alvo ====================================================== */
a, button, summary, .cartao, label {
  touch-action: manipulation;                     /* mata o atraso do duplo toque */
  -webkit-tap-highlight-color: rgba(201, 162, 39, 0.18);
}

/* Âncora não pode parar embaixo do cabeçalho grudado. */
:target, h2[id], h3[id], section[id] { scroll-margin-top: 92px; }

/* ===== Reduzir movimento ================================================= */
@media (prefers-reduced-motion: reduce) {
  /* Nada aqui precisa desfazer estado escondido: sob movimento reduzido as
     animações nunca chegam a ser declaradas. Só se desligam os efeitos de
     hover que mexem posição. */
  .progresso { display: none; }
  .capa--foto .capa__brilho,
  .capa::after,
  .duvida[open] .duvida__corpo { animation: none; }
  a.cartao:hover, .btn--zap:hover, .btn--ouro:hover, .btn--marinho:hover,
  a.cartao:hover .cartao__ver::after { transform: none; }
  .topo__menu a::after { transition: none; }
  * { scroll-behavior: auto; }
}

/* --- alternativa para Safari e Firefox -----------------------------------
   Só existe quando o JavaScript confirmou que não há linha do tempo nativa.
   `.aguarda` nunca é aplicado por CSS: quem aplica é o script, depois de o
   observador estar montado. */
.aguarda {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.aguarda.entrou { opacity: 1; transform: translate3d(0, 0, 0); }
@media (prefers-reduced-motion: reduce) {
  .aguarda, .aguarda.entrou { opacity: 1; transform: none; transition: none; }
}