/* ==========================================================================
   clients-marquee.css — homepage "Our clients" band  ·  v1.0
   Loaded LAST on the four homepage variants (index.html / index.php /
   ar/index.html / ar/index.php), after home-v3.css.

   Two jobs:
     1. HIGHLIGHT the band. It previously sat as plain white between an
        icefield band (Who we serve) above and the midnight services band
        below, so it read as a gap rather than a section. It now carries a
        soft cerulean crown glow and the logos ride a full-bleed lit rail.
     2. MARQUEE the logos. The rail scrolls continuously, seamlessly, and
        pauses on hover or keyboard focus.

   The marquee STRUCTURE is built at runtime by js/clients-marquee.js — the
   page HTML is untouched. If that script doesn't run (JS off, reduced
   motion), the original static grid renders exactly as before.

   RTL: the track reverses direction so logos travel with the reading
   direction. Full-bleed uses physical left/margin-left, which is
   direction-neutral, so no rtl.css overrides are needed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · THE BAND — lift it out of the plain-white gap it used to be
   -------------------------------------------------------------------------- */
.v3-clients {
    position: relative;
    overflow: hidden;                 /* contains the 100vw full-bleed rail */
    background-color: var(--white);
    background-image:
        radial-gradient(860px 440px at 50% -16%, rgba(51, 116, 186, 0.13), transparent 72%);
}

/* hairline crown so the band announces itself against the icefield above */
.v3-clients::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--ice) 18%, var(--cerulean-light) 50%, var(--ice) 82%, transparent);
    opacity: 0.9;
}

.v3-clients .v3-wrap { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   2 · THE RAIL — full-bleed lit strip the logos ride on
   -------------------------------------------------------------------------- */
.v3-cmq {
    position: relative;
    /* Full-bleed out of the padded container. Symmetric negative margins are
       used deliberately: the usual `left:50%; margin-left:-50vw` trick is
       over-constrained, and the box model resolves that by discarding
       margin-LEFT in RTL — which threw the whole rail 440px off-centre on the
       Arabic homepage. Equal margins on both sides are exactly constrained,
       so this resolves identically in both directions. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-top: clamp(34px, 5vh, 52px);
    padding-block: clamp(26px, 3vw, 34px);
    background: linear-gradient(180deg, var(--icefield), #F4F8FC 50%, var(--icefield));
    border-block: 1px solid var(--ice);
    overflow: hidden;

    /* feather both ends so logos arrive and leave instead of being cut */
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(90deg,
        transparent 0, #000 9%, #000 91%, transparent 100%);

    /* the rail itself fades up on entry (own observer, see the JS) */
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.v3-cmq.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   3 · THE TRACK — two identical groups tiled, shifted exactly one group
   -------------------------------------------------------------------------- */
.v3-cmq__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: v3-cmq-run var(--cmq-dur, 46s) linear infinite;
}
.v3-cmq__group {
    display: flex;
    flex: 0 0 auto;
    gap: var(--cmq-gap, 14px);
    padding-inline-end: var(--cmq-gap, 14px);
}
@keyframes v3-cmq-run {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
/* Travel with the reading direction on the Arabic mirror.
   NOTE: `animation-direction: reverse` is the obvious move here and it is
   WRONG — reverse starts the track at -50%, which in an RTL overflow context
   shoves the whole group off the left edge and leaves an empty rail. A
   dedicated positive keyframe is needed instead. In RTL the flex row places
   group 1 at the right and the clone to its left, so shifting RIGHT by one
   group slides the clone into the exact place group 1 just left. */
@keyframes v3-cmq-run-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(50%, 0, 0); }
}
[dir="rtl"] .v3-cmq__track { animation-name: v3-cmq-run-rtl; }

/* let people stop it and read a logo */
.v3-cmq:hover .v3-cmq__track,
.v3-cmq:focus-within .v3-cmq__track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   4 · THE CARDS inside the rail
   The base .v3-client is `flex: 1 1 168px`, which collapses inside a
   max-content track — so it gets a fixed basis here instead.
   -------------------------------------------------------------------------- */
.v3-cmq .v3-client {
    flex: 0 0 auto;
    width: clamp(172px, 17vw, 208px);
    max-width: none;
    min-height: 104px;
    background: var(--white);
    /* cells were revealed by interactions.js before the rail was built; the
       clones were never observed, so both groups are pinned visible here */
    opacity: 1 !important;
    transform: none;
}
.v3-cmq .v3-client:hover {
    transform: translateY(-4px);
    border-color: var(--cerulean);
    box-shadow: var(--v3-shadow);
}
.v3-cmq .v3-client img { max-height: 60px; }

@media (max-width: 768px) {
    .v3-cmq { padding-block: 22px; }
    .v3-cmq .v3-client { width: clamp(150px, 46vw, 180px); min-height: 92px; }
    .v3-cmq .v3-client img { max-height: 52px; }
}

/* --------------------------------------------------------------------------
   5 · REDUCED MOTION
   The script declines to build the rail at all under reduced motion, so the
   original grid is what renders. These are belt-and-braces in case the rail
   exists and the preference is switched on afterwards.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .v3-cmq { opacity: 1; transform: none; transition: none; }
    .v3-cmq__track { animation: none; }
    .v3-cmq .v3-client:hover { transform: none; }
}