/* ================================================================
   CLIENT NETWORK — Esquema de negocio: armadoras conectadas a DaeHan
   Reproduce la secuencia del video original: los logos entran uno a
   uno, las líneas se dibujan y al final aparece DaeHan. La secuencia
   arranca cuando .reveal recibe .is-visible (js/animations.js).
   ================================================================ */
.client-network__diagram {
    max-width: var(--container-lg);
    margin-inline: auto;
}

.client-network__clients {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-xl) var(--space-md);
}

/* Móvil: 3 + 2 centrados */
.client-network__client {
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
}

.client-network__client:nth-child(4) {
    grid-column: 2 / span 2;
}

@media (min-width: 768px) {
    .client-network__clients {
        grid-template-columns: repeat(5, 1fr);
    }

    .client-network__client,
    .client-network__client:nth-child(4) {
        grid-column: auto;
    }
}

.client-network__logo {
    width: auto;
    max-width: min(150px, 85%);
    height: auto;
    max-height: 40px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* KIA es un wordmark muy compacto y pesado: se reduce para igualar peso visual */
.client-network__logo--compact {
    max-height: 22px;
}

@media (min-width: 768px) {
    .client-network__logo--compact {
        max-height: 28px;
    }
}

/* Las líneas solo tienen sentido con los 5 logos en una fila */
.client-network__lines {
    display: none;
}

@media (min-width: 768px) {
    .client-network__lines {
        display: block;
        width: 100%;
        height: 120px;
        margin-block: var(--space-md);
        overflow: visible;
    }
}

.client-network__line {
    fill: none;
    stroke: var(--color-secondary);
    stroke-width: 1.5;
    stroke-opacity: 0.6;
    vector-effect: non-scaling-stroke;
}

.client-network__hub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
    .client-network__hub {
        margin-top: 0;
    }
}

.client-network__hub-logo {
    height: 64px;
    width: auto;
}

.client-network__hub-name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Secuencia de entrada ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .client-network__client {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        transition-delay: calc(var(--i) * 0.35s);
    }

    .client-network__lines {
        clip-path: inset(0 0 100% 0);
        transition: clip-path 0.8s ease;
        transition-delay: 1.9s;
    }

    .client-network__hub {
        opacity: 0;
        transform: scale(0.94);
        transition: opacity 0.6s ease, transform 0.6s ease;
        transition-delay: 2.6s;
    }

    .client-network__diagram.is-visible .client-network__client {
        opacity: 1;
        transform: none;
    }

    .client-network__diagram.is-visible .client-network__lines {
        clip-path: inset(0);
    }

    .client-network__diagram.is-visible .client-network__hub {
        opacity: 1;
        transform: none;
    }
}