/* ==========================================================================
   Efeitos e transições do site inteiro. Tudo acontece com a rolagem
   (animation-timeline) e, onde o navegador não tem isso, por classe .ok via JS.
   ========================================================================== */

/* ---------- transição entre páginas ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:e-sai .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:e-entra .55s cubic-bezier(.2,.7,.2,1) both}
.cab{view-transition-name:cabecalho}
@keyframes e-sai{to{opacity:0;transform:translateY(-24px) scale(.99)}}
@keyframes e-entra{from{opacity:0;transform:translateY(32px)}}

/* ---------- barra de progresso de leitura ---------- */
.progresso{position:fixed;left:0;right:0;top:0;height:3px;background:var(--verde);transform-origin:left;transform:scaleX(0);z-index:80;pointer-events:none}
@supports (animation-timeline: scroll()){
  .progresso{animation:e-prog linear both;animation-timeline:scroll(root)}
}
@keyframes e-prog{to{transform:none}}

/* ---------- títulos entram palavra por palavra ---------- */
.pal{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.pal > span{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k,0) * 55ms)}
.titulo-ok .pal > span{transform:none}

/* ---------- blocos que sobem em cascata ---------- */
@keyframes e-sobe{from{opacity:0;translate:0 48px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@supports (animation-timeline: view()){
  .sobe{animation:e-sobe linear both;animation-timeline:view();animation-range:entry calc(var(--k,0) * 7%) cover calc(22% + var(--k,0) * 4%)}
}
@supports not (animation-timeline: view()){
  .sobe{transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1),scale .8s;transition-delay:calc(var(--k,0) * 90ms)}
  .js .sobe:not(.ok){opacity:0;translate:0 48px;scale:.96}
}

/* ---------- hero: mapa em paralaxe e texto que se afasta ao descer ---------- */
.hero h1 .pal > span{transition-duration:1.1s}
@supports (animation-timeline: scroll()){
  .hero .mapa{animation:e-paralaxe linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  .hero .txt{animation:e-afasta linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  .hero-int .txt{animation:e-afasta linear both;animation-timeline:scroll(root);animation-range:0 70vh}
}
@keyframes e-paralaxe{to{translate:0 22%;scale:1.12}}
@keyframes e-afasta{to{opacity:.15;translate:0 -80px}}

/* ---------- luz que segue o mouse nas faixas escuras e nos cartões ---------- */
.luz{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--cor,var(--verde)) 16%,transparent),transparent 45%)}
.com-luz:hover > .luz{opacity:1}
.com-luz{position:relative}
.escuro.com-luz > .c,.hero.com-luz > .c{position:relative;z-index:1}

/* ---------- cartões das frentes: faixa de cor que corre, número que gira ---------- */
.frentes > a{position:relative;overflow:hidden;isolation:isolate}
.frentes > a::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--cor);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1);z-index:1}
.frentes > a:hover::before{transform:none}
.frentes .n i{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.frentes > a:hover .n i{transform:rotate(225deg) scale(1.4)}
.frentes .ir::after{display:inline-block;transition:transform .3s}
.frentes > a:hover .ir::after{transform:translateX(6px)}

/* ---------- segmentos: linha verde que cresce ---------- */
.segs a{position:relative}
.segs a::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--verde);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.segs a:hover::after{transform:none}
@supports (animation-timeline: view()){
  .segs a::after{animation:e-risco linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
  .segs a:hover::after{animation:none;transform:none}
}
@keyframes e-risco{from{transform:scaleX(0)}to{transform:scaleX(.18)}}

/* ---------- método: linha desenhada e etapa que avança ---------- */
.linhas .l{position:relative;transition:padding-left .4s cubic-bezier(.2,.7,.2,1)}
.linhas .l::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--verde);transform:scaleX(0);transform-origin:left}
.linhas .l:hover{padding-left:12px}
@supports (animation-timeline: view()){
  .linhas .l::after{animation:e-desenha linear both;animation-timeline:view();animation-range:entry 40% cover 55%}
}
@keyframes e-desenha{to{transform:none}}

