/* =====================================================================
   Efeitos compartilhados do site Velox Soluções Financeiras.
   Revelar ao rolar, cabeçalho que muda ao rolar, barra de progresso,
   contadores, faixa de logos, luz que segue o mouse, brilho nos botões
   e o vídeo do topo da home.

   Animação desligada no sistema (prefers-reduced-motion: reduce): o que é
   esmaecimento e mudança de cor continua valendo; deslocamento, zoom e
   brilho que atravessa o botão saem. O Windows do dono do site está
   assim, então o "modo reduzido" precisa continuar bonito, não vazio.
   ===================================================================== */

/* ---------- Revelar ao rolar ----------
   Só esconde sob .js (posta pelo js-on.js). Sem JS, tudo aparece. */
.js .rv{
  opacity:0;transform:translateY(28px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s);
}
.js .rv.rv-esq{transform:translateX(-32px)}
.js .rv.rv-dir{transform:translateX(32px)}
.js .rv.rv-zoom{transform:scale(.94)}
.js .rv.visto{opacity:1;transform:none}
.d1{--d:.08s}.d2{--d:.16s}.d3{--d:.24s}.d4{--d:.32s}.d5{--d:.4s}.d6{--d:.48s}

/* ---------- Entrada do topo ----------
   O que já está na tela ao abrir a página entra com animação própria
   (o revelar ao rolar não dispara para o que já está visível). */
.js .entra{animation:entra .95s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes entra{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes entraSuave{from{opacity:0}to{opacity:1}}

/* Risco laranja que se desenha embaixo de uma palavra do título */
.risco{position:relative;white-space:nowrap}
.risco::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:.12em;border-radius:.1em;
  background:linear-gradient(90deg,#F6871F,#FFB067);transform-origin:0 50%;
  animation:risca 1s cubic-bezier(.2,.7,.2,1) .9s both;
}
@keyframes risca{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Cabeçalho ---------- */
header{transition:background-color .35s,box-shadow .35s,border-color .35s}
header.rolou{
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 10px 30px rgba(10,18,48,.08);border-bottom-color:transparent;
}
section[id],div[id]{scroll-margin-top:96px}

/* Barra de progresso de leitura (o efeitos.js cria o elemento) */
.progresso{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:90;pointer-events:none;
  background:linear-gradient(90deg,#F6871F,#FFB067);
  transform-origin:0 50%;transform:scaleX(var(--p,0));
}

/* ---------- Contadores ---------- */
.contador{font-variant-numeric:tabular-nums}

/* ---------- Faixa de logos que rola ----------
   O trilho tem os logos duas vezes; anda metade do comprimento e recomeça
   sem emenda. Para quando o mouse passa por cima ou quando algo dentro dela
   recebe foco. Vale também no modo reduzido: a faixa é conteúdo, e quem
   quiser parar passa o mouse ou usa o Tab. */
.faixa{
  overflow:hidden;padding:.6rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.faixa-trilho{
  display:flex;gap:1rem;width:max-content;list-style:none;margin:0;padding:0;
  animation:faixaRola var(--dur,48s) linear infinite;
}
.faixa.inversa .faixa-trilho{animation-direction:reverse}
.faixa:hover .faixa-trilho,.faixa:focus-within .faixa-trilho{animation-play-state:paused}
@keyframes faixaRola{to{transform:translateX(-50%)}}

/* ---------- Luz que segue o mouse ---------- */
.luz{position:relative;isolation:isolate}
.luz::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 45%);
  opacity:0;transition:opacity .35s;
}
.luz:hover::before{opacity:1}
/* o conteúdo fica acima da luz; filho posicionado precisa de seletor com
   duas classes (ex.: .tile .ir) para manter o próprio position */
.luz > *{position:relative;z-index:2}

/* ---------- Brilho que atravessa o botão laranja ---------- */
.btn-orange{position:relative;overflow:hidden;isolation:isolate}
.btn-orange::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.btn-orange:hover::after{transform:translateX(130%)}

/* ---------- Vídeo do topo ---------- */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  opacity:0;transition:opacity 1.2s;
}
.hero-video.rodando{opacity:1}
.video-pausa{
  position:absolute;z-index:3;right:1.4rem;top:calc(82px + 1.2rem);
  display:none;align-items:center;gap:.5rem;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:.82rem;line-height:1;color:#fff;
  background:rgba(10,18,48,.55);border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:.55rem .95rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.video-pausa.ativo{display:inline-flex}
.video-pausa:hover{background:rgba(10,18,48,.75)}
.video-pausa:focus-visible{outline:3px solid #F6871F;outline-offset:2px}
.video-pausa svg{width:14px;height:14px;fill:currentColor}

/* ---------- Animação desligada no sistema ---------- */
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv.rv-esq,.js .rv.rv-dir,.js .rv.rv-zoom{transform:none}
  .js .entra{animation-name:entraSuave}
  .risco::after{animation:none}
  .btn-orange::after{display:none}
}