@keyframes publicReveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* Scroll-reveal: público/assets/js/public-motion.js adiciona ".reveal-init" nos elementos
   assim que o script carrega (nunca no HTML/build) e ".is-visible" quando cada um entra na
   tela via IntersectionObserver. Sem JS (ou falha de carregamento), nenhum elemento recebe
   ".reveal-init" e tudo fica visível normalmente — a animação é puramente um acréscimo,
   nunca uma condição para o conteúdo aparecer. Mesmo keyframe/duração/easing que já existiam
   aqui (só trocou o gatilho: era "anima ao carregar a página", agora é "anima ao entrar na
   tela"), então o layout final é idêntico ao que já existia.
   Cobre as seções que já animavam (hero, outcomes, planos) e as que nunca tinham cobertura
   (impact-strip, hybrid, cabeçalhos de seção, formulário de contratação). */
.reveal-init{opacity:0;transform:translateY(22px)}
.reveal-init.is-visible{animation:publicReveal .65s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(var(--reveal-index,0) * .07s)}

/* Cabeçalho: leve reação ao scroll (só sombra/opacidade de fundo — nunca muda altura/posição,
   então não desloca nada abaixo dele). */
.marketing-header{transition:box-shadow .25s ease,background-color .25s ease}
.marketing-header.is-scrolled{box-shadow:0 8px 30px rgba(44,14,69,.1);background:rgba(247,244,250,.97)}

/* Pulso discreto no indicador "Acompanhamento ativo" do preview do hero — o anel
   (box-shadow) já existia estático; só ganha uma respiração sutil. */
.live-dot::before{animation:livePulse 2.4s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 5px rgba(83,221,147,.15)}50%{box-shadow:0 0 0 8px rgba(83,221,147,.04)}}

/* Ícones já presentes nos cards que já tinham hover (lift + sombra) — o ícone acompanha com um
   micro-movimento próprio, continuação do que o hover já fazia, não um efeito novo. */
.outcome-icon{transition:transform .25s cubic-bezier(.2,.75,.2,1)}
.outcome-grid article:hover .outcome-icon{transform:scale(1.08) rotate(-4deg)}
.hybrid-flow span{display:inline-block;transition:transform .2s ease}
.hybrid-flow article:hover span{transform:translateX(3px)}

/* Avatar do depoimento acompanha o hover do card inteiro — mesma lógica do outcome-icon acima,
   micro-movimento que reforça o card já levantando (translateY do .testi-card:hover). */
.testi-avatar{transition:transform .25s cubic-bezier(.2,.75,.2,1)}
.testi-card:hover .testi-avatar{transform:scale(1.08)}

/* Deriva ambiente muito lenta nas formas decorativas de fundo — nunca chama atenção, só evita
   que a página pareça uma imagem estática parada; baixíssima amplitude e opacidade. */
.section-blob{animation:blobDrift 16s ease-in-out infinite}
@keyframes blobDrift{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(10px,-14px) rotate(4deg)}}
.section-blob--tl{animation-name:blobDriftTl}
@keyframes blobDriftTl{0%,100%{transform:rotate(12deg) translate(0,0)}50%{transform:rotate(16deg) translate(8px,-10px)}}
.section-blob--br{animation-name:blobDriftBr}
@keyframes blobDriftBr{0%,100%{transform:rotate(-10deg) translate(0,0)}50%{transform:rotate(-14deg) translate(-8px,10px)}}

@media(prefers-reduced-motion:reduce){
  .reveal-init{opacity:1!important;transform:none!important;animation:none!important}
  .marketing-header{transition:none!important}
  .live-dot::before{animation:none!important}
  .outcome-icon,.hybrid-flow span,.testi-avatar{transition:none!important}
  .section-blob{animation:none!important}
  .institutional-footer *{transition:none!important}
}