/* ==========================================================================
   /assets/fm-motion.css — T379 (04/10/2026), onda "dores".
   Variante B "Chama narrativa" do Motion Lab (inclui a A "Quieto").
   PROPÓSITO DE CADA ANIMAÇÃO (o que ela explica ou guia):
     .fm-progresso        barra de leitura: mostra quanto falta do problema até a solução.
     article h2::after    sublinhado que se desenha: marca a pergunta que a seção responde.
     .h2-chama.mansa      chama pequena e calma no "o que fazer": o começo do caminho.
     .h2-chama.ardente    chama que acende no "treinar agora": a regra da marca (a chama
                          respira com o momento emocional).
     .mandra-box .rosto   a Mandra passa de pensando a sorrindo quando o leitor chega ao método.
     .cta-artigo .btn     o botão respira uma vez quando entra na tela (é o CTA de quem está sem
                          JavaScript; com JS o portas.js troca esse bloco pelo componente da prova).
     @view-transition     crossfade curto do navegador entre artigos que carregam esta folha:
                          continuidade de leitura de um problema para o próximo (só opacidade).
   REGRAS: só transform e opacity; tudo dentro de prefers-reduced-motion:no-preference;
   animação por rolagem só com @supports (animation-timeline: view()); nenhum TEXTO
   começa escondido (a única opacidade 0 inicial é a da imagem decorativa da Mandra
   sorrindo, aria-hidden, e só quando o navegador anima; a troca é curta para não sobrepor
   os dois rostos); zero JavaScript; nenhuma animação em loop.
   Sem suporte ou com movimento reduzido: a página fica parada e completa.
   ========================================================================== */
.h2-chama::before{content:"";display:inline-block;width:.72em;height:.9em;margin-right:.35em;vertical-align:-.06em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23C4472A'/%3E%3Cstop offset='.6' stop-color='%23E86A4A'/%3E%3Cstop offset='1' stop-color='%23FFB36B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M16 1c2 7 9 11 9 21a9 9 0 0 1-18 0c0-5 3-8 5-11 0 4 2 6 4 6-2-5-2-10 0-16z'/%3E%3C/svg%3E") center/contain no-repeat}
.mandra-box .rosto{position:relative;flex-shrink:0;width:44px;height:44px}
.mandra-box .rosto img{position:absolute;inset:0;width:44px;height:44px;object-fit:cover;object-position:50% 20%;border-radius:50%}
.mandra-box .rosto .pre{display:none}
.fm-progresso{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;background:linear-gradient(90deg,#E86A4A,#FFB36B);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  @supports (animation-timeline:view()){
    article h2{position:relative}
    article h2::after{content:"";position:absolute;left:0;bottom:-5px;width:56px;height:3px;border-radius:3px;background:#E86A4A;transform-origin:0 50%;animation:fm-linha linear both;animation-timeline:view();animation-range:entry 20% cover 35%}
    .fm-progresso{animation:fm-progresso linear both;animation-timeline:scroll(root block)}
    .h2-chama.mansa::before{animation:fm-chama-mansa linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    .h2-chama.ardente::before{animation:fm-chama-ardente linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    .mandra-box .rosto .pre{display:block}
    .mandra-box .rosto .sor{animation:fm-sorri linear both;animation-timeline:view();animation-range:cover 30% cover 36%}
    .cta-artigo .btn{animation:fm-respira linear backwards;animation-timeline:view();animation-range:entry 40% cover 45%}
  }
}
@keyframes fm-linha{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fm-progresso{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fm-chama-mansa{from{transform:scale(.6);opacity:.45}to{transform:scale(.9);opacity:.85}}
@keyframes fm-chama-ardente{from{transform:scale(.7);opacity:.6}to{transform:scale(1.2);opacity:1}}
@keyframes fm-sorri{from{opacity:0}to{opacity:1}}
@keyframes fm-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}