/* =========================================================================
   OTTOBIT — home, quarta sezione: "Selected clients"
   Fondo avorio (come le card col logo in Work), cornice nera di 1px che si
   disegna tutto intorno quando si arriva alla sezione, loghi che salgono
   uno dopo l'altro come le scritte delle altre sezioni.
   I loghi sono SVG monocromatici in assets/images/clients/, già proporzionati:
   --w e --h (nel markup) sono larghezza e altezza a parità di "peso" visivo.
   ========================================================================= */
.page-clients {
    --frame: clamp(14px, 2.4vw, 36px);             /* distanza della cornice dai bordi */
    --u: clamp(46px, 6vw, 92px);                   /* unità di misura dei loghi */
    background-color: var(--ivory, #f4f1ea) !important;
    color: var(--ink, #1a1a1a);
}

/* ---------- cornice di 1px che si disegna ----------------------------------- */
/* animazione specchiata: parte dal centro del lato in basso, corre verso i due
   angoli, sale lungo i lati e si chiude al centro del lato in alto.
   Parte quando la pagina ha finito di scorrere (--start). */
.clients-frame {
    position: absolute;
    inset: var(--frame);
    pointer-events: none;
    --start: 1s;          /* attesa: la pagina finisce di scorrere */
    --h: .6s;             /* durata dei tratti orizzontali (mezzo lato) */
    --v: .9s;             /* durata dei lati verticali */
    --ease: cubic-bezier(.45, 0, .55, 1);
}
.clients-frame span {
    position: absolute;
    background: var(--ink, #1a1a1a);
    transition: transform .3s ease;       /* uscendo dalla sezione si ritira subito */
}
/* lato in basso: due metà che partono dal centro */
.cf-b { bottom: 0; width: 50%; height: 1px; transform: scaleX(0); }
.cf-b.cf-l { right: 50%; transform-origin: right center; }
.cf-b.cf-r { left: 50%;  transform-origin: left center; }
/* lati: salgono dal basso */
.cf-s { top: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: center bottom; }
.cf-s.cf-l { left: 0; }
.cf-s.cf-r { right: 0; }
/* lato in alto: dagli angoli verso il centro */
.cf-t { top: 0; width: 50%; height: 1px; transform: scaleX(0); }
.cf-t.cf-l { left: 0;  transform-origin: left center; }
.cf-t.cf-r { right: 0; transform-origin: right center; }

.page-clients.is-current .clients-frame span { transform: none; }
.page-clients.is-current .cf-b { transition: transform var(--h) var(--ease) var(--start); }
.page-clients.is-current .cf-s { transition: transform var(--v) var(--ease) calc(var(--start) + var(--h)); }
.page-clients.is-current .cf-t { transition: transform var(--h) var(--ease) calc(var(--start) + var(--h) + var(--v)); }

/* ---------- contenuto -------------------------------------------------------- */
.clients-inner {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 4 * var(--frame)));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u) * .75);
}
.page .clients-heading,
.page-clients .clients-heading {
    color: var(--ink, #1a1a1a);
    margin: 0;
}
.clients-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: calc(var(--u) * .95);
    row-gap: calc(var(--u) * .7);
}
.client-logo {
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
    display: flex;
    /* comparsa: come i testi delle altre sezioni, uno dopo l'altro */
    opacity: 0;
    transform: translateY(45%);
    transition: opacity .3s ease, transform .3s ease;
}
.client-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.page-clients.is-current .client-logo {
    opacity: .9;
    transform: translateY(0);
    transition: opacity .6s ease-in-out, transform 1s ease;
    transition-delay: calc(1250ms + var(--i) * 80ms);
}

/* nota a piè di pagina in nero sopra l'avorio, dentro la cornice */
.page-clients .footer,
.page-clients .footer p {
    color: var(--stone, #6f6b64);
}
.page-clients .footer {
    left: var(--frame);
    margin: 0 0 0 1rem;
    transform: translateY(calc(-1 * var(--frame) - .9rem));
}

@media (max-width: 768px) {
    .page-clients { --u: clamp(40px, 13vw, 60px); }
    /* sul telefono la barra in alto (70px) copre la parte alta della pagina */
    .page-clients .clients-frame { top: calc(70px + var(--frame)); }
    .page-clients .clients-inner { margin-top: 70px; }
    .clients-list { column-gap: calc(var(--u) * .7); row-gap: calc(var(--u) * .6); }
}
@media (prefers-reduced-motion: reduce) {
    .clients-frame span { transform: none !important; transition: none !important; }
    .client-logo { opacity: .9; transform: none; transition: none; }
}