/*
    text-destaque - destaque animado de texto.

    Regra de conteúdo (aplicada via public/js/components/destacar.js): dentro
    de qualquer elemento com a classe .text-destaque, todo <strong>/<b>
    encontrado vira o INÍCIO de um destaque que se estende até o próximo <br>
    ou o fim do parágrafo (</p>) - o JS quem envolve esse trecho num
    <span class="text-destaque-highlight">; aqui só existe a aparência.

    Fundo = cor base do site (var(--thm-base), já definida por tema em cada
    site - mesma variável usada em itens_fluid/itens_lazer/autocompletebusca),
    com fallback pro dourado padrão do painel caso o tema não declare a
    variável. Texto vira branco pra manter contraste em cima do fundo.

    box-decoration-break: clone garante que o fundo "abraça" cada linha
    separadamente quando o destaque quebra em mais de uma linha (efeito de
    marca-texto), em vez de formar um único retângulo que vaza nas bordas.
*/

.text-destaque-highlight {
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0.05em 0.3em;
    border-radius: 0.25em;
    background-image: linear-gradient(var(--thm-base, #c39d19), var(--thm-base, #c39d19));
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 0% 100%;
    color: inherit;
    transition: background-size 0.7s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s ease 0.15s;
}

.text-destaque-highlight.is-inview {
    background-size: 100% 100%;
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .text-destaque-highlight {
        transition: none;
    }
}