/* Acabamento dos trilhos e cards (usado com assets/brava/rails.js). */

/* trilho: esmaecido suave nas bordas quando há mais conteúdo para os lados */
.rl-scroll { --rl-fade: 34px; }
.rl-scroll:not(.rl-ini):not(.rl-fim) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--rl-fade), #000 calc(100% - var(--rl-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--rl-fade), #000 calc(100% - var(--rl-fade)), transparent 100%);
}
.rl-scroll.rl-ini:not(.rl-fim) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--rl-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - var(--rl-fade)), transparent 100%);
}
.rl-scroll.rl-fim:not(.rl-ini) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--rl-fade));
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--rl-fade));
}
.game-scroll.dragging a, .ranking-collection.dragging a { pointer-events: none; }

/* entrada dos cards quando o trilho aparece na tela */
.rv { opacity: 0; transform: translate3d(0, 16px, 0) scale(.97); }
.rv-on .rv {
  opacity: 1; transform: none;
  transition: opacity .5s ease var(--rv-d, 0ms), transform .65s cubic-bezier(.2, .75, .2, 1) var(--rv-d, 0ms);
}

/* card de jogo: sobe, brilha na cor da casa e uma luz passa na capa */
.game-card-wrapper > a {
  transition: transform .35s cubic-bezier(.2, .75, .2, 1), box-shadow .35s ease;
  will-change: transform;
}
.game-card-wrapper > a::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .22) 48%, transparent 66%);
  transform: translateX(-120%); opacity: 0;
}
.game-image[data-v-144a840e] { transition: transform .35s cubic-bezier(.2, .75, .2, 1), box-shadow .35s ease, border-color .35s ease; }
.game-image[data-v-144a840e]::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .22) 48%, transparent 66%);
  transform: translateX(-120%); opacity: 0;
}
.game-img[data-v-625a2d10], .game-image[data-v-144a840e] img, .game-image[data-v-144a840e] video {
  transition: transform .6s cubic-bezier(.2, .75, .2, 1), filter .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .game-card-wrapper > a:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px -14px rgb(0 0 0 / .85), 0 0 0 1.5px rgb(var(--primary-color) / .7), 0 10px 28px -10px rgb(var(--primary-color) / .55);
  }
  .group:hover .game-img[data-v-625a2d10] { transform: scale(1.07); filter: brightness(.55) saturate(1.1); }
  .game-card-wrapper > a:hover::after, .game-card[data-v-144a840e]:hover .game-image[data-v-144a840e]::after {
    opacity: 1; transform: translateX(120%); transition: transform .8s ease, opacity .2s ease;
  }
  .game-card[data-v-144a840e]:hover .game-image[data-v-144a840e] {
    transform: translateY(-4px);
    border-color: rgb(var(--primary-color) / .7);
    box-shadow: 0 16px 30px -14px rgb(0 0 0 / .85), 0 10px 28px -10px rgb(var(--primary-color) / .5);
  }
  .game-card[data-v-144a840e]:hover .game-image[data-v-144a840e] img,
  .game-card[data-v-144a840e]:hover .game-image[data-v-144a840e] video { transform: scale(1.07); }
  .play-btn[data-v-625a2d10] { transform: translateY(8px) scale(.92); transition: opacity .25s ease, transform .35s cubic-bezier(.2, .75, .2, 1); }
  .group:hover .play-btn[data-v-625a2d10] { transform: none; }

  /* número do ranking acompanha o card */
  .rank-tile .rank-digits { display: inline-block; transition: transform .35s cubic-bezier(.2, .75, .2, 1), text-shadow .35s ease; }
  .rank-tile:hover .rank-digits { transform: translateY(-4px) scale(1.06); text-shadow: 0 6px 22px rgb(var(--primary-color) / .55); }
}

/* toque: leve afundada ao tocar, sem efeitos de hover */
@media (hover: none) {
  .game-card-wrapper > a:active, .game-card[data-v-144a840e]:active .game-image[data-v-144a840e] { transform: scale(.97); transition-duration: .12s; }
}

/* setas dos títulos: transição ao habilitar/desabilitar */
.nav-arrow { transition: color .2s ease, background-color .2s ease, opacity .2s ease, transform .2s ease; }
.nav-arrow-active:active { transform: scale(.88); }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; }
  .game-card-wrapper > a, .game-img[data-v-625a2d10], .game-image[data-v-144a840e], .game-image[data-v-144a840e] img { transition: none !important; }
  .game-card-wrapper > a::after, .game-image[data-v-144a840e]::after { display: none; }
}