/* ---------- botões: brilho que atravessa e seta que anda ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.55) 50%,transparent 75%);transform:translateX(-130%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.btn:hover::after{transform:translateX(130%)}
.btn.p:hover{box-shadow:0 10px 30px -10px rgba(181,204,24,.8);transform:translateY(-2px)}
.btn.p{animation:e-respira-btn 3.2s ease-in-out infinite}
@keyframes e-respira-btn{0%,100%{box-shadow:0 0 0 0 rgba(181,204,24,0)}50%{box-shadow:0 0 0 6px rgba(181,204,24,.18)}}

/* ---------- números: brilho ao terminar de contar ---------- */
.prova b,.numeros b{transition:color .4s,text-shadow .6s}
.contou{text-shadow:0 0 24px rgba(181,204,24,.55)}
.prova > div{transition:background .3s}
.prova > div:not(.destaque):hover{background:#22221f}

/* ---------- logos: acendem ao passar ---------- */
.logos div{transition:background .3s}
.logos div:hover{background:#22221f}
.logos img{transition:opacity .3s,filter .4s,transform .4s}
.logos div:hover img{filter:none;transform:scale(1.06)}

/* ---------- insights: imagem revelada por cortina e zoom lento ---------- */
@supports (animation-timeline: view()){
  .ins .img{animation:e-cortina linear both;animation-timeline:view();animation-range:entry 5% cover 35%}
  .ins .img img{animation:e-zoom linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
}
@keyframes e-cortina{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes e-zoom{from{scale:1.18}to{scale:1}}

/* ---------- rótulos verdes: traço que cresce antes do texto ---------- */
.rot.cl-verde{display:inline-flex;align-items:center;gap:10px}
.rot.cl-verde::before{content:"";width:22px;height:2px;background:currentColor;transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1) .1s}
.js .rv:not(.ok) .rot.cl-verde::before{transform:scaleX(0)}

/* ---------- faixas escuras: fundo com grade que desliza ---------- */
.escuro{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px}
@supports (animation-timeline: view()){
  section.escuro{animation:e-grade linear both;animation-timeline:view()}
}
@keyframes e-grade{from{background-position:0 0}to{background-position:0 -192px}}

/* ---------- vitrine: telas inclinadas que endireitam ao chegar ---------- */
.vitrine{perspective:1600px}
@supports (animation-timeline: view()){
  .vitrine .v{animation:e-endireita linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
}
@keyframes e-endireita{from{transform:rotateX(18deg) translateY(60px) scale(.94);opacity:.2}to{transform:none;opacity:1}}
.vitrine .v{transition:box-shadow .4s,border-color .4s}
.vitrine .v:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.45);border-color:var(--verde)}

/* ==========================================================================
   Diagrama "Hoje × Com a Ruah" (planta técnica)
   ========================================================================== */
.diag{display:grid;gap:0;border:1px solid var(--linha);border-radius:6px;overflow:hidden;
  background-color:#fbfbf8;background-image:linear-gradient(var(--linha) 1px,transparent 1px),linear-gradient(90deg,var(--linha) 1px,transparent 1px);background-size:40px 40px;background-position:-1px -1px}
@media (min-width:900px){.diag{grid-template-columns:1fr 1fr}.diag .lado.a{border-right:1px dashed #b9baae}}
.diag .lado{width:100%;height:auto;display:block;overflow:visible;padding:8px}
.diag text{font-family:var(--t);font-size:15px;fill:var(--texto)}
.diag .tit{font-family:var(--m);font-size:12px;letter-spacing:.06em;fill:var(--texto)}
.diag .tit.verde{fill:#5c6b0b}
.diag .cx{fill:#fff;stroke:var(--preto);stroke-width:1.2}
.diag .p,.diag .ps{transform-box:fill-box;transform-origin:center}
.diag .pt{fill:none;stroke-dasharray:1;stroke-linecap:round}
.diag .quebra{stroke:#8d8f84;stroke-width:1.4}
.diag .corte path{stroke:#d0603f;stroke-width:2.2;stroke-linecap:round}
.diag .corte{animation:e-pisca-corte 1.8s ease-in-out infinite}
.diag .tag rect{fill:var(--preto)}
.diag .tag path{stroke:var(--preto);stroke-width:1;fill:none}
.diag .tag text{fill:#fff;font-family:var(--m);font-size:11px;text-anchor:middle}
.diag .cota path{stroke:var(--preto);stroke-width:1;fill:none}
.diag .cota text{font-family:var(--m);font-size:12px;letter-spacing:.06em;text-anchor:middle}
.diag .cota.verde path{stroke:#5c6b0b}.diag .cota.verde text{fill:#5c6b0b}
.diag .liga{stroke:#7d9110;stroke-width:2.4;stroke-linejoin:round}
.diag .nucleo-hub{fill:var(--verde)}
.diag .onda-hub{fill:none;stroke:var(--verde);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:e-onda-hub 2.6s ease-out infinite}
.diag .hub text{text-anchor:middle;font-size:12px;font-weight:600;fill:var(--preto)}
.diag .painel rect{fill:var(--preto)}
.diag .painel text{fill:var(--verde);font-weight:600;font-size:16px}
.diag .deriva{animation:e-deriva 6s ease-in-out infinite;animation-delay:var(--d,0s);transform-box:fill-box}
.diag .dado{r:4.5px;fill:#5c6b0b;offset-rotate:0deg;animation:e-corre 2.8s linear infinite;animation-delay:var(--c,0s)}
.diag .dado.sai{fill:var(--verde);stroke:var(--preto);stroke-width:1}
@keyframes e-deriva{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(5px,-4px) rotate(.6deg)}66%{transform:translate(-4px,3px) rotate(-.5deg)}}
@keyframes e-corre{from{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}to{offset-distance:100%;opacity:0}}
@keyframes e-onda-hub{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}
@keyframes e-pisca-corte{50%{opacity:.35}}
/* os pontos de dados só correm depois que a coordenação aparece */
@supports (animation-timeline: view()){
  .diag .fluxos{animation:e-mostra linear both;animation-timeline:--tela;animation-range:cover 45% cover 55%}
}
@keyframes e-mostra{from{opacity:0}to{opacity:1}}
.diag-notas{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:900px){.diag-notas{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}}
.diag-notas li{display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:22px;color:var(--texto2);border-top:2px solid var(--linha);padding-top:12px;transition:border-color .4s}
.diag-notas li:hover{border-color:var(--verde)}
.diag-notas b{font-family:var(--m);font-size:12px;font-weight:500;background:var(--preto);color:#fff;align-self:flex-start;padding:2px 8px}

/* ---------- quem pediu menos movimento vê tudo parado e pronto ---------- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .sobe,.hero .mapa,.hero .txt,.hero-int .txt,.vitrine .v,.ins .img,.ins .img img,section.escuro,.btn.p,.diag *{animation:none!important}
  .sobe{opacity:1!important;translate:none!important;scale:none!important}
  .pal > span{transform:none!important;transition:none!important}
  .progresso{display:none}
}