/* ==========================================================================
   PROVEDORES DE JOGOS — capas em colunas (réplica da z-gaming)
   Sete colunas coladas, correndo em sentidos alternados. A do meio é maior
   e mais lenta: é o "destaque". As duas das pontas só aparecem em telas
   largas. Diferente da z-gaming, aqui as extremidades têm fade (máscara em
   degradê) em vez de corte reto — em cima, embaixo e nas laterais.
   As imagens são arquivos em assets/cards-provedores/, entram como <img>
   com lazy. Antes vinham embutidas em base64 e truncavam na transcrição —
   por isso apareciam cards vazios.
   ========================================================================== */

.provcap{
  padding:110px 0 120px;
  background:var(--black);
  overflow:hidden;
}

/* --- cabeçalho centralizado (exceção ao padrão do site, que é à esquerda) - */
.provcap-head{
  /* largo o bastante pra "Os melhores desenvolvedores de jogos de cassino."
     fechar em duas linhas, não três */
  max-width:940px;
  margin:0 auto 56px;
  padding:0 24px;
  text-align:center;
}
.provcap-head .eyebrow{display:flex;align-items:center;justify-content:center;}
/* mesmo corpo dos outros títulos de seção do site — a div também leva a
   classe .section-head, isto aqui é só a rede de segurança */
.provcap-head h2{
  margin:0 0 18px;
  font-size:clamp(30px,3.8vw,50px);
  line-height:1.08;
}
.provcap-head p{margin:0 auto;max-width:620px;color:var(--muted);}
.provcap-head .btn{margin-top:30px;}

/* --- área das colunas: ocupa a largura toda da tela ---------------------- */
.provcap-bleed{
  width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}

.provcap-janela{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:10px;
  height:520px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}

/* --- colunas ------------------------------------------------------------- */
.provcap-col{
  flex:0 0 auto;
  width:clamp(104px,9.4vw,152px);
  overflow:visible;
}
.provcap-col--grande{
  width:clamp(190px,17.2vw,278px);
}

/* as colunas deslocadas começam meio card acima: é o desencontro da z-gaming.
   O deslocamento vai na COLUNA, não na fita — a fita já tem o transform da
   animação, e um transform sobrescreveria o outro. */
.provcap-col--alto{transform:translate3d(0,-86px,0);}

.provcap-fita{
  display:flex;
  flex-direction:column;
  gap:10px;
  will-change:transform;
}

/* sobe */
.provcap-col--sobe .provcap-fita{animation:provcap-sobe 26s linear infinite;}
/* desce */
.provcap-col--desce .provcap-fita{animation:provcap-desce 26s linear infinite;}
/* a coluna de destaque anda mais devagar que as outras */
.provcap-col--grande .provcap-fita{animation:provcap-desce 64s linear infinite;}

/* A 3ª coluna tem 9 capas; as outras têm 7. Como a duração é fixa e o
   percurso é sempre -50% da fita, uma fita mais longa correria mais rápido.
   Alongo a duração na mesma proporção (26s × 9/7) pra velocidade bater. */
.provcap-col:nth-child(3) .provcap-fita{animation-duration:33s;}

@keyframes provcap-sobe{
  from{transform:translate3d(0,0,0);}
  to  {transform:translate3d(0,-50%,0);}
}
@keyframes provcap-desce{
  from{transform:translate3d(0,-50%,0);}
  to  {transform:translate3d(0,0,0);}
}

/* --- cards --------------------------------------------------------------- */
.provcap-card{
  position:relative;
  flex:0 0 auto;
  width:100%;
  aspect-ratio:1/1;
  border-radius:6px;
  overflow:hidden;
  background:#16161b;
}
/* as capas vêm de arquivo, em assets/cards-provedores/ — nada de base64 */
.provcap-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* --- responsivo ---------------------------------------------------------- */
@media (max-width:1024px){
  .provcap-janela{height:440px;gap:8px;}
  .provcap-col{width:clamp(96px,12vw,130px);}
  .provcap-col--grande{width:clamp(170px,21vw,238px);}
  .provcap-col--alto{transform:translate3d(0,-68px,0);}
}
@media (max-width:767px){
  .provcap{padding:80px 0 88px;}
  .provcap-head{margin-bottom:40px;}
  .provcap-janela{height:360px;}
  .provcap-col--ponta{display:none;}
  .provcap-col{width:clamp(92px,23vw,124px);}
  .provcap-col--grande{width:clamp(164px,40vw,224px);}
  .provcap-col--alto{transform:translate3d(0,-56px,0);}
}

/* quem pediu menos movimento no sistema não recebe movimento nenhum */
@media (prefers-reduced-motion:reduce){
  .provcap-fita{animation:none !important;transform:none !important;}
}