/* ══════════════════════════════════════════════════════════════════════
   REVEAL ON SCROLL — utilitário GLOBAL, implementado no transitions.js com
   GSAP + ScrollTrigger (+ SplitText para texto). Uso por atributos:

     data-reveal="up|down|left|right|fade|scale"  → anima o bloco
     data-reveal="text"   → revela LINHA a linha (SplitText)
     data-reveal="words"  → revela PALAVRA a palavra (SplitText)
     data-reveal-delay="200"    → atraso em ms
     data-reveal-stagger="60"   → intervalo entre linhas/palavras em ms
     data-reveal-group="80"     → filhos diretos em cascata

   O GSAP define os estados inline; o CSS abaixo só dá suporte ao SplitText
   (as linhas partidas precisam de overflow:hidden para o slide-up limpo).
   Sem JS, nada fica preso invisível (o GSAP é que esconde/mostra).
   ────────────────────────────────────────────────────────────────────── */
.reveal-line {
    overflow: hidden;
    /* padding evita corte de descendentes (g, p, j) durante o slide */
    padding-bottom: 0.08em;
}

.clients-section {
    width: 100%;
    overflow: hidden;
    padding: 120px 0px 0;
    background: transparent;
}

.clients-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: transparent;
}

.clients-track {
    display: flex;
    align-items: center;
    gap: 80px;
    width: max-content;
    animation: scrollClients 40s linear infinite;
}

.clients-track img {
    height: 150px;
    width: auto;
    object-fit: contain;
}

@keyframes scrollClients {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .clients-track {
        gap: 40px;
        animation-duration: 25s;
    }

    .clients-track img {
        height: 55px;
    }
}