/* ==========================================================================
   CogniPrism client row
   Appended to cogniprism-emphasis.css. Used on Homepage section 7 and inside
   the Speaking & Training logo strip.

   Client names are typeset, not logos. Two reasons. Displaying a client's
   logo means displaying their trademark, which generally needs consent, and
   large institutions tend to have strict third-party use policies. Stating
   that you did work for a client is a factual claim about your own business.
   Separately, a logo row is the one place other brands' design sits inside
   yours: different aspect ratios, weights, colours, some with taglines. A
   typeset row stays coherent with a site that is already typographic.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Oswald is the fifth font, and it exists for this component only.

   *** Do not borrow it. *** Four fonts already means every new component has
   to answer "which font." A fifth added for one job and then used for a
   second is how a system ends up with five fonts doing six jobs badly. If
   something else needs a distinct voice, the answer is a Bricolage width-axis
   setting, not Oswald.
   -------------------------------------------------------------------------- */

.cp-clients {
  --cp-clients-floor: 17px;   /* below this, the row becomes a ticker */
  --cp-clients-max:   26px;   /* never larger than this, however wide the page */
  --cp-clients-sep:   18px;
}

.cp-clients span {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cp-slate);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   1. Single row, sized by measurement

   Hidden by default. The script measures the natural width, computes the size
   that fits, and reveals this only if that size clears the floor. That order
   matters: with JavaScript unavailable the visitor gets the ticker, which
   works on its own, rather than a row wrapped to two lines.
   -------------------------------------------------------------------------- */

.cp-clients__fit { display: none; }
.cp-clients.is-fitted .cp-clients__fit { display: block; }
.cp-clients.is-fitted .cp-clients__ticker { display: none; }

.cp-clients__row {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Dot separators rather than ruled padding. Dots cost less width, so the row
   fits at a larger size, which is the whole point of this component. */
.cp-clients__row span { padding: 0 var(--cp-clients-sep); }
.cp-clients__row span:first-child { padding-left: 0; }
.cp-clients__row span:last-child  { padding-right: 0; }

.cp-clients__row span + span::before {
  content: "\00B7";
  margin-left: calc(-1 * var(--cp-clients-sep));
  margin-right: var(--cp-clients-sep);
  color: rgba(66, 129, 164, .55);
}

/* --------------------------------------------------------------------------
   2. Ticker

   The list is duplicated and the track slides exactly 50%, which is what makes
   the loop seamless. The duplicate is aria-hidden so a screen reader reads six
   names, not twelve.

   With six names the loop repeats roughly every 19 seconds at this duration.
   Adding names lengthens the loop; removing them shortens it. Adjust the
   duration rather than the gap if the pace feels wrong.
   -------------------------------------------------------------------------- */

.cp-clients__ticker {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* A mask rather than a gradient overlay, so the fade works on any surface
   without having to match the background colour. */

.cp-clients__track {
  display: flex;
  width: max-content;
  animation: cp-clients-scroll 38s linear infinite;
}

.cp-clients__set { display: flex; gap: 56px; padding-right: 56px; flex: none; }

.cp-clients__ticker span { font-size: clamp(19px, 2.1vw, 25px); }

.cp-clients__ticker:hover .cp-clients__track,
.cp-clients__ticker:focus-within .cp-clients__track { animation-play-state: paused; }

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

@media (prefers-reduced-motion: reduce) {
  .cp-clients__track { animation: none; }
  .cp-clients__ticker {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* Reduced motion turns the ticker into a normal horizontal scroll rather than
   freezing it, so the names past the fold are still reachable. */