/* ═══════════════════════════════════════════════════════════════════════
   TOP MÚSICAS — MARQUEE DE TÍTULO E ARTISTA
   -----------------------------------------------------------------------
   Quando o título ou o artista não cabe na coluna de texto do card, ele
   deixa de terminar em "..." e passa a deslizar horizontalmente até revelar
   o conteúdo inteiro (ver assets/js/chart-marquee.js).

   Arquivo COMPARTILHADO de propósito: o markup do módulo é idêntico nos
   quatro temas (só muda o prefixo da classe), então o comportamento vive
   fora de themes/ e nenhum arquivo de tema precisa ser tocado.

   Sem cor alguma aqui — o marquee é só movimento. Tipografia, cor e fundo
   continuam vindo do CSS de cada tema.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Estado de repouso: ZERO efeito colateral ───────────────────────────
   O <span> injetado pelo JS é `inline` e não declara mais nada — herda
   white-space, fonte e cor do elemento do tema. Assim, texto que cabe na
   coluna fica exatamente como o tema o deixou, incluindo o
   `text-overflow: ellipsis` (um filho inline-block seria cortado a seco,
   sem reticências — mesma lição do marquee do mini player em
   includes/mobile_nav.php). */
.ag-cmq__i {
    display: inline;
}

/* ── Estado rolando ─────────────────────────────────────────────────────
   Só aqui o layout do elemento é tocado, e só em quem realmente estoura.

   `inline-block` + `nowrap` para o span poder ficar mais largo que a coluna
   e ser transladado. `overflow: hidden` garante o que foi pedido: o texto em
   movimento é clipado na própria coluna e nunca chega à capa, à posição do
   ranking ou aos botões de voto. As reticências saem de cena — um "..."
   fixo na borda atrapalharia a leitura do texto que está deslizando.

   O seletor de atributo casa com os quatro temas (pulse-/wave-/neon-/glow-
   chart-track__title|artist) e com a página de paradas (.chart-track-title).
   Especificidade (0,2,0) + carregado depois do CSS de tema = vence os
   `!important` de mesma especificidade que os temas usam nesses elementos.

   A animação em si é criada pelo JS (Web Animations API): as pausas de
   início e fim são em segundos fixos e porcentagem de @keyframes não aceita
   variável. */
[class*="chart-track"].ag-cmq--on {
    overflow: hidden !important;
    text-overflow: clip !important;
}
.ag-cmq--on .ag-cmq__i {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
}

/* ── Acessibilidade ─────────────────────────────────────────────────────
   Quem pediu menos animação no sistema volta ao texto estático com
   reticências. O JS também checa isso e nem cria a animação; a regra aqui
   cobre o caso de a preferência mudar com a página já aberta. */
@media (prefers-reduced-motion: reduce) {
    [class*="chart-track"].ag-cmq--on {
        text-overflow: ellipsis !important;
    }
    .ag-cmq--on .ag-cmq__i {
        display: inline;
        white-space: inherit;
        will-change: auto;
        transform: none !important;
    }
}