/* Raios de fundo da premiação — camada COMPARTILHADA.
 *
 * As formas mais novas (plinko, caixa, gashapon, cadeado, par, gráfico, contas)
 * têm painel de revelação próprio e desenham os raios lá dentro. As mais
 * antigas — raspinha, raspão, roleta e chute a gol — não têm painel: elas
 * revelam o resultado direto no bloco #info1. Em vez de construir quatro
 * painéis novos em formas já aprovadas e em produção, os raios entram ATRÁS
 * desse bloco.
 *
 * Só aparecem quando há prêmio: quem liga a classe sc--premiado é o JS, no
 * mesmo ponto em que já sabia que ganhou (campanha.js e chutegol.js).
 *
 * O elemento é um ::before do próprio bloco, então nenhuma marcação nova
 * precisou ser criada nas views — e nada disso existe no DOM antes da vitória.
 */

.sc__infos { position: relative; }

.sc__infos.sc--premiado::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    /* REPEATING: conic-gradient comum não repete — sem isso vira UM raio só,
       que parado na tela parece um risco solto. */
    background: repeating-conic-gradient(from 7deg,
        rgba(212, 175, 55, .30) 0deg 3deg, rgba(212, 175, 55, 0) 3deg 15deg);
    border-radius: 50%;
    /* Sem o esmaecimento nas pontas os raios têm borda dura e viram varetas. */
    -webkit-mask-image: radial-gradient(circle, #000 10%, rgba(0, 0, 0, .55) 42%, transparent 72%);
            mask-image: radial-gradient(circle, #000 10%, rgba(0, 0, 0, .55) 42%, transparent 72%);
    /* Atrás do conteúdo do bloco e sem capturar clique. */
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    animation: sc_raios_gira 9s linear infinite, sc_raios_entra .6s ease-out forwards;
}

/* O conteúdo sobe para a frente dos raios. */
.sc__infos.sc--premiado > * { position: relative; z-index: 1; }

@keyframes sc_raios_gira  { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes sc_raios_entra { to { opacity: 1; } }

/* A camada estoura o bloco de propósito (150% de largura). Sem recorte no pai,
   a PÁGINA ganha rolagem lateral — foi defeito real medido no mostruário. */
.sc__infos { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .sc__infos.sc--premiado::before {
        animation: sc_raios_entra .6s ease-out forwards;
    }
}