/* =========================================================================
   BRASÕES — faixa de órgãos públicos já atendidos

   Três trilhas em sentidos alternados, com laço infinito. O laço depende da
   fila DUPLICADA que `components/brasoes.js` clona: a animação vai de 0 a
   -50% da pista, e a metade que entra é a cópia da que sai. Enquanto o clone
   não existe (JavaScript desligado, ou falha do módulo), a classe
   `is-animada` não é aplicada e a trilha vira uma faixa de rolagem manual —
   os 103 brasões continuam todos lá.

   O respiro entre os cartões é `margin-inline-end` do item, e não `gap` da
   pista. Com `gap`, a distância entre as duas filas entraria na conta da
   largura e o `-50%` cairia meio espaço fora do lugar — o salto seria visível
   uma vez a cada volta.
   ====================================================================== */

.brasoes {
    --brasao-l: 116px;
    --brasao-a: 64px;
    --brasao-respiro: var(--space-3);

    /* Velocidade constante em qualquer trilha: a duração acompanha a
       quantidade de itens, e não o contrário. Sem isto, a trilha de 34
       brasões correria mais que a de 35. */
    --brasao-passo: 2.6s;
}

.brasoes__titulo {
    max-width: 46ch;
    margin-inline: auto;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    text-align: center;
    color: var(--ink-400);
}

.brasoes__resumo {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    text-align: center;
    color: var(--color-text-muted);
}

.brasoes__faixa {
    display: grid;
    gap: var(--brasao-respiro);
    margin-top: var(--space-6);

    /* As pontas dissolvem no fundo em vez de cortar o brasão ao meio: é o que
       faz a faixa parecer contínua para além da tela, e não uma caixa com
       conteúdo transbordando. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        #000 6%,
        #000 94%,
        transparent
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 6%,
        #000 94%,
        transparent
    );
}

.brasoes__trilha {
    overflow: hidden;
}

.brasoes__pista {
    display: flex;
    width: max-content;
}

/* O movimento só existe depois que o JavaScript duplica a fila. */
.brasoes__trilha.is-animada .brasoes__pista {
    animation: brasoes-desliza calc(var(--itens, 30) * var(--brasao-passo))
               linear infinite;
}

.brasoes__trilha[data-sentido="inverso"].is-animada .brasoes__pista {
    animation-direction: reverse;
}

/* Cada trilha começa de um ponto diferente do próprio ciclo. Sem esta
   defasagem as três largam alinhadas e o primeiro segundo da faixa é uma
   GRADE de três linhas por coluna — justamente o que a esteira existe para
   evitar. O atraso é negativo (a animação já entra em andamento) e proporcional
   à duração, para valer igual em trilha de 34 e de 35 brasões. */
.brasoes__trilha:nth-child(2).is-animada .brasoes__pista {
    animation-delay: calc(var(--itens, 30) * var(--brasao-passo) * -0.13);
}

.brasoes__trilha:nth-child(3).is-animada .brasoes__pista {
    animation-delay: calc(var(--itens, 30) * var(--brasao-passo) * -0.27);
}

/* Parar sob o cursor é o que torna a faixa consultável: sem isso, encontrar o
   brasão da própria prefeitura vira perseguição. `focus-within` faz o mesmo
   pelo teclado, já que os itens podem receber foco ao serem tabulados. */
.brasoes__trilha:hover .brasoes__pista,
.brasoes__trilha:focus-within .brasoes__pista {
    animation-play-state: paused;
}

.brasoes__fila {
    display: flex;
    flex: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.brasoes__item {
    flex: none;
    width: var(--brasao-l);
    height: var(--brasao-a);
    margin-inline-end: var(--brasao-respiro);
    padding: var(--space-1);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    /* Cinza e recuado no repouso, colorido ao toque do cursor: a faixa é pano
       de fundo do hero, não concorrente dele — os 103 brasões somados têm mais
       cor do que a página inteira.
       O contraste sobe junto com o cinza porque brasão é arte MIÚDA: sem essa
       correção, a coroa mural e os ramos viram uma mancha uniforme e o cartão
       deixa de parecer um brasão. */
    filter: grayscale(1) contrast(1.08);
    opacity: 0.78;
    transition:
        filter var(--dur-base) var(--ease-out),
        opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.brasoes__item:hover {
    filter: none;
    opacity: 1;
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.brasoes__item picture,
.brasoes__item img {
    display: block;
    width: 100%;
    height: 100%;
}

.brasoes__item img {
    object-fit: contain;
}

@keyframes brasoes-desliza {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* -------------------------------------------------------------------------
   Sem JavaScript: a faixa não anda, mas anda o dedo
   ---------------------------------------------------------------------- */
.brasoes__trilha:not(.is-animada) {
    overflow-x: auto;
    scrollbar-width: none;
}

.brasoes__trilha:not(.is-animada)::-webkit-scrollbar {
    display: none;
}

/* -------------------------------------------------------------------------
   Breakpoints
   ---------------------------------------------------------------------- */

/* Tablet — o cartão cresce junto com o espaço disponível. */
@media (min-width: 768px) {
    .brasoes {
        --brasao-l: 132px;
        --brasao-a: 72px;
    }

    .brasoes__faixa {
        gap: var(--space-4);
    }
}

@media (min-width: 1024px) {
    .brasoes {
        --brasao-respiro: var(--space-4);
    }
}

/* -------------------------------------------------------------------------
   Movimento reduzido — a faixa para de vez
   Quem pediu menos animação não quer três esteiras no primeiro rolar da
   página. A rolagem manual continua disponível, que é como a faixa se
   comporta sem JavaScript.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .brasoes__trilha.is-animada .brasoes__pista {
        animation: none;
    }

    .brasoes__trilha {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .brasoes__trilha::-webkit-scrollbar {
        display: none;
    }

    .brasoes__item {
        transition: none;
    }
}