/* LB Motion · animações e transições padrão da LeaderBrand
   Cores só por --m-*. Tudo desliga com "reduzir movimento". */
:root{
  --lb-ease:cubic-bezier(.25,.8,.25,1);
  --lb-ease-out:cubic-bezier(.22,1,.36,1);
  --lb-rapido:.4s;--lb-medio:.7s;--lb-lento:1.4s;
}

/* 1. Entrada ao rolar ------------------------------------------------ */
[data-revelar]{opacity:0;transition:opacity var(--lb-lento) var(--lb-ease-out),transform var(--lb-lento) var(--lb-ease-out),clip-path 1.1s var(--lb-ease-out);transition-delay:calc(var(--i,0) * 140ms);will-change:opacity,transform}
[data-revelar="subir"]{transform:translateY(22px)}
[data-revelar="esquerda"]{transform:translateX(-28px)}
[data-revelar="direita"]{transform:translateX(28px)}
[data-revelar="zoom"]{transform:scale(.97)}
[data-revelar="cortina"]{opacity:1;clip-path:inset(0 100% 0 0)}
[data-revelar].lb-visivel{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.lb-sem-js [data-revelar]{opacity:1;transform:none;clip-path:none}

/* 2. Botão com preenchimento deslizante ------------------------------ */
.lb-m-btn{position:relative;isolation:isolate;overflow:hidden;transition:color var(--lb-medio) var(--lb-ease),border-color var(--lb-medio) var(--lb-ease)}
.lb-m-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lb-btn-hover,var(--m-escura));transform:scaleX(0);transform-origin:right;transition:transform var(--lb-medio) var(--lb-ease)}
.lb-m-btn:hover::before,.lb-m-btn:focus-visible::before{transform:scaleX(1);transform-origin:left}
.lb-m-btn:hover,.lb-m-btn:focus-visible{color:var(--lb-btn-hover-texto,var(--m-sobre-escura))}
.lb-m-btn svg{transition:transform var(--lb-medio) var(--lb-ease)}
.lb-m-btn:hover svg{transform:translateX(4px)}
.lb-m-btn-seta-giro:hover svg{transform:rotate(-45deg)}

/* 3. Card que sobe -------------------------------------------------- */
.lb-m-card{transition:transform var(--lb-medio) var(--lb-ease),box-shadow var(--lb-medio) var(--lb-ease)}
.lb-m-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px color-mix(in oklab,var(--m-escura) 16%,transparent)}

/* 4. Zoom na foto + véu --------------------------------------------- */
.lb-m-foto{position:relative;overflow:hidden}
.lb-m-foto img{transition:transform 1.6s var(--lb-ease-out)}
.lb-m-foto::after{content:"";position:absolute;inset:0;background:var(--m-escura);opacity:0;transition:opacity var(--lb-medio) var(--lb-ease);pointer-events:none}
:is(.lb-m-foto,.lb-m-card):hover .lb-m-foto img,.lb-m-foto:hover img{transform:scale(1.07)}
:is(.lb-m-card):hover .lb-m-foto::after,.lb-m-foto:hover::after{opacity:.18}

/* 5. Ícone que gira ao passar no card ------------------------------- */
.lb-m-icone{display:inline-grid;place-items:center;transition:transform .6s var(--lb-ease),background var(--lb-medio),color var(--lb-medio)}
.lb-m-card:hover .lb-m-icone{transform:rotateY(180deg);background:var(--m-destaque);color:var(--m-escura)}
.lb-m-card:hover .lb-m-icone>*{transform:rotateY(180deg)}

/* 6. Link com sublinhado que cresce --------------------------------- */
.lb-m-link{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size var(--lb-medio) var(--lb-ease)}
.lb-m-link:hover,.lb-m-link:focus-visible{background-size:100% 2px}

