/* ═══════════════════════════════════════════════════════════════════════════
   Logo Velaplast — reflexo ao passar o mouse

   Uma faixa de luz atravessa a logo na diagonal, como reflexo correndo sobre
   superfície polida. O que faz parecer reflexo, e não um retângulo brilhando:
   a camada de luz é RECORTADA pela própria imagem da logo (mask), então só
   aparece sobre os pixels do desenho — nunca no espaço vazio em volta.
   O PNG tem transparência de verdade (7.341 de 11.070 pixels), que é o que
   permite esse recorte.

   ⚠️ A máscara PRECISA ser escrita na forma abreviada. Na forma expandida
   (-webkit-mask-image + mask-repeat + mask-position + mask-size separados) as
   propriedades com e sem prefixo se atropelam e o resultado é a camada inteira
   ficar invisível — o efeito simplesmente não acontece, sem nenhum erro.

   Se a logo mudar de arquivo, atualizar as duas URLs abaixo.
   Vale para o cabeçalho e o rodapé.
   ═══════════════════════════════════════════════════════════════════════════ */

.elementor-element-c7c9f4a a,
.elementor-element-610dd5d a {
    position: relative;
    display: inline-block;
}

.elementor-element-c7c9f4a a::after,
.elementor-element-610dd5d a::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    /* a faixa de luz: estreita, inclinada e bem transparente nas bordas */
    background-image: linear-gradient(115deg,
        rgba(255,255,255,0)   42%,
        rgba(255,255,255,.85) 50%,
        rgba(255,255,255,0)   58%);
    background-repeat: no-repeat;
    background-size: 250% 100%;
    background-position: 160% 0;      /* parada fora da logo, à direita */

    /* o recorte pela silhueta — é isto que vira "reflexo" */
    -webkit-mask: url("/assets/wp-content/uploads/2025/12/Logotipo.png") center / contain no-repeat;
            mask: url("/assets/wp-content/uploads/2025/12/Logotipo.png") center / contain no-repeat;

    /* devagar o suficiente para o olho acompanhar a luz atravessando */
    transition: background-position 1.1s cubic-bezier(.35,.15,.35,1);
}

/* a luz atravessa uma vez, da direita para a esquerda */
.elementor-element-c7c9f4a a:hover::after,
.elementor-element-610dd5d a:hover::after {
    background-position: -60% 0;
}

/* sem suporte a máscara o brilho viraria um retângulo sobre a logo — pior que
   não ter efeito. Onde não houver, o ::after nem aparece. */
@supports not ((-webkit-mask: url("#") center / contain no-repeat) or (mask: url("#") center / contain no-repeat)) {
    .elementor-element-c7c9f4a a::after,
    .elementor-element-610dd5d a::after { display: none; }
}

/* quem pediu menos animação no sistema operacional não recebe o brilho */
@media (prefers-reduced-motion: reduce) {
    .elementor-element-c7c9f4a a::after,
    .elementor-element-610dd5d a::after { display: none; }
}
