/* ═══════════════════════════════════════════════════════════
   MOVIMENTO — /es/ (Sala Oscura)
   `/impeccable animate`, 23/08/2026. Leve e sutil, a pedido do Kauã.

   ⚠️ LEIA A TESE ANTES DE ACRESCENTAR QUALQUER COISA AQUI.

   Esta página JÁ TEM muito movimento: seis laços infinitos rodando ao
   mesmo tempo (3 fileiras de pôsteres, o pulso do player, os LEDs das
   apps, o ponto da barra fixa) e trinta e quatro revelações de rolagem
   IDÊNTICAS. O critique de 23/08 pontuou "estético e minimalista" em
   1 de 4 justamente por isso.

   Então este arquivo NÃO acrescenta espetáculo. Ele faz três coisas:

   1. DÁ RESPOSTA onde uma ação hoje não tem nenhuma (abrir o FAQ,
      fechar o aviso, receber o foco do teclado).
   2. SUAVIZA a revelação de rolagem, que é o movimento dominante da
      página e hoje entra igual em todo bloco, como slideshow.
   3. NÃO CRIA NENHUM LAÇO INFINITO NOVO. Zero. Tudo aqui é disparado
      por estado — abrir, fechar, focar, entrar na tela — e termina.

   O MOMENTO FOCAL da página já existe e não é tocado: as barras de
   nível enchendo na comparação de preço. É o único lugar onde o
   movimento CONTA alguma coisa (o quanto cada app custa), e uma
   segunda sequência autoral só competiria com ela.

   ⚠️ Carrega depois do landing-es.css e do painel.css.
   ⚠️ A curva é `var(--ease)` — `cubic-bezier(.22,.8,.32,1)`, a mesma
   do DESIGN.md. Nenhuma curva nova entra na página.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════ 1. A RESPOSTA DO FAQ ═════════════════════════
   Abrir uma pergunta era a única mudança de estado da página SEM
   nenhuma resposta: a resposta simplesmente aparecia, de um quadro
   para o outro. Agora ela desce e clareia.

   ⚠️ NÃO ANIMO A ALTURA, e isso é decisão. Animar altura de verdade
   num `<details>` exige ou envolver o corpo num elemento novo (mexer
   em estrutura) ou `::details-content`, que é recente demais para a
   webview do Instagram, que é onde esta página vive. O bloco ainda
   "abre" de uma vez; o que ganhou continuidade é o conteúdo. */
@keyframes faq-abre{
  from{ opacity:0; transform:translate3d(0,-6px,0) }
  to  { opacity:1; transform:none }
}
.faq__item[open] > .faq__body{
  animation:faq-abre .26s var(--ease) both;
}

/* ═══════════ 2. RESPOSTA AO TOQUE E AO TECLADO ════════════ */

/* A pergunta do FAQ afunda ao ser tocada, como o botão já faz. */
.faq__item > summary{
  transition:background .18s var(--ease);
  border-radius:inherit;
}
.faq__item > summary:active{ background:rgba(255,255,255,.04) }

/* O anel de foco aparecia num quadro só. 120ms é a faixa de
   "resposta imediata" — o suficiente para o olho seguir de onde ele
   veio, sem parecer lento para quem navega por Tab. */
:where(a, button, summary, [tabindex]){
  transition:outline-color .12s var(--ease), outline-offset .12s var(--ease);
}

/* O × do aviso não tinha resposta ao ser apertado. */
.notif__cerrar{ transition:color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease) }
.notif__cerrar:active{ transform:scale(.88) }

/* ═══════════ 3. A REVELAÇÃO, MENOS SLIDESHOW ══════════════
   `.rv` entra em 34 blocos com o MESMO deslocamento de 20px e a MESMA
   duração de 0,7s. Trinta e quatro entradas iguais não leem como
   autoria, leem como efeito ligado no site inteiro — e 0,7s é longo
   o bastante para ela alcançar o bloco antes de ele terminar de
   chegar, o que dá a sensação de página lenta.

   12px e 0,5s: o bloco ainda "chega", mas não se anuncia. */
.js .rv{
  transform:translate3d(0,12px,0);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}

/* ⚠️ O PLAYER NÃO SOBE, SÓ CLAREIA. É o maior elemento da página
   (380×675) e o único bloco de imagem que carrega a classe `.rv` —
   conferi os 34, e os trilhos de pôster, o carrossel de conversas e
   os mosaicos NÃO são revelados, entram com a seção. Uma área desse
   tamanho deslizando 12px empurra a dobra inteira; a opacidade já
   diz "isto acabou de chegar" sem mover nada. */
.js .player.rv{ transform:none }

/* ═══════════ 4. AS LISTAS ENTRAM COMO LISTA ═══════════════
   Escalonar irmãos é legítimo quando o conteúdo É uma lista — e estas
   duas são: o que o plano entrega, e o que a garantia promete. O
   atraso é curto e TEM TETO: o 6º item em diante compartilha o último
   degrau, para que a lista do VIP (8 itens) não termine de chegar
   depois que ela já leu tudo.

   ⚠️ Isto NÃO vale para seções. Reinterpretar cada bloco rolado como
   uma lista escalonada é exatamente o efeito que a página já tem
   demais. */
@keyframes item-chega{
  from{ opacity:0; transform:translate3d(0,8px,0) }
  to  { opacity:1; transform:none }
}
.js .plan.is-in .plan__list li,
.js .guar.is-in .guar__trust li{
  animation:item-chega .34s var(--ease) both;
}
.js .plan.is-in .plan__list li:nth-child(1),
.js .guar.is-in .guar__trust li:nth-child(1){ animation-delay:.04s }
.js .plan.is-in .plan__list li:nth-child(2),
.js .guar.is-in .guar__trust li:nth-child(2){ animation-delay:.10s }
.js .plan.is-in .plan__list li:nth-child(3),
.js .guar.is-in .guar__trust li:nth-child(3){ animation-delay:.16s }
.js .plan.is-in .plan__list li:nth-child(4),
.js .guar.is-in .guar__trust li:nth-child(4){ animation-delay:.22s }
.js .plan.is-in .plan__list li:nth-child(5){ animation-delay:.28s }
.js .plan.is-in .plan__list li:nth-child(n+6){ animation-delay:.32s }

/* ═══════════ 5. MOVIMENTO REDUZIDO ════════════════════════
   Reduzir não é desligar: a RESPOSTA a uma ação continua — ela precisa
   saber que o toque dela funcionou. O que sai é o deslocamento
   espacial e o escalonamento, que é o que causa desconforto. */
@media (prefers-reduced-motion:reduce){
  .faq__item[open] > .faq__body{
    animation-name:none;
    /* a resposta ainda clareia, só não desce */
    opacity:1;
  }
  .js .plan.is-in .plan__list li,
  .js .guar.is-in .guar__trust li{
    animation:none;
  }
  .notif__cerrar:active{ transform:none }
  /* o afundar do summary e a cor do foco FICAM: são confirmação de
     que o toque e o Tab funcionaram, não enfeite. */
}