/* folga em cima/embaixo dentro dos trilhos para o card subir e brilhar sem ser cortado */
.game-scroll[data-v-53b71cb1], .ranking-collection:not(.is-grid) {
  padding-top: 12px; padding-bottom: 16px; margin-top: -12px; margin-bottom: -16px;
}

/* ===== banners do topo (hero do celular .embla-wrap e "duo" do computador .hc-carousel) ===== */

/* entrada ao abrir a página */
@keyframes bnEntra { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); } to { opacity: 1; transform: none; } }
.hero-banner, .hc-carousel { animation: bnEntra .7s cubic-bezier(.2, .75, .2, 1) both; }

/* zoom lento (Ken Burns) no banner atual; os outros voltam rápido */
.embla__img[data-v-f200d80d], .hc-media[data-v-523ba844] img {
  transform: scale(1); transform-origin: 50% 45%;
  transition: transform .9s cubic-bezier(.2, .75, .2, 1), filter .45s ease;
}
.bn-anim .bn-cur .embla__img[data-v-f200d80d] { transform: scale(1.04); transition: transform 6s linear, filter .45s ease; }

/* celular: o banner do lado (o "peek") fica mais apagado e um pouco menor, destacando o atual */
.embla-wrap.bn-anim .embla__slide[data-v-f200d80d] { transition: opacity .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }
.embla-wrap.has-peek.bn-anim .embla__slide:not(.bn-cur)[data-v-f200d80d] { opacity: .55; transform: scale(.94); }

/* luz passando no banner (uma vez, ao virar o atual; no computador também ao passar o mouse) */
.embla__link[data-v-f200d80d], .hc-media[data-v-523ba844] { position: relative; }
.embla__link[data-v-f200d80d]::after, .hc-media[data-v-523ba844]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(110deg, transparent 32%, rgb(255 255 255 / .2) 47%, rgb(255 255 255 / .05) 53%, transparent 66%);
  transform: translateX(-130%);
}
@keyframes bnLuz { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.bn-anim .bn-cur .embla__link[data-v-f200d80d]::after { animation: bnLuz 1.1s .35s ease-out both; }

/* barra de progresso do autoplay dentro do pontinho ativo (5s, igual ao tempo de troca) */
@keyframes bnProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bn-anim .dot[data-v-f200d80d], .bn-anim .hc-dots span[data-v-523ba844] { position: relative; overflow: hidden; }
.bn-anim .dot.active[data-v-f200d80d], .bn-anim .hc-dots .is-active span[data-v-523ba844] { background: rgb(255 255 255 / .28); }
.bn-anim .dot.active[data-v-f200d80d]::after, .bn-anim .hc-dots .is-active span[data-v-523ba844]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: left center;
  background: var(--c-dots, rgb(var(--primary-color)));
  transform: scaleX(0);
}
.bn-anim .dot.bn-run[data-v-f200d80d]::after, .bn-anim .hc-dots .bn-run span[data-v-523ba844]::after { animation: bnProg 5s linear forwards; }
.bn-anim.bn-parado .dot.active[data-v-f200d80d]::after, .bn-anim.bn-parado .hc-dots .is-active span[data-v-523ba844]::after { animation-play-state: paused; }