/* 7. Faixa de logos infinita ---------------------------------------- */
.lb-m-faixa{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lb-m-faixa>ul{display:flex;width:max-content;gap:var(--lb-faixa-gap,64px);margin:0;padding:0;list-style:none;animation:lb-faixa var(--lb-faixa-tempo,32s) linear infinite}
.lb-m-faixa:hover>ul{animation-play-state:paused}
.lb-m-faixa img{filter:grayscale(1);opacity:.6;transition:filter var(--lb-medio),opacity var(--lb-medio)}
.lb-m-faixa li:hover img{filter:none;opacity:1}
@keyframes lb-faixa{to{transform:translateX(calc(-50% - var(--lb-faixa-gap,64px) / 2))}}

/* 8. Topo que muda ao rolar ----------------------------------------- */
.lb-m-topo{transition:background var(--lb-medio) var(--lb-ease),box-shadow var(--lb-medio) var(--lb-ease),transform var(--lb-medio) var(--lb-ease),padding var(--lb-medio) var(--lb-ease)}
.lb-m-topo[data-rolou="true"]{box-shadow:0 10px 30px color-mix(in oklab,var(--m-escura) 18%,transparent)}
.lb-m-topo[data-escondido="true"]{transform:translateY(-100%)}

/* 9. Submenu que desce ---------------------------------------------- */
.lb-m-sub{position:relative}
.lb-m-sub>ul{position:absolute;top:100%;left:0;min-width:220px;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity var(--lb-rapido) var(--lb-ease),transform var(--lb-rapido) var(--lb-ease),visibility 0s var(--lb-rapido)}
.lb-m-sub:hover>ul,.lb-m-sub:focus-within>ul{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.lb-m-sub>ul a{display:block;transition:padding-left var(--lb-rapido) var(--lb-ease),color var(--lb-rapido)}
.lb-m-sub>ul a:hover{padding-left:8px}

/* 10. Acordeão com altura suave ------------------------------------- */
.lb-m-acordeao{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--lb-medio) var(--lb-ease-out)}
.lb-m-acordeao>*>*{opacity:0;transform:translateY(-6px);transition:opacity var(--lb-medio) var(--lb-ease-out),transform var(--lb-medio) var(--lb-ease-out)}
[aria-expanded="true"]+.lb-m-acordeao>*>*{opacity:1;transform:none;transition-delay:.12s}
.lb-m-acordeao>*{overflow:hidden}
[aria-expanded="true"]+.lb-m-acordeao{grid-template-rows:1fr}
.lb-m-mais{transition:transform var(--lb-medio) var(--lb-ease)}
[aria-expanded="true"] .lb-m-mais{transform:rotate(45deg)}

/* 11. Abas com troca suave ------------------------------------------ */
.lb-m-painel{animation:lb-troca var(--lb-medio) var(--lb-ease-out)}
.lb-m-painel[hidden]{display:none}
@keyframes lb-troca{from{opacity:0;transform:translateY(10px)}}
.lb-m-aba{position:relative}
.lb-m-aba::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--m-destaque);transform:scaleX(0);transition:transform var(--lb-medio) var(--lb-ease)}
.lb-m-aba[aria-selected="true"]::after{transform:scaleX(1)}

/* 12. Selo flutuante ------------------------------------------------ */
.lb-m-flutua{animation:lb-flutua 5s ease-in-out infinite}
@keyframes lb-flutua{50%{transform:translateY(-10px)}}

/* 13. Botão de vídeo com pulso -------------------------------------- */
.lb-m-pulso{position:relative}
.lb-m-pulso::before,.lb-m-pulso::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid currentColor;animation:lb-pulso 2.4s var(--lb-ease-out) infinite;pointer-events:none}
.lb-m-pulso::after{animation-delay:1.2s}
@keyframes lb-pulso{from{transform:scale(1);opacity:.7}to{transform:scale(1.8);opacity:0}}

/* 14. Voltar ao topo com progresso ---------------------------------- */
.lb-m-topo-btn{position:fixed;right:20px;bottom:96px;z-index:70;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;background:conic-gradient(var(--m-destaque) calc(var(--progresso,0) * 1%),color-mix(in oklab,var(--m-escura) 25%,transparent) 0);cursor:pointer;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity var(--lb-medio),transform var(--lb-medio) var(--lb-ease)}
.lb-m-topo-btn::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--m-escura)}
.lb-m-topo-btn svg{position:relative;color:var(--m-sobre-escura)}
.lb-m-topo-btn[data-visivel="true"]{opacity:1;transform:none;pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  [data-revelar]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .lb-m-faixa>ul,.lb-m-flutua,.lb-m-pulso::before,.lb-m-pulso::after,.lb-m-painel{animation:none!important}
  *,*::before,*::after{transition-duration:.01ms!important}
}