/* Efeitos da PAGINA INICIAL (chave `site.home_efeitos`, ou ?efeitos=1 para espiar). So carrega com a chave ligada.
   Mesmo ritmo da pagina "Vender para a loja": entrada em ~0,7 s com desaceleracao suave, escalonada; revelacao ao
   rolar; luz que segue o mouse; numeros que contam. So transform e opacity se movem. "Reduzir movimento" desliga
   tudo (fim do arquivo). Nada aqui muda texto, link ou formulario. */

.home-efeitos{--suave:cubic-bezier(.2,0,0,1)}

/* ------------------------------------------------------------------ entrada */
/* fundo da pagina: luzes e particulas desenhadas num canvas (criado pelo JavaScript). Fica atras de todo o conteudo e,
   nas secoes "Escolha o jogo" e "Mais procurados", ganha mais brilho e mais particulas. */
.he-fundo{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
/* o rotulo vira uma pilula com ponto que pulsa */
.home-efeitos .topo-texto .rotulo{display:inline-flex;align-items:center;gap:9px;padding:6px 15px 6px 12px;
  border-radius:99px;background:var(--ciano-fundo);border:1px solid rgba(56,214,224,.32);color:var(--ciano);
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.home-efeitos .topo-texto .rotulo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ciano);
  box-shadow:0 0 0 0 rgba(56,214,224,.6);animation:he-pulso 2.4s ease-out infinite}
@keyframes he-pulso{0%{box-shadow:0 0 0 0 rgba(56,214,224,.55)}100%{box-shadow:0 0 0 12px rgba(56,214,224,0)}}
/* titulo com degrade (a sombra mantem a leitura sobre a arte) */
.home-efeitos .topo-texto h1{background:linear-gradient(96deg,#fff 0%,#fff 30%,#d6e7ff 55%,var(--azul-claro) 80%,var(--ciano));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 26px rgba(0,0,0,.55));text-wrap:balance}
/* entrada escalonada de cima para baixo */
.home-efeitos .topo-texto>*{animation:he-entra .75s var(--suave) both}
.home-efeitos .topo-texto>:nth-child(1){animation-delay:.05s}
.home-efeitos .topo-texto>:nth-child(2){animation-delay:.14s}
.home-efeitos .topo-texto>:nth-child(3){animation-delay:.24s}
.home-efeitos .topo-texto>:nth-child(4){animation-delay:.34s}
.home-efeitos .topo-texto>:nth-child(5){animation-delay:.46s}
.home-efeitos .topo-acao{animation:he-entra .75s var(--suave) .5s both}
@keyframes he-entra{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
/* a busca acende quando recebe o foco */
.home-efeitos .busca-grande{transition:box-shadow .25s,transform .25s var(--suave)}
.home-efeitos .busca-grande:focus-within{box-shadow:0 0 0 3px var(--ciano-fundo),0 18px 40px -22px rgba(56,214,224,.7);
  transform:translateY(-1px)}
.home-efeitos .provas li{transition:transform .3s var(--suave)}
.home-efeitos .provas li:hover{transform:translateY(-3px)}

/* ------------------------------------------------------ revelacao ao rolar */
.home-efeitos.he-js .he-rv{opacity:0;transform:translate3d(0,30px,0);
  transition:opacity .75s var(--suave),transform .75s var(--suave);
  transition-delay:calc(var(--i,0) * 70ms)}
.home-efeitos.he-js .he-rv.visto{opacity:1;transform:none}
/* depois de aparecer, o cartao volta a responder rapido ao mouse */
.home-efeitos.he-js .he-rv.he-pronto{transition:transform .22s var(--suave),box-shadow .3s,border-color .3s,opacity .3s;
  transition-delay:0s}

/* titulos de secao: uma barrinha curta (56 px) se desenha sob o titulo. Onde o titulo e alinhado a esquerda, a barra
   fica a esquerda; no cabecalho centralizado das avaliacoes, fica no centro. */
.home-efeitos .cabeca-bloco h2{position:relative;display:inline-block;padding-bottom:12px}
.home-efeitos .cabeca-bloco h2::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:56px;
  border-radius:3px;background:linear-gradient(90deg,var(--azul),var(--ciano));
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--suave) .3s}
.home-efeitos .cabeca-bloco.visto h2::after,
.home-efeitos:not(.he-js) .cabeca-bloco h2::after{transform:scaleX(1)}
.home-efeitos .cabeca-aval h2{display:block;padding-bottom:0}
.home-efeitos .cabeca-aval h2::after{left:50%;bottom:-13px;margin-left:-28px;transform-origin:center}
.home-efeitos .cabeca-aval .sub-aval{margin-top:26px}
.home-efeitos .cabeca-aval{padding-bottom:8px}

/* ------------------------------------- cartoes dos jogos e das ofertas */
.home-efeitos .cartao-jogo,.home-efeitos .oferta-cartao{transform-style:preserve-3d}
.home-efeitos .cartao-jogo.he-pronto:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
  translateY(-5px);box-shadow:0 0 0 1px rgba(56,214,224,.32),0 24px 46px -20px rgba(30,123,255,.8)}
.home-efeitos .oferta-cartao.he-pronto:hover{transform:translateY(-5px);
  box-shadow:0 0 0 1px rgba(56,214,224,.28),0 24px 44px -22px rgba(30,123,255,.75)}
/* luz que acompanha o ponteiro (o elemento .he-luz e criado pelo JavaScript) */
.he-luz{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(120,200,255,.2),transparent 70%);
  transition:opacity .3s}
.cartao-jogo:hover>.he-luz,.oferta-cartao:hover>.he-luz{opacity:1}
/* a arte do jogo se aproxima um pouco */
.home-efeitos .cartao-jogo img{transition:transform .9s var(--suave)}
.home-efeitos .cartao-jogo:hover img{transform:scale(1.06)}

/* ------------------------------------------------- como funciona e garantias */
.home-efeitos .passos-loja li{transition:transform .3s var(--suave),border-color .3s,box-shadow .3s}
.home-efeitos .passos-loja li:hover{transform:translateY(-4px);border-color:var(--borda-viva);
  box-shadow:0 20px 40px -26px rgba(30,123,255,.8)}
.home-efeitos .passos-loja .numero{transition:transform .5s var(--suave)}
.home-efeitos.he-js .passos-loja li.he-rv .numero{transform:scale(.6);opacity:0;
  transition:transform .6s var(--suave) .15s,opacity .6s var(--suave) .15s}
.home-efeitos.he-js .passos-loja li.visto .numero{transform:none;opacity:1}
.home-efeitos .passos-loja li:hover .numero{transform:scale(1.1) rotate(-4deg)}
.home-efeitos .garantias-grade article{position:relative;transition:transform .3s var(--suave),border-color .3s,box-shadow .3s}
.home-efeitos .garantias-grade article:hover{transform:translateY(-4px);border-color:var(--borda-viva);
  box-shadow:0 20px 40px -26px rgba(56,214,224,.55)}
.home-efeitos .garantias-grade article::before{content:"";position:absolute;top:-1px;left:16%;right:16%;height:2px;
  border-radius:2px;opacity:.5;background:linear-gradient(90deg,transparent,var(--ciano),transparent);
  transition:opacity .3s}
.home-efeitos .garantias-grade article:hover::before{opacity:1}

/* numeros da loja (clientes e visitantes): sempre o valor real, sem contagem animada */
.home-efeitos .numero-loja b{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------ reduzir movimento */
@media (prefers-reduced-motion:reduce){
  .he-fundo{display:none}
  .home-efeitos *,.home-efeitos *::before,.home-efeitos *::after{animation:none!important;transition:none!important}
  .home-efeitos.he-js .he-rv,.home-efeitos.he-js .passos-loja li.he-rv .numero{opacity:1!important;transform:none!important}
  .home-efeitos .cabeca-bloco h2::after{transform:scaleX(1)!important}
}
@media (hover:none){
  .home-efeitos .cartao-jogo.he-pronto:hover{transform:none}
}