/* ============================================================
   Our Clients — the credibility engine.

   Geometry note: the brief asks for a "semi-circular horseshoe"
   AND a continuous 360deg orbit, which only reconcile if the
   cards sit on a FULL ring whose lower arc is clipped away by
   the stage. That is what ref-3 actually shows, and it is what
   is built here — the visible composition is a horseshoe, the
   geometry is a complete circle, so the rotation never has to
   stop or reverse.
   ============================================================ */

.clients { overflow: hidden; }

.clients__stage {
  position: relative;
  height: clamp(680px, 88svh, 900px);
  margin-block: calc(var(--section) * -0.35);
  display: grid;
  place-items: center;
}

/* ---- Ring ---- */

.clients__ring {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 0; height: 0;
  z-index: 1;
  --card-w: clamp(132px, 12vw, 184px);
  --card-h: calc(var(--card-w) * 0.58);
}

/* The slot's transform is pure translation along the ellipse, written
   each frame; the margins pre-centre the box on the ring origin. */
.clients__slot {
  position: absolute;
  left: 0; top: 0;
  width: var(--card-w, 160px);
  height: var(--card-h, 96px);
  margin-left: calc(var(--card-w, 160px) / -2);
  margin-top: calc(var(--card-h, 96px) / -2);
  will-change: transform;
}

/* scale is an independent CSS property, so the per-frame depth cue
   never fights GSAP's transform-based entrance on the face. */
.clients__card {
  width: 100%;
  height: 100%;
  will-change: opacity, scale;
}

/* Hidden until clients.js has placed the ring and run the entrance.
   The slots are absolutely positioned at the ring origin until their
   first transform is written, so without this every logo stacks in a
   pile at the centre for one frame. Gated on .js so a scripting
   failure still shows the wall. */
.js .clients__ring:not([data-ready='true']) .clients__card { opacity: 0; }

.clients__card-face {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  /* A white plate, not a tinted pane.

     The earlier cards rendered every mark flat white via
     `brightness(0) invert(1)`, which is the right call for a set of
     placeholder wordmarks and the wrong one for real brand assets:
     it flattens Cargills' white building into its red disc and LOLC's
     white type into its blue box, destroying exactly the internal
     contrast those marks are built on. Real logos go on white, in
     their own colours — which is also what a client's brand guidelines
     will require when permission is sought. */
  background: var(--paper);
  box-shadow:
    0 1px 0 0 rgb(255 255 255 / 0.5) inset,
    0 22px 45px -26px rgb(0 0 0 / 0.85);
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}

.clients__card-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Pre-balanced to equal optical area at build time, so `contain`
     has nothing left to decide — see scripts note in the logo README. */
}

@media (hover: hover) {
  .clients__slot:hover .clients__card-face {
    transform: translateY(-4px);
    box-shadow:
      0 1px 0 0 rgb(255 255 255 / 0.6) inset,
      0 30px 60px -22px rgb(0 0 0 / 0.9);
  }
}

/* ---- Centre copy ---- */

.clients__copy {
  position: relative;
  z-index: 2;
  max-width: 40rem;
  padding-inline: var(--gutter);
  text-align: center;
  /* Sits on the ring's centre, not the stage's. */
  transform: translateY(8%);
}

.clients__copy .label { margin-bottom: 1.25rem; }

/* The only centred masthead on the site. Name and index sit either
   side of the axis rather than at the two edges, which is what a
   split row has to do when the text under it is centred. */
.clients__copy .section-head { margin-inline: auto; }
.clients__copy .section-head__row { justify-content: center; gap: 1rem; }

.clients__copy h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.clients__copy p {
  margin-top: 1.5rem;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

.clients__copy .btn { margin-top: 2.25rem; }

/* A soft navy pool behind the copy so a card sweeping past
   never reduces contrast on the headline. */
.clients__copy::before {
  content: '';
  position: absolute;
  inset: -18% -12%;
  z-index: -1;
  background: radial-gradient(
    ellipse 55% 50% at 50% 50%,
    rgb(10 22 40 / 0.94) 0%,
    rgb(10 22 40 / 0.78) 45%,
    rgb(10 22 40 / 0) 74%
  );
  pointer-events: none;
}

/* ---- Mobile marquee fallback ---- */

.clients__mobile { display: none; }

.clients__marquee {
  position: relative;
  overflow: hidden;
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.clients__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.clients__chip {
  flex: none;
  width: 148px;
  height: 76px;
  margin-right: 0.75rem;
  display: grid;
  place-items: center;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 14px 30px -20px rgb(0 0 0 / 0.8);
}
.clients__chip img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* Under 900px the ring is dropped and the same copy block reflows
   into an ordinary centred column above the strip. The cut-off is
   900 rather than 768 because the orbit needs real width: below
   that the hole in the middle is narrower than the headline. */
@media (max-width: 899px) {
  .clients__stage {
    display: block;
    height: auto;
    margin-block: 0;
  }
  .clients__ring { display: none; }
  .clients__copy {
    max-width: 36rem;
    margin-inline: auto;
    padding-inline: 0;
    transform: none;
    padding-bottom: clamp(2.5rem, 7vw, 3.5rem);
  }
  .clients__copy::before { display: none; }
  .clients__mobile { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .clients__slot, .clients__card { will-change: auto; }
  .clients__track { transform: none !important; }
}