/* Camada de movimento das prévias — Authos Lab. Carregar depois do CSS da página. */
:root{--m-ease:cubic-bezier(.22,.61,.36,1);--m-dur:.85s}
html{scroll-behavior:smooth}
section[id],[id].wrap{scroll-margin-top:110px}

/* Entrada da página: evita "piscar" de fonte e dá a sensação suave do primeiro acesso */
html.m-js body{animation:m-page .7s var(--m-ease) both}
@keyframes m-page{from{opacity:0}to{opacity:1}}

/* Modo print: tudo parado no estado final */
html.m-print body,html.m-print .fab,html.m-print .fab::after,html.m-print .m-float,html.m-print .m-pulse,html.m-print .m-kenburns,html.m-print .m-track{animation:none!important}
html.m-print .m-progress{display:none}

/* Revelar ao rolar */
html.m-js [data-m]{opacity:0;transform:translate3d(0,26px,0);transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease);transition-delay:var(--m-delay,0s)}
html.m-js [data-m="zoom"]{transform:scale(.965)}
html.m-js [data-m="left"]{transform:translate3d(-34px,0,0)}
html.m-js [data-m="right"]{transform:translate3d(34px,0,0)}
html.m-js [data-m].m-in{opacity:1;transform:none}
html.m-js [data-m] img{transition:transform 1.6s var(--m-ease)}
html.m-js [data-m]:not(.m-in) img{transform:scale(1.07)}

/* Cartões: levantam no hover e a foto aproxima devagar */
.m-lift{transition:transform .4s var(--m-ease),box-shadow .4s var(--m-ease),border-color .4s}
.m-lift img{transition:transform 1.1s var(--m-ease)}
@media (hover:hover){
  .m-lift:hover{transform:translateY(-5px);box-shadow:0 18px 40px -12px rgba(20,20,30,.18)}
  .m-lift:hover img{transform:scale(1.045)}
}

/* Botões */
.btn,a.btn{transition:transform .3s var(--m-ease),box-shadow .3s var(--m-ease),background-color .3s,color .3s,border-color .3s}
@media (hover:hover){.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(0,0,0,.28)}}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{transition:transform .3s var(--m-ease)}
@media (hover:hover){.btn:hover svg{transform:scale(1.12) rotate(-6deg)}}

/* Links de texto com sublinhado que cresce */
main a:not(.btn):not([class*="map"]):not(.m-lift){text-decoration-thickness:1px;text-underline-offset:3px;transition:color .25s,text-decoration-color .25s}

/* Cabeçalho reage à rolagem */
header{transition:box-shadow .35s var(--m-ease),background-color .35s}
header.m-scrolled{box-shadow:0 8px 28px -14px rgba(0,0,0,.35)}

/* Barra de progresso de leitura */
.m-progress{position:fixed;left:0;right:0;bottom:0;height:3px;z-index:90;transform-origin:0 50%;transform:scaleX(0);background:var(--m-accent,#1f7a4d);opacity:.85;pointer-events:none}

/* Perguntas frequentes abrem suavemente */
details > *:not(summary){transform-origin:top}
details[open] > *:not(summary){animation:m-open .45s var(--m-ease)}
@keyframes m-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
details summary{transition:color .25s}
details summary::after{transition:transform .35s var(--m-ease)}

/* Botão flutuante do WhatsApp: entra depois e pulsa poucas vezes */
.fab{animation:m-pop .7s var(--m-ease) 1.4s both}
.fab::after{content:"";position:absolute;inset:0;border-radius:50%;animation:m-ring 2.6s ease-out 2.6s 3;pointer-events:none}
@keyframes m-pop{from{opacity:0;transform:scale(.4) translateY(20px)}to{opacity:1;transform:none}}
@keyframes m-ring{0%{box-shadow:0 0 0 0 rgba(31,122,77,.5)}100%{box-shadow:0 0 0 20px rgba(31,122,77,0)}}

/* Pulso suave para o botão principal (opcional: class="m-pulse") */
.m-pulse{animation:m-pulse 3s ease-in-out 2.4s infinite}
@keyframes m-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@media (hover:hover){.m-pulse:hover{animation-play-state:paused}}

/* Flutuação lenta para colagens e selos (opcional: class="m-float") */
.m-float{animation:m-float 7s ease-in-out infinite}
@keyframes m-float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* Zoom lento em foto de destaque (opcional: class="m-kenburns") */
.m-kenburns{animation:m-kb 16s ease-in-out infinite alternate}
@keyframes m-kb{from{scale:1}to{scale:1.07}}

/* Faixa corrida (opcional): <div class="m-marquee"><div class="m-track">…itens…</div></div> — o JS duplica os itens */
.m-marquee{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.m-track{display:inline-flex;gap:0;animation:m-marq var(--m-speed,38s) linear infinite}
.m-track > *{flex:none}
@media (hover:hover){.m-marquee:hover .m-track{animation-play-state:paused}}
@keyframes m-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Estrelas acendem em sequência */
.m-stars span{display:inline-block;opacity:.25;transform:scale(.6);transition:opacity .4s,transform .5s var(--m-ease)}
.m-stars.m-on span{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html.m-js body{animation:none}
  html.m-js [data-m]{opacity:1!important;transform:none!important;transition:none!important}
  html.m-js [data-m] img{transform:none!important}
  .fab,.fab::after,details[open] > *:not(summary),.m-pulse,.m-float,.m-kenburns,.m-track{animation:none}
  .m-marquee{white-space:normal}
  .m-lift,.m-lift img,.btn{transition:none}
  .m-stars span{opacity:1;transform:none}
}