/* =========================================================================
   EFEITOS — carregado por TODAS as páginas do site.
   Reúne em um só lugar: tela de carregamento, anel do cursor, botão de
   voltar ao topo e a revelação dos blocos ao rolar.

   Como funciona a revelação: o site.js marca cada bloco com .sb-in e,
   quando ele entra na tela, acrescenta .dentro. A DIREÇÃO de cada
   movimento é decidida aqui — para mudar qualquer entrada, mexa só
   neste arquivo. Como .sb-in só existe quando o script roda, sem
   JavaScript nada fica escondido.
   ========================================================================= */

/* =========================================================
   1. TELA DE CARREGAMENTO
   ========================================================= */
.sb-loader{position:fixed;inset:0;z-index:200;display:grid;place-content:center;
  justify-items:center;gap:22px;background:var(--night,#150f22);
  transition:opacity .5s ease,visibility .5s}
.sb-loader.fora{opacity:0;visibility:hidden}
.sb-loader p{color:#fff;font-size:15px;font-weight:700;letter-spacing:.32em;
  text-transform:uppercase;opacity:.55}
.sb-loader-mark{display:flex;gap:9px}
/* três favos pulsando — a geometria vem do símbolo da marca */
.sb-loader-mark span{width:19px;height:22px;background:#a476ec;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  animation:sbFavo 1.1s ease-in-out infinite}
.sb-loader-mark span:nth-child(2){animation-delay:.14s}
.sb-loader-mark span:nth-child(3){animation-delay:.28s}
@keyframes sbFavo{0%,100%{opacity:.25;transform:translateY(0) scale(.86)}
  45%{opacity:1;transform:translateY(-9px) scale(1)}}

/* =========================================================
   2. CURSOR
   A seta do sistema continua sendo o ponteiro: nada aqui a esconde.
   O anel apenas acompanha o movimento com atraso, sempre atrás dela.
   Para desligar o efeito, apague este bloco.
   ========================================================= */
.sb-cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:150;opacity:0;
  width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(164,118,236,.55);
  border-radius:50%;
  transition:opacity .3s,width .25s,height .25s,margin .25s,background .25s,border-color .25s}
.sb-cursor-on .sb-cursor{opacity:1}
.sb-cursor.sobre{width:58px;height:58px;margin:-29px 0 0 -29px;
  background:rgba(164,118,236,.12);border-color:rgba(201,168,255,.75)}
.sb-cursor.clique{width:26px;height:26px;margin:-13px 0 0 -13px}
@media (hover:none),(pointer:coarse){.sb-cursor{display:none}}

/* =========================================================
   3. VOLTAR AO TOPO
   ========================================================= */
.sb-topo{position:fixed;right:26px;bottom:26px;z-index:40;width:50px;height:50px;border:0;
  border-radius:50%;background:linear-gradient(115deg,#8042d2,#6835b0);color:#fff;display:grid;
  place-items:center;opacity:0;transform:translateY(14px) scale(.85);pointer-events:none;
  box-shadow:0 14px 30px -14px rgba(121,63,196,.75);
  transition:opacity .3s,transform .3s cubic-bezier(.3,1.3,.5,1),background .2s}
.sb-topo.vendo{opacity:1;transform:none;pointer-events:auto}
.sb-topo:hover{background:linear-gradient(115deg,#8c4ade,#7942be)}
.sb-topo .icon{width:21px;height:21px;transform:rotate(-90deg)}
@media (max-width:760px){.sb-topo{right:16px;bottom:16px;width:44px;height:44px}}

/* =========================================================
   4. MECANISMO DA REVELAÇÃO
   ========================================================= */
.sb-in{opacity:0;
  transition:opacity .7s cubic-bezier(.22,.68,.3,1),
             transform .78s cubic-bezier(.22,.68,.3,1)}
.sb-in.dentro{opacity:1;transform:none!important}

/* heróis: entram assim que a tela de carregamento sai, sem esperar rolagem */
.hero-copy>*,.hero-figure,
.agency-hero-grid>div>*,.agency-hero-photo,
.agency-page-intro .wrap>*{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.25,1)}
.sb-pronto .hero-copy>*,.sb-pronto .hero-figure,
.sb-pronto .agency-hero-grid>div>*,.sb-pronto .agency-hero-photo,
.sb-pronto .agency-page-intro .wrap>*{opacity:1;transform:none}
.sb-pronto .hero-copy>*:nth-child(1),
.sb-pronto .agency-hero-grid>div>*:nth-child(1),
.sb-pronto .agency-page-intro .wrap>*:nth-child(1){transition-delay:.05s}
.sb-pronto .hero-copy>*:nth-child(2),
.sb-pronto .agency-hero-grid>div>*:nth-child(2),
.sb-pronto .agency-page-intro .wrap>*:nth-child(2){transition-delay:.16s}
.sb-pronto .hero-copy>*:nth-child(3),
.sb-pronto .agency-hero-grid>div>*:nth-child(3),
.sb-pronto .agency-page-intro .wrap>*:nth-child(3){transition-delay:.27s}
.sb-pronto .hero-copy>*:nth-child(4),
.sb-pronto .agency-hero-grid>div>*:nth-child(4){transition-delay:.38s}
.sb-pronto .hero-figure,.sb-pronto .agency-hero-photo{transition-delay:.2s}

/* =========================================================
   5. DIREÇÕES — PLATAFORMA (7bee)
   ========================================================= */
.section-heading.centered>.eyebrow.sb-in{transform:translateY(-26px)}
.section-heading.centered>h2.sb-in     {transform:translateY(34px);transition-delay:.09s}
.section-heading.centered>p.sb-in      {transform:translateY(16px);transition-delay:.18s}

/* blocos de duas colunas entram um contra o outro */
.split-layout>*:nth-child(1).sb-in{transform:translateX(-48px)}
.split-layout>*:nth-child(2).sb-in{transform:translateX(48px);transition-delay:.1s}
/* na seção de IA o sentido muda, para não repetir três seções seguidas */
.ai-section .split-layout>*:nth-child(1).sb-in{transform:translate(-30px,26px)}
.ai-section .split-layout>*:nth-child(2).sb-in{transform:translate(30px,26px)}

/* os três pilares se fecham em leque */
.pillars>article:nth-child(1).sb-in{transform:translateX(-46px)}
.pillars>article:nth-child(2).sb-in{transform:translateY(38px);transition-delay:.1s}
.pillars>article:nth-child(3).sb-in{transform:translateX(46px);transition-delay:.2s}

.atendimento-details>article:nth-child(1).sb-in{transform:translate(-28px,26px)}
.atendimento-details>article:nth-child(2).sb-in{transform:translateY(32px);transition-delay:.1s}
.atendimento-details>article:nth-child(3).sb-in{transform:translate(28px,26px);transition-delay:.2s}

.journey-steps>li.sb-in{transform:translateX(-24px)}
.journey-steps>li:nth-child(2).sb-in{transition-delay:.11s}
.journey-steps>li:nth-child(3).sb-in{transition-delay:.22s}
.check-list>li.sb-in{transform:translateX(24px)}
.check-list>li:nth-child(2).sb-in{transition-delay:.11s}
.check-list>li:nth-child(3).sb-in{transition-delay:.22s}

.ai-routing>div.sb-in{transform:translateY(20px)}
.ai-routing>div:nth-child(2).sb-in{transition-delay:.11s}
.ai-routing>div:nth-child(3).sb-in{transition-delay:.22s}
.ai-capabilities>article:nth-child(1).sb-in{transform:translate(-28px,26px)}
.ai-capabilities>article:nth-child(2).sb-in{transform:translateY(32px);transition-delay:.1s}
.ai-capabilities>article:nth-child(3).sb-in{transform:translate(28px,26px);transition-delay:.2s}

.product-figure.sb-in {transform:translateY(40px)}
.diagram-caption.sb-in{transform:translateY(14px);transition-delay:.16s}

/* grades de seis: cada coluna entra por um lado */
.resource-grid>article:nth-child(3n+1).sb-in{transform:translate(-28px,26px)}
.resource-grid>article:nth-child(3n+2).sb-in{transform:translateY(34px);transition-delay:.1s}
.resource-grid>article:nth-child(3n+3).sb-in{transform:translate(28px,26px);transition-delay:.2s}
.section-note.sb-in{transform:translateY(16px);transition-delay:.1s}
/* situações: diagonais trocadas, para não repetir a grade anterior */
.situation-grid>li:nth-child(3n+1).sb-in{transform:translate(28px,26px)}
.situation-grid>li:nth-child(3n+2).sb-in{transform:translateY(34px);transition-delay:.1s}
.situation-grid>li:nth-child(3n+3).sb-in{transform:translate(-28px,26px);transition-delay:.2s}

.solution-tabs>button.sb-in{transform:translateY(-22px)}
.solution-tabs>button:nth-child(2).sb-in{transition-delay:.08s}
.solution-tabs>button:nth-child(3).sb-in{transition-delay:.16s}
.solution-tabs>button:nth-child(4).sb-in{transition-delay:.24s}
.solution-panel.sb-in {transform:translateY(34px);transition-delay:.1s}
.solution-label.sb-in {transform:translateX(-22px);transition-delay:.18s}
.sector-journey>li.sb-in{transform:translateX(26px)}
.sector-journey>li:nth-child(2).sb-in{transition-delay:.11s}
.sector-journey>li:nth-child(3).sb-in{transition-delay:.22s}

.implementation-steps>li.sb-in{transform:translateY(36px)}
.implementation-steps>li:nth-child(2).sb-in{transition-delay:.12s}
.implementation-steps>li:nth-child(3).sb-in{transition-delay:.24s}
.strategy-strip.sb-in{transform:translateY(16px);transition-delay:.12s}

.faq-layout>*:nth-child(1).sb-in{transform:translateX(-42px)}
.faq-layout>*:nth-child(2).sb-in{transform:translateX(42px);transition-delay:.1s}
.faq-list>details.sb-in{transform:translateY(18px)}
.faq-list>details:nth-child(2).sb-in{transition-delay:.07s}
.faq-list>details:nth-child(3).sb-in{transition-delay:.14s}
.faq-list>details:nth-child(4).sb-in{transition-delay:.21s}
.faq-list>details:nth-child(5).sb-in{transition-delay:.28s}
.faq-list>details:nth-child(6).sb-in{transition-delay:.35s}

.contact-inner>*:nth-child(1).sb-in{transform:translateY(-24px)}
.contact-inner>*:nth-child(2).sb-in{transform:translateY(36px);transition-delay:.1s}
.contact-inner>*:nth-child(3).sb-in{transform:translateY(20px);transition-delay:.2s}
.contact-inner>*:nth-child(4).sb-in{transform:translateY(16px);transition-delay:.3s}

/* =========================================================
   6. DIREÇÕES — AGÊNCIA (home)
   ========================================================= */
.agency-section-top>*:nth-child(1).sb-in{transform:translateX(-44px)}
.agency-section-top>*:nth-child(2).sb-in{transform:translateX(44px);transition-delay:.1s}

.service-teasers>.service-teaser:nth-child(3n+1).sb-in{transform:translate(-28px,26px)}
.service-teasers>.service-teaser:nth-child(3n+2).sb-in{transform:translateY(34px);transition-delay:.1s}
.service-teasers>.service-teaser:nth-child(3n+3).sb-in{transform:translate(28px,26px);transition-delay:.2s}

.agency-story-strip .wrap>*:nth-child(1).sb-in{transform:translate(-26px,24px)}
.agency-story-strip .wrap>*:nth-child(2).sb-in{transform:translate(26px,24px);transition-delay:.12s}

.agency-cta .wrap>*:nth-child(1).sb-in{transform:translateY(34px)}
.agency-cta .wrap>*:nth-child(2).sb-in{transform:translateY(18px);transition-delay:.14s}

/* =========================================================
   7. DIREÇÕES — SERVIÇOS
   Lista longa e repetitiva: as fichas alternam o lado de entrada,
   para a rolagem não virar um único movimento repetido seis vezes.
   ========================================================= */
.service-details>.service-detail:nth-child(odd).sb-in {transform:translateX(-40px)}
.service-details>.service-detail:nth-child(even).sb-in{transform:translateX(40px)}
.service-detail-top>*:nth-child(1).sb-in{transform:translateY(-18px)}
.service-detail-top>*:nth-child(2).sb-in{transform:translateY(24px);transition-delay:.08s}
.service-tags>li.sb-in{transform:translateY(14px)}
.service-tags>li:nth-child(2).sb-in{transition-delay:.07s}
.service-tags>li:nth-child(3).sb-in{transition-delay:.14s}
.service-tags>li:nth-child(4).sb-in{transition-delay:.21s}

/* =========================================================
   8. DIREÇÕES — SOBRE
   ========================================================= */
.about-story>*:nth-child(1).sb-in{transform:translateX(-44px)}
.about-story>*:nth-child(2).sb-in{transform:translateX(44px);transition-delay:.1s}
/* quatro pilares: as pontas vêm de fora, o miolo sobe */
.agency-pillars>article:nth-child(1).sb-in{transform:translate(-30px,24px)}
.agency-pillars>article:nth-child(2).sb-in{transform:translateY(32px);transition-delay:.09s}
.agency-pillars>article:nth-child(3).sb-in{transform:translateY(32px);transition-delay:.18s}
.agency-pillars>article:nth-child(4).sb-in{transform:translate(30px,24px);transition-delay:.27s}
.agency-values>*:nth-child(1).sb-in{transform:translateY(-20px)}
.agency-values>*:nth-child(2).sb-in{transform:translate(-26px,26px);transition-delay:.1s}
.agency-values>*:nth-child(3).sb-in{transform:translate(26px,26px);transition-delay:.2s}

/* =========================================================
   9. DIREÇÕES — CONTATO
   ========================================================= */
.agency-contact-layout>*:nth-child(1).sb-in{transform:translateX(-44px)}
.agency-contact-layout>*:nth-child(2).sb-in{transform:translateX(44px);transition-delay:.1s}
.contact-details>*.sb-in{transform:translateX(-20px)}
.contact-details>*:nth-child(2).sb-in{transition-delay:.09s}
.contact-details>*:nth-child(3).sb-in{transition-delay:.18s}
.contact-details>*:nth-child(4).sb-in{transition-delay:.27s}
.agency-message form>*.sb-in{transform:translateY(20px)}
.agency-message form>*:nth-child(2).sb-in{transition-delay:.08s}
.agency-message form>*:nth-child(3).sb-in{transition-delay:.16s}
.agency-message form>*:nth-child(4).sb-in{transition-delay:.24s}
.agency-message form>*:nth-child(5).sb-in{transition-delay:.32s}

/* =========================================================
   10. DIREÇÕES — RODAPÉ (igual em todas as páginas)
   ========================================================= */
.footer-main>*:nth-child(1).sb-in{transform:translateX(-24px)}
.footer-main>*:nth-child(2).sb-in{transform:translateY(20px);transition-delay:.08s}
.footer-main>*:nth-child(3).sb-in{transform:translateY(20px);transition-delay:.16s}
.footer-main>*:nth-child(4).sb-in{transform:translateX(24px);transition-delay:.24s}

/* =========================================================
   11. MICROTRANSIÇÕES DE TOQUE (agência)
   ========================================================= */
.service-teaser,.service-detail,.agency-pillars>article{
  transition:transform .28s cubic-bezier(.2,.7,.25,1),box-shadow .28s,border-color .28s}
.service-teaser:hover,.agency-pillars>article:hover{transform:translateY(-6px);
  box-shadow:0 26px 50px -34px rgba(25,21,44,.55)}
.service-teaser>.icon{transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.service-teaser:hover>.icon{transform:translateY(-3px) rotate(-6deg)}
.agency-hero-photo img,.about-photo img{
  transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.agency-hero-photo:hover img,.about-photo:hover img{transform:scale(1.03)}

/* =========================================================
   12. TELAS ESTREITAS
   As grades viram uma coluna só. Entrada lateral ali causa rolagem
   horizontal, então tudo passa a subir.
   ========================================================= */
@media (max-width:760px){
  .sb-in{transform:translateY(22px)!important;transition-delay:0s!important}
  .sb-in.dentro{transform:none!important}
}

/* =========================================================
   13. QUEM PEDIU MENOS MOVIMENTO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .sb-in,.sb-in.dentro,
  .hero-copy>*,.hero-figure,
  .agency-hero-grid>div>*,.agency-hero-photo,
  .agency-page-intro .wrap>*{
    opacity:1!important;transform:none!important;transition:none!important}
  .sb-loader-mark span{animation:none;opacity:1}
  .service-teaser:hover,.agency-pillars>article:hover{transform:none}
  .agency-hero-photo:hover img,.about-photo:hover img{transform:none}
  .sb-cursor{display:none}
}