/* computador: passar o mouse num banner do "duo" levanta, brilha e dá zoom */
@media (hover: hover) and (pointer: fine) {
  .hc-media[data-v-523ba844] { transition: transform .4s cubic-bezier(.2, .75, .2, 1), box-shadow .4s ease; }
  .hc-slide:hover .hc-media[data-v-523ba844] {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -16px rgb(0 0 0 / .85), 0 0 0 1.5px rgb(var(--primary-color) / .6), 0 12px 30px -12px rgb(var(--primary-color) / .45);
  }
  .hc-slide:hover .hc-media[data-v-523ba844] img { transform: scale(1.04); }
  .hc-slide:hover .hc-media[data-v-523ba844]::after { animation: bnLuz 1s ease-out both; }
  .embla-wrap .nav-btn, .hc-arrow { transition: opacity .25s ease, transform .25s ease; }
  .embla-wrap .nav-btn:hover, .hc-arrow:hover { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner, .hc-carousel { animation: none; }
  .bn-anim .bn-cur .embla__img[data-v-f200d80d], .hc-slide:hover .hc-media[data-v-523ba844] img { transform: none; }
  .embla__link[data-v-f200d80d]::after, .hc-media[data-v-523ba844]::after { display: none; }
  .bn-anim .dot.bn-run[data-v-f200d80d]::after, .bn-anim .hc-dots .bn-run span[data-v-523ba844]::after { animation: none; transform: scaleX(1); }
}

/* ===== tudo o mais (13/10) ===== */

/* seções abaixo da dobra sobem ao aparecer (rails.js põe .sv / .sv-on) */
.sv { opacity: 0; transform: translate3d(0, 26px, 0); }
.sv.sv-on { opacity: 1; transform: none; transition: opacity .6s ease, transform .75s cubic-bezier(.2, .75, .2, 1); }

/* Torneios Populares: card sobe, brilha, a bandeira dá um giro leve e a luz passa */
.tp-card[data-v-b48e1ba3] { transition: transform .4s cubic-bezier(.2, .75, .2, 1), box-shadow .4s ease, filter .3s ease; will-change: transform; }
.tp-card[data-v-b48e1ba3]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 2;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .2) 48%, transparent 66%);
  transform: translateX(-120%);
}
.tp-flag[data-v-b48e1ba3] { transition: transform .45s cubic-bezier(.2, .75, .2, 1); }
.tp-arr.rl-off { opacity: .3; pointer-events: none; }
.tp-arr[data-v-b48e1ba3] { transition: color .2s ease, background-color .2s ease, opacity .2s ease, transform .2s ease; }
.tp-arr[data-v-b48e1ba3]:active { transform: scale(.88); }

/* Jogos recomendados: linhas entram em sequência (também ao trocar de aba) e as odds respondem ao toque */
@keyframes linhaEntra { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.linha[data-v-7487b8fa] { animation: linhaEntra .45s cubic-bezier(.2, .75, .2, 1) backwards; transition: background .2s ease, box-shadow .3s ease, transform .3s ease; }
.linha[data-v-7487b8fa]:nth-child(2) { animation-delay: .05s; } .linha[data-v-7487b8fa]:nth-child(3) { animation-delay: .1s; }
.linha[data-v-7487b8fa]:nth-child(4) { animation-delay: .15s; } .linha[data-v-7487b8fa]:nth-child(5) { animation-delay: .2s; }
.linha[data-v-7487b8fa]:nth-child(n+6) { animation-delay: .25s; }
.odd[data-v-7487b8fa], .odd[data-v-f216093a] { transition: background .2s ease, transform .18s ease, box-shadow .25s ease; }
.odd[data-v-7487b8fa]:active, .odd[data-v-f216093a]:active { transform: scale(.94); }
.aba[data-v-7487b8fa] { transition: background .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease; }
.aba[data-v-7487b8fa]:active { transform: scale(.95); }

/* página de categoria: cards entram em cascata (e os do "Carregar mais" também) */
@keyframes cardEntra { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); } to { opacity: 1; transform: none; } }
.game-card-wrap[data-v-144a840e] { animation: cardEntra .5s cubic-bezier(.2, .75, .2, 1) backwards; }
.game-card-wrap[data-v-144a840e]:nth-child(2) { animation-delay: .03s; } .game-card-wrap[data-v-144a840e]:nth-child(3) { animation-delay: .06s; }
.game-card-wrap[data-v-144a840e]:nth-child(4) { animation-delay: .09s; } .game-card-wrap[data-v-144a840e]:nth-child(5) { animation-delay: .12s; }
.game-card-wrap[data-v-144a840e]:nth-child(6) { animation-delay: .15s; } .game-card-wrap[data-v-144a840e]:nth-child(7) { animation-delay: .18s; }
.game-card-wrap[data-v-144a840e]:nth-child(8) { animation-delay: .21s; } .game-card-wrap[data-v-144a840e]:nth-child(9) { animation-delay: .24s; }
.game-card-wrap[data-v-144a840e]:nth-child(n+10):nth-child(-n+18) { animation-delay: .27s; }

