/* 25/09/2026 anima: galeria de posts dos clientes + animacoes fortes (home, /servicos, /metodo).
   Regras: so transform/opacity, nada esconde conteudo sem JS, prefers-reduced-motion desliga tudo. */
:root{--anm-ease:cubic-bezier(.16,1,.3,1);--anm-indigo:#373083;--anm-dark:#0F0C2E;--anm-green:#0D9668;--anm-wpp:#25D366}

/* ── Barra de progresso da rolagem ── */
.anm-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#4A42A0,#0D9668 60%,#25D366)}

/* ── Revelar ao rolar (classes postas pelo anima.js so em quem esta abaixo da tela) ── */
html.anm-on .anm:not(.anm-in){opacity:0!important;transform:translate3d(0,46px,0) scale(.95)!important}
html.anm-on .anm.anm--l:not(.anm-in){transform:translate3d(-38px,0,0)!important}
html.anm-on .anm.anm--pop:not(.anm-in){transform:translate3d(0,34px,0) scale(.86)!important}
html.anm-on .anm{transition:opacity .8s var(--anm-ease),transform 1.05s var(--anm-ease)!important;transition-delay:var(--anm-d,0s)!important}
html.anm-on .anm.anm-in{opacity:1!important;transform:none!important}
@media (hover:hover) and (pointer:fine){
  html.anm-on .anm:not(.anm-in){filter:blur(6px)}
  html.anm-on .anm{transition:opacity .8s var(--anm-ease),transform 1.05s var(--anm-ease),filter .8s var(--anm-ease)!important;transition-delay:var(--anm-d,0s)!important}
}

/* Titulos: palavra por palavra subindo de dentro de uma mascara */
.anm-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.anm-w>span{display:inline-block}
html.anm-on .anm-split:not(.anm-in) .anm-w>span{transform:translate3d(0,105%,0) rotate(4deg)}
html.anm-on .anm-split .anm-w>span{transition:transform .9s var(--anm-ease);transition-delay:calc(var(--anm-d,0s) + var(--anm-i,0) * 45ms)}
html.anm-on .anm-split.anm-in .anm-w>span{transform:none}

/* ── Botoes principais: brilho passando ── */
.anm-shine{position:relative;overflow:hidden;isolation:isolate}
.anm-shine::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:45%;pointer-events:none;z-index:1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translate3d(-160%,0,0) skewX(-18deg);animation:anmShine 3.6s var(--anm-ease) 1.2s infinite}
@keyframes anmShine{0%{transform:translate3d(-160%,0,0) skewX(-18deg)}38%,100%{transform:translate3d(330%,0,0) skewX(-18deg)}}

/* ── WhatsApp flutuante: anel pulsando + balancada ── */
.wpp-float.anm-wpp::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--anm-wpp);z-index:-1;animation:anmPing 2.6s cubic-bezier(0,0,.2,1) infinite}
.wpp-float.anm-wpp svg{animation:anmWiggle 7s ease-in-out 2s infinite;transform-origin:50% 60%}
@keyframes anmPing{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(1.75);opacity:0}}
@keyframes anmWiggle{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}94%{transform:rotate(5deg)}}

/* ── Galeria de posts ── */
.anm-galeria{position:relative;overflow:hidden;padding:88px 0 80px;background:var(--anm-dark);color:#fff;isolation:isolate}
.anm-galeria--full{width:100vw;margin-left:calc(50% - 50vw);margin-top:72px;margin-bottom:72px}
.anm-galeria--transp{background:transparent}
.anm-galeria__aurora{position:absolute;inset:-30%;z-index:-1;pointer-events:none;background:radial-gradient(38% 42% at 25% 35%,rgba(74,66,160,.55),transparent 70%),radial-gradient(30% 36% at 78% 62%,rgba(13,150,104,.35),transparent 70%),radial-gradient(26% 30% at 55% 18%,rgba(55,48,131,.45),transparent 70%);animation:anmAurora 18s ease-in-out infinite alternate}
@keyframes anmAurora{0%{transform:translate3d(-4%,-2%,0) rotate(0) scale(1)}50%{transform:translate3d(5%,3%,0) rotate(8deg) scale(1.08)}100%{transform:translate3d(-2%,5%,0) rotate(-6deg) scale(1.02)}}
.anm-galeria__spot{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.09),transparent 60%)}
.anm-galeria:hover .anm-galeria__spot{opacity:1}
.anm-galeria__head{max-width:760px;margin:0 auto 44px;padding:0 24px;text-align:center}
.anm-galeria__eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9C95F0;padding:9px 14px;border:1px solid rgba(156,149,240,.35);border-radius:999px;background:rgba(255,255,255,.04)}
.anm-galeria__eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--anm-wpp);box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:anmDot 2s infinite}
@keyframes anmDot{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.anm-galeria__title{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(28px,4.6vw,48px);line-height:1.12;letter-spacing:-.02em;margin:18px 0 14px;color:#fff}
.anm-galeria__title em{font-style:normal;background:linear-gradient(90deg,#9C95F0,#25D366,#9C95F0);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:anmGrad 5s linear infinite}
@keyframes anmGrad{to{background-position:-200% 0}}
.anm-galeria__sub{font:400 16px/1.6 'Inter',sans-serif;color:rgba(255,255,255,.72);margin:0}
.anm-galeria__rows{display:flex;flex-direction:column;gap:16px;transform:rotate(-2.5deg);margin:0 -40px}
.anm-galeria__row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.anm-galeria__track{display:flex;gap:16px;width:max-content;will-change:transform;animation:anmMarq 70s linear infinite}
.anm-galeria__row--r .anm-galeria__track{animation-direction:reverse;animation-duration:80s}
html.anm-js .anm-galeria__track{animation:none}
@keyframes anmMarq{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - 8px),0,0)}}
.anm-post{position:relative;flex:0 0 auto;width:230px;margin:0;border-radius:18px;overflow:hidden;background:#1E1A5A;box-shadow:0 18px 40px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07);transition:transform .5s var(--anm-ease),box-shadow .5s}
.anm-post img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .8s var(--anm-ease)}
.anm-post figcaption{position:absolute;left:10px;bottom:10px;font:600 11.5px/1 'Inter',sans-serif;color:#fff;padding:7px 10px;border-radius:999px;background:rgba(15,12,46,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translate3d(0,6px,0);opacity:.92;transition:transform .4s var(--anm-ease),opacity .4s}
.anm-post:hover{transform:translate3d(0,-8px,0) scale(1.04) rotate(-1deg);box-shadow:0 30px 60px -20px rgba(0,0,0,.75),0 0 0 2px rgba(156,149,240,.55)}
.anm-post:hover img{transform:scale(1.08)}
.anm-post:hover figcaption{transform:none;opacity:1}
.anm-galeria__cta{text-align:center;margin-top:48px;padding:0 24px}
.anm-galeria__btn{display:inline-flex;align-items:center;gap:10px;font:700 16px/1 'Montserrat',sans-serif;color:#fff;text-decoration:none;padding:18px 28px;border-radius:999px;background:linear-gradient(135deg,#25D366,#0D9668);box-shadow:0 14px 34px -10px rgba(37,211,102,.55);transition:transform .35s var(--anm-ease),box-shadow .35s}
.anm-galeria__btn:hover{transform:translate3d(0,-3px,0) scale(1.03);box-shadow:0 20px 44px -12px rgba(37,211,102,.7)}
.anm-galeria__btn svg{width:20px;height:20px;flex:0 0 auto}
.anm-galeria__nota{display:block;margin-top:14px;font:400 13px/1.4 'Inter',sans-serif;color:rgba(255,255,255,.55)}
@media (max-width:768px){
  .anm-galeria{padding:64px 0 60px}
  .anm-galeria--full{margin-top:48px;margin-bottom:48px}
  .anm-galeria__head{margin-bottom:32px;padding:0 16px}
  .anm-galeria__sub{font-size:15px}
  .anm-galeria__rows{gap:12px;margin:0 -30px;transform:rotate(-3deg)}
  .anm-galeria__track{gap:12px}
  @keyframes anmMarq{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - 6px),0,0)}}
  .anm-post{width:150px;border-radius:14px}
  .anm-post figcaption{font-size:10px;padding:6px 8px;left:7px;bottom:7px}
  .anm-galeria__btn{font-size:15px;padding:17px 24px;width:100%;max-width:360px;justify-content:center}
}

/* /metodo: se o GSAP (CDN) nao carregar, mostra tudo em vez de pagina vazia */
html.anm-nogsap .metodo-hero__badge,html.anm-nogsap .metodo-hero__eyebrow,html.anm-nogsap .metodo-hero__title-letter,html.anm-nogsap .metodo-hero__title-tagline,html.anm-nogsap .metodo-hero__subtitle-wrapper,html.anm-nogsap .metodo-hero__divider,html.anm-nogsap .metodo-stage-card,html.anm-nogsap .metodo-detail-stage,html.anm-nogsap .metodo-cta{opacity:1!important;transform:none!important}

/* ── Movimento reduzido: nada se mexe, galeria vira faixa rolavel ── */
@media (prefers-reduced-motion:reduce){
  .anm-progress,.anm-galeria__aurora,.anm-galeria__spot{display:none}
  .anm-shine::after,.wpp-float.anm-wpp::before,.wpp-float.anm-wpp svg,.anm-galeria__eyebrow i,.anm-galeria__title em{animation:none!important}
  .anm-galeria__rows{transform:none;margin:0}
  .anm-galeria__row{overflow-x:auto;-webkit-mask-image:none;mask-image:none;padding:0 16px}
  .anm-galeria__track,html.anm-js .anm-galeria__track{animation:none!important;transform:none!important}
  .anm-galeria__row [aria-hidden="true"]{display:none}
  .anm-post,.anm-post img{transition:none}
}