/* =====================================================================
   pontu.club - o movimento da landing (lp/anima.js e a outra metade)
   Tudo aqui mora dentro de `prefers-reduced-motion: no-preference`: quem
   pediu menos movimento ao aparelho recebe a pagina parada e inteira.
   Nada fica escondido pelo CSS sozinho -- quem marca `.an-o` e o JS, e so em
   elemento que esta ABAIXO da dobra na hora em que ele roda. Sem JS, a pagina
   e exatamente a de antes.
   Direcao "Selo" continua valendo: sem sombra, sem gradiente. O que se move e
   posicao, opacidade, recorte e cor.
   ===================================================================== */

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

  /* ---------- 2. entrada com a rolagem ---------- */
  .an-o { opacity: 0; transform: translateY(16px); }
  .an-o.an-v {
    opacity: 1; transform: none;
    transition: opacity 560ms var(--curva) var(--atraso, 0ms),
                transform 680ms var(--curva) var(--atraso, 0ms);
  }

  /* A foto abre de dentro para fora pelo recorte, nao por escala: `scale`
     numa imagem de ponta a ponta empurra a pagina para rolar de lado. */
  .an-foto.an-o { opacity: .25; transform: none; clip-path: inset(0 8% round var(--r-xl)); }
  .an-foto.an-o.an-v {
    opacity: 1; clip-path: inset(0 0% round 0px);
    transition: clip-path 1000ms var(--curva) var(--atraso, 0ms),
                opacity 700ms var(--curva) var(--atraso, 0ms);
  }

  /* ---------- 3. os passos: o fio se desenha e o numero acende ---------- */
  .an-passo { position: relative; border-top-color: var(--linha); }
  .an-passo::before {
    content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
    background: var(--nanquim); transform: scaleX(0); transform-origin: left center;
  }
  .an-passo.an-v::before {
    transform: scaleX(1);
    transition: transform 700ms var(--curva) calc(var(--atraso, 0ms) + 180ms);
  }
  .an-passo.an-v .passo__n { animation: an-acende 1100ms var(--curva) calc(var(--atraso, 0ms) + 500ms) 1 both; }
  @keyframes an-acende {
    0%, 100% { color: var(--cinza); }
    35% { color: var(--verde); }
  }

  /* ---------- 1. a tela do cliente, viva ---------- */
  .bilhete__valor { font-variant-numeric: tabular-nums; }
  .an-fita { overflow: hidden; }
  .an-trilho.an-desliza { transition: transform 620ms var(--curva); }
  .an-linha-nova { animation: an-entra 620ms var(--curva) 1 both; }
  @keyframes an-entra { from { opacity: 0; } to { opacity: 1; } }
  .mock .bilhete, .mock .an-fita { transition: opacity 320ms var(--curva); }
  .mock.an-apaga .bilhete, .mock.an-apaga .an-fita { opacity: 0; }

  .bilhete__valor.an-brilho { animation: an-brilho 1000ms var(--curva) 1; }
  @keyframes an-brilho {
    0%, 100% { color: var(--nanquim); }
    30% { color: var(--verde); }
  }
  .progresso__barra i { transition: background 400ms var(--curva); transform-origin: center bottom; }
  .progresso__barra i.an-acendeu { animation: an-segmento 700ms var(--curva) 1; }
  @keyframes an-segmento {
    0%, 100% { transform: none; }
    40% { transform: scaleY(1.9); }
  }
  .progresso__barra.an-cheia i { animation: an-cheia 1200ms var(--curva) 1; }
  .progresso__barra.an-cheia i:nth-child(2) { animation-delay: 60ms; }
  .progresso__barra.an-cheia i:nth-child(3) { animation-delay: 120ms; }
  .progresso__barra.an-cheia i:nth-child(4) { animation-delay: 180ms; }
  .progresso__barra.an-cheia i:nth-child(5) { animation-delay: 240ms; }
  .progresso__barra.an-cheia i:nth-child(6) { animation-delay: 300ms; }
  .progresso__barra.an-cheia i:nth-child(7) { animation-delay: 360ms; }
  .progresso__barra.an-cheia i:nth-child(8) { animation-delay: 420ms; }
  @keyframes an-cheia {
    0%, 100% { transform: none; }
    30% { transform: scaleY(1.7); }
  }
  .progresso__texto span:first-child { transition: color 300ms var(--curva); }
  .progresso__texto.an-pronto span { color: var(--verde-escuro); font-weight: 600; }

  /* ---------- 4. o preco rola na troca mensal/anual ---------- */
  .plano__preco b { font-variant-numeric: tabular-nums; }

  /* ---------- 5. reacao ao toque e ao mouse ---------- */
  .botao {
    transition: background var(--tempo) var(--curva), color var(--tempo) var(--curva),
                border-color var(--tempo) var(--curva), transform 120ms var(--curva);
  }
  .botao:active { transform: scale(.97); }
  .botao .ic { transition: transform 220ms var(--curva); }

  @media (hover: hover) {
    .botao:hover .ic { transform: translateX(3px); }
    .cartao, .plano { transition: transform 240ms var(--curva), border-color 240ms var(--curva); }
    .cartao:hover, .plano:hover { transform: translateY(-3px); }
    .cartao:hover, .plano:not(.plano--destaque):hover { border-color: var(--linha-forte); }
  }

  /* O plano recomendado respira, devagar, so enquanto esta na tela. Contorno
     (outline) e nao borda nem sombra: nao mexe no tamanho do cartao e nao
     cria rolagem. */
  .plano--destaque.an-pulsa { animation: an-contorno 5s var(--curva) 1.2s infinite; }
  @keyframes an-contorno {
    0%, 72% { outline: 2px solid rgba(0, 179, 104, 0); outline-offset: 0; }
    76% { outline: 2px solid rgba(0, 179, 104, .6); outline-offset: 1px; }
    100% { outline: 2px solid rgba(0, 179, 104, 0); outline-offset: 9px; }
  }

  /* ---------- 6. o fecho chama uma vez ---------- */
  .an-chama { animation: an-chama 1000ms var(--curva) 700ms 1; }
  @keyframes an-chama {
    0%, 100% { transform: none; }
    25% { transform: scale(1.06); }
    50% { transform: scale(.99); }
    75% { transform: scale(1.03); }
  }
}