/* menu lateral: ícones 3D flutuam de leve (em tempos diferentes) */
/* o ícone já é posicionado com translate(-50%,-50%): a flutuação mantém esse deslocamento (só nos layouts em grade) */
@keyframes flutua { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 4px)); } }
:is(.promo-grid--grid_2, .promo-grid--grid_3, .promo-grid--grid_4) .promo-icon-wrap[data-v-f7f489b6] { animation: flutua 3.4s ease-in-out infinite; }
.promo-card:nth-child(2) .promo-icon-wrap[data-v-f7f489b6] { animation-delay: -.6s; }
.promo-card:nth-child(3) .promo-icon-wrap[data-v-f7f489b6] { animation-delay: -1.2s; }
.promo-card:nth-child(4) .promo-icon-wrap[data-v-f7f489b6] { animation-delay: -1.8s; }
.promo-card:nth-child(5) .promo-icon-wrap[data-v-f7f489b6] { animation-delay: -2.4s; }
.promo-card:nth-child(6) .promo-icon-wrap[data-v-f7f489b6] { animation-delay: -3s; }
.promo-card[data-v-f7f489b6] { transition: transform .3s cubic-bezier(.2, .75, .2, 1), box-shadow .3s ease; }
.vera-link-text[data-v-f7f489b6] { display: inline-block; transition: transform .25s cubic-bezier(.2, .75, .2, 1); }

/* botões principais: brilho pulsando que segue o formato inclinado (sem mexer no ::before deles) */
@keyframes ctaPulso {
  0%, 70%, 100% { filter: drop-shadow(0 0 0 rgb(var(--primary-color) / 0)); }
  80% { filter: drop-shadow(0 0 10px rgb(var(--primary-color) / .75)); }
}
.vera-cta-primary, .account-deposit[data-v-e182f4df] { animation: ctaPulso 3.6s ease-in-out infinite; }
.vera-cta-btn[data-v-bf393b4d], .account-deposit[data-v-e182f4df] { transition: transform .2s ease, filter .2s ease; }
.ver-todos-classic { transition: transform .2s ease, filter .2s ease, box-shadow .25s ease; }

/* favorito: coração pula ao marcar */
@keyframes coracao { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
.fav-btn[aria-pressed="true"] .fav-icon { animation: coracao .45s ease; }

@media (hover: hover) and (pointer: fine) {
  .tp-card[data-v-b48e1ba3]:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: inset 0 1px #ffffff29, 0 18px 30px -14px rgb(0 0 0 / .85), 0 0 0 1.5px rgb(var(--primary-color) / .55), 0 10px 26px -10px rgb(var(--primary-color) / .5);
  }
  .tp-card[data-v-b48e1ba3]:hover::after { transform: translateX(120%); transition: transform .8s ease; }
  .tp-card[data-v-b48e1ba3]:hover .tp-flag[data-v-b48e1ba3] { transform: rotate(-8deg) scale(1.12); }
  .linha[data-v-7487b8fa]:hover { box-shadow: inset 0 0 0 1px rgb(var(--primary-color) / .35), 0 10px 24px -16px rgb(0 0 0 / .8); transform: translateY(-2px); }
  .odd[data-v-7487b8fa]:hover, .odd[data-v-f216093a]:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgb(var(--primary-color) / .6); }
  .promo-card[data-v-f7f489b6]:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 24px -14px rgb(var(--primary-color) / .6); }
  .vera-link:hover .vera-link-text[data-v-f7f489b6] { transform: translateX(4px); }
  .vera-cta-btn[data-v-bf393b4d]:hover, .account-deposit[data-v-e182f4df]:hover { transform: translateY(-2px); }
  .ver-todos-classic:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 8px 18px -8px rgb(var(--primary-color) / .7); }
}

@media (prefers-reduced-motion: reduce) {
  .sv { opacity: 1 !important; transform: none !important; }
  .linha[data-v-7487b8fa], .game-card-wrap[data-v-144a840e], .promo-icon-wrap[data-v-f7f489b6],
  .vera-cta-primary, .account-deposit[data-v-e182f4df], .fav-btn .fav-icon { animation: none !important; }
  .tp-card[data-v-b48e1ba3]::after { display: none; }
}
.tp-strip[data-v-b48e1ba3] { padding-top: 10px; padding-bottom: 14px; margin-top: -10px; margin-bottom: -14px; }

/* ===== esportes (sb.js; tudo é redesenhado só por ação do usuário, então a entrada não pisca) ===== */
@keyframes sbEntra { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }

/* partidas: cascata a cada filtro/aba/liga; mercados da página do jogo e "minhas apostas" idem */
.card[data-v-f216093a], .dt-grp[data-v-f216093a], .mbc[data-v-f216093a] { animation: sbEntra .45s cubic-bezier(.2, .75, .2, 1) backwards; }
:is(.card, .dt-grp, .mbc)[data-v-f216093a]:nth-child(2) { animation-delay: .04s; }
:is(.card, .dt-grp, .mbc)[data-v-f216093a]:nth-child(3) { animation-delay: .08s; }
:is(.card, .dt-grp, .mbc)[data-v-f216093a]:nth-child(4) { animation-delay: .12s; }
:is(.card, .dt-grp, .mbc)[data-v-f216093a]:nth-child(5) { animation-delay: .16s; }
:is(.card, .dt-grp, .mbc)[data-v-f216093a]:nth-child(6) { animation-delay: .2s; }
:is(.card, .dt-grp, .mbc)[data-v-f216093a]:nth-child(7) { animation-delay: .24s; }
:is(.card, .dt-grp, .mbc)[data-v-f216093a]:nth-child(n+8):nth-child(-n+14) { animation-delay: .28s; }
.card[data-v-f216093a] { transition: transform .3s cubic-bezier(.2, .75, .2, 1), box-shadow .3s ease, border-color .3s ease, background .2s ease; }

/* odd escolhida dá um pulo (também ao entrar no cupom pela página do jogo) */
@keyframes oddPulo { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.odd.sel[data-v-f216093a] { animation: oddPulo .35s cubic-bezier(.2, .75, .2, 1); box-shadow: 0 6px 16px -8px var(--acc, rgb(var(--primary-color))); }
.dodd.sel[data-v-f216093a] { animation: oddPulo .35s cubic-bezier(.2, .75, .2, 1); }
.dodd[data-v-f216093a]:not(.sel):active { transform: scale(.95); }

/* contador do cupom pula a cada seleção (o cupom é redesenhado a cada mudança) */
@keyframes cntPulo { 0% { transform: scale(.4); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
.cf-cnt[data-v-f216093a] { display: inline-block; animation: cntPulo .45s cubic-bezier(.2, .75, .2, 1); }

/* AO VIVO: o sinal pulsa */
@keyframes aoVivo { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.85); } }
.c-livebadge .lv-sig[data-v-f216093a] { animation: aoVivo 1.4s ease-in-out infinite; }

/* banner do esportes: ícone grande flutua; abas de esporte e ligas respondem ao toque */
@keyframes carFlutua { 0%, 100% { transform: translateY(-50%) rotate(0deg); } 50% { transform: translateY(calc(-50% - 8px)) rotate(-3deg); } }
.car-art[data-v-f216093a] { animation: carFlutua 4.5s ease-in-out infinite; }
.spt[data-v-f216093a], .lgchip[data-v-f216093a], .tb-sp[data-v-f216093a] { transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .25s ease; }
.spt[data-v-f216093a]:active, .lgchip[data-v-f216093a]:active, .tb-sp[data-v-f216093a]:active { transform: scale(.94); }

@media (hover: hover) and (pointer: fine) {
  .card[data-v-f216093a]:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--acc, rgb(var(--primary-color))) 55%, transparent);
    box-shadow: 0 14px 28px -16px rgb(0 0 0 / .85), 0 8px 24px -14px var(--acc, rgb(var(--primary-color)));
  }
  .dodd[data-v-f216093a]:not(.sel):hover { transform: translateY(-2px); box-shadow: 0 6px 14px -8px var(--acc, rgb(var(--primary-color))); }
  .lgchip[data-v-f216093a]:hover, .spt[data-v-f216093a]:hover { transform: translateY(-2px); }
  .tb-sp[data-v-f216093a]:hover svg { animation: oddPulo .4s ease; }
  .mbc[data-v-f216093a] { transition: transform .3s ease, box-shadow .3s ease; }
  .mbc[data-v-f216093a]:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgb(0 0 0 / .9); }
}

@media (prefers-reduced-motion: reduce) {
  .card[data-v-f216093a], .dt-grp[data-v-f216093a], .mbc[data-v-f216093a], .odd.sel[data-v-f216093a], .dodd.sel[data-v-f216093a],
  .cf-cnt[data-v-f216093a], .c-livebadge .lv-sig[data-v-f216093a], .car-art[data-v-f216093a] { animation: none !important; }
}