/* =========================================================== v5-revelar.css
   v130 (18/09/2026) — a entrada suave das peças ao rolar a página.

   Pedido do dono do painel: "se você puder colocar efeitos, passo do mouse, o efeito
   de smooth, de vir as coisas".

   COMO FUNCIONA, em ordem de preferência:
   1. Navegador com animação por rolagem (Chrome, Edge, Safari 26+): quem faz
      tudo é o CSS, no compositor — `animation-timeline: view()`. Não custa JS.
   2. Firefox (ainda sem isso): o v5-revelar.js marca <html class="sem-sda"> e
      um IntersectionObserver põe a classe .visivel em cada peça.
   3. Quem pede menos movimento (prefers-reduced-motion) ou está sem JS e sem
      suporte: a peça aparece INTEIRA, parada. Nada some da tela — o efeito é
      enfeite, nunca conteúdo.

   Só mexe em `opacity` e `transform`, que o navegador anima sem repintar.
   Para tirar o efeito de uma peça, basta tirar a classe .rev do HTML. */

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes lp-entrada {
      from { opacity: 0; transform: translateY(26px) scale(.985); }
      to   { opacity: 1; transform: none; }
    }
    .rev {
      animation: lp-entrada auto linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 85%;   /* fecha assim que a peca entra: nenhuma secao fica a meio caminho */
    }
  }

  /* o caminho do Firefox */
  .sem-sda .rev { opacity: 0; transform: translateY(26px) scale(.985); }
  .sem-sda .rev.visivel {
    opacity: 1; transform: none;
    transition: opacity .55s ease-out, transform .55s cubic-bezier(.2,.7,.3,1);
  }
}

/* rolagem macia quando alguém clica em #por-dentro, #gratis, #planos.
   O html{scroll-behavior:smooth} do v5.css já faz isso; aqui só se garante
   que o topo fixo não cubra o título da seção. */
[id="por-dentro"], [id="escritorio"], [id="gratis"], [id="planos"], [id="produtos"] {
  scroll-margin-top: 92px;
}