/* 99 · RODAPÉ · prefixo .rod
   Uma linha: logo, frase, idiomas e a linha legal. Abaixo, o wordmark gigante cortado pela base:
   as letras sobem pela inclinação de 15° com a rolagem (--q, gravado por js/99-rodape.js) e uma
   luz laranja segue o cursor por dentro delas. O laranja aparece só no símbolo da logo e nessa luz. */
.rod{position:relative;padding-top:var(--e-8)}
/* borda superior: o preto sobe sobre o laranja por um degrau de 15° que corre com a rolagem (pela esquerda: o símbolo fecha a direita) */
.rod-borda{--bh:clamp(40px,5vw,72px);--bx:calc(4% + var(--p,.45)*52%);position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--bh);background:var(--fundo);pointer-events:none;
  clip-path:polygon(0 100%,0 0,calc(var(--bx) + var(--bh)*var(--tan15)) 0,var(--bx) 100%)}
.rod-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-8)}
.rod-logo{display:inline-flex;align-items:center;flex:none;min-height:44px}
.rod-logo svg{height:24px;width:auto}
.rod-frase{flex:1 1 20em;text-wrap:balance;font-size:var(--t-pequeno);line-height:1.5;color:var(--texto-2)}
.rod-idioma{display:flex;align-items:center;margin-left:-7px;font:400 var(--t-rotulo)/1 var(--f-mono);letter-spacing:.08em;color:var(--texto-3)}
.rod-idioma a{display:flex;align-items:center;height:44px;padding-inline:7px;transition:color var(--dur-micro) var(--curva-entrada)}
.rod-idioma a:hover,.rod-idioma a[aria-current]{color:var(--texto)}
.rod-legal{font-size:var(--t-pequeno);line-height:1.5;color:var(--texto-3)}
@media (max-width:719px){
  .rod-frase{flex-basis:100%}
  .rod-legal{flex-basis:100%}
}

/* ---------- wordmark gigante ---------- */
.rod-marca{position:relative;isolation:isolate;overflow:hidden;max-width:var(--largura);margin:clamp(40px,6vw,88px) auto 0;width:calc(100% - 2*var(--margem));
  aspect-ratio:408.8/72;background:var(--fundo);color:var(--texto)}
.rod-wm{display:block;width:100%;height:auto;overflow:visible}
/* cada letra sobe pela inclinação (o translate acontece dentro do grupo inclinado), uma depois da outra */
.rod-l{--k:clamp(0,calc((var(--q,1)*1.35 - var(--i,0)*.11)/.7),1);transform:translateY(calc((1 - var(--k))*84px))}
.mov .rod-l{transition:transform 700ms cubic-bezier(.16,1,.3,1)}
/* luz laranja sob o cursor: multiplica, então só tinge as letras brancas */
.rod-luz{position:absolute;left:-300px;top:-300px;width:600px;height:600px;opacity:0;pointer-events:none;mix-blend-mode:multiply;
  transform:translate3d(var(--fx,50%),var(--fy,50%),0);transition:opacity 500ms var(--curva-entrada);
  background:radial-gradient(closest-side,var(--marca) 30%,var(--c-branco))}
.rod-marca.com-foco .rod-luz{opacity:1}