/* Brilho das logos do MU PK — a mesma luz do botão "Jogar agora" (faixa clara inclinada que entra por um lado, atravessa
   e sai pelo outro, pausa e repete), adaptada para logos: a faixa é recortada pelo formato da logo (máscara = a própria
   imagem, em --logo) e realça a cor de cada ponto em modo "color-dodge", como reflexo passando sobre metal: o laranja
   acende para dourado, a prata para branco e o escuro continua escuro (sem névoa cinza). Nada sai da logo.
   Uso: mupk_logo() em partials/mupk/funcoes.phtml (ou as classes + mupk_logo_var() num elemento que já envolve a logo
   centralizada). Tamanhos: --p (topo, gaveta, emblema), --m (rodapé, login) e --g (destaque); mudam ritmo, força e
   largura da faixa. O logo grande da home com as asas em WebGL desenha esta mesma faixa no shader (mupk.js lê ciclo,
   atraso, força e largura daqui) e ganha .mpk-brilho-gl, que desliga a versão CSS. Leve: um pseudo-elemento por logo. */
.mpk-brilho { position: relative; isolation: isolate; --brilho-ciclo: 6s; --brilho-atraso: 0s; --brilho-forca: .62; --brilho-largura: 5.6%; --brilho-z: 2; }
/* sem max-width em %: numa imagem dentro de flex isso zera a largura mínima e o topo apertado esmagaria a logo */
.mpk-brilho-caixa { display: inline-block; line-height: 0; }
.mpk-brilho-caixa > img { display: block; }
/* pequena: faixa proporcionalmente mais larga (senão some), mais contida e mais rápida; grande: faixa fina e elegante */
.mpk-brilho--p { --brilho-ciclo: 5s; --brilho-forca: .55; --brilho-largura: 7.1%; }
.mpk-brilho--m { --brilho-ciclo: 6s; --brilho-forca: .62; --brilho-largura: 5.6%; }
.mpk-brilho--g { --brilho-ciclo: 7s; --brilho-forca: .68; --brilho-largura: 4.6%; }

/* faixa a 110° num fundo de 280% da logo: background-position 100% = faixa antes da borda esquerda, 0% = depois da
   direita. Varre em 26% do ciclo (ease-in-out, como o botão) e fica o resto parada fora da logo. Perfil: núcleo
   claro (força total) e halo suave (72% → 30% → 0). Largura = meia faixa em % do fundo (7,1% ≈ 20% da logo). */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) and (mix-blend-mode: color-dodge) {
    .mpk-brilho::after {
        --b: var(--brilho-forca); --l: var(--brilho-largura);
        content: ""; position: absolute; inset: 0; z-index: var(--brilho-z); pointer-events: none;
        -webkit-mask: var(--logo, linear-gradient(transparent, transparent)) center / contain no-repeat;
        mask: var(--logo, linear-gradient(transparent, transparent)) center / contain no-repeat;
        background: linear-gradient(110deg, transparent calc(50% - var(--l)),
                rgb(calc(var(--b) * 77), calc(var(--b) * 73), calc(var(--b) * 64)) calc(50% - var(--l) * .65),
                rgb(calc(var(--b) * 184), calc(var(--b) * 174), calc(var(--b) * 154)) calc(50% - var(--l) * .3),
                rgb(calc(var(--b) * 255), calc(var(--b) * 242), calc(var(--b) * 214)) 50%,
                rgb(calc(var(--b) * 184), calc(var(--b) * 174), calc(var(--b) * 154)) calc(50% + var(--l) * .3),
                rgb(calc(var(--b) * 77), calc(var(--b) * 73), calc(var(--b) * 64)) calc(50% + var(--l) * .65),
                transparent calc(50% + var(--l))) 100% 0 / 280% 100% no-repeat;
        mix-blend-mode: color-dodge; opacity: .85; transition: opacity .35s ease;
        animation: mpk-brilho-logo var(--brilho-ciclo) ease-in-out var(--brilho-atraso) infinite backwards;
    }
    /* logo que é link: a luz fica um pouco mais viva no hover/foco, sem mexer no ritmo */
    a.mpk-brilho:hover::after, a.mpk-brilho:focus-visible::after, a:hover > .mpk-brilho::after, a:focus-visible > .mpk-brilho::after { opacity: 1; }
    .mpk-brilho.mpk-brilho-gl::after { content: none; }
}
@keyframes mpk-brilho-logo { 0% { background-position: 100% 0; } 26%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .mpk-brilho::after { content: none; } }