/* ============================================================
   Doers client logo marquee  (wp-content/media/clients/marquee.css)
   Modelled on the bidchamp.ai "logobar": CSS-only, one track of 4 identical
   groups, translateX(0 -> -50%) so the loop point is byte-identical to the
   start. No JS, no libraries.

   THEME: the site toggles the class `night-mode` on <html> (night = dark,
   the default). The logo files are WHITE. In dark mode they are used as is;
   without `night-mode` (light mode) a CSS filter turns them black.
   One asset set serves both themes.

   HOVER COLOUR: black-and-white by default. Items that have an official
   colour logo (`client-marquee__item--c`) carry a second, absolutely stacked
   <img class="client-marquee__img--c"> (loading="lazy", so it is fetched after
   load, never on hover). On hover the mono image fades out and the colour one
   fades in (.3s, no layout shift: the colour image is out of flow and has the
   same box). Brands whose official logo is plain black/charcoal (La Cote,
   Tomsons, Tegeta, Zeekr) or white-only (Meama, Georgian Manganese) have no
   colour file and simply stay mono. A few colour files carry light-coloured
   parts that vanish on white, so they ship two variants: `--dk` (shown on the
   dark theme) and `--lt` (shown in light mode); the hidden one is display:none
   and, being lazy, is never downloaded.
   The strip pauses while the pointer is over it. Hover is gated to real
   hover devices, so touch screens stay mono.

   Seam rule (do not "tidy"): spacing is a margin-right on every item, NOT
   `gap`. With gap the track is 0.5*gap short of 2 groups and the loop jumps
   once per cycle (bidchamp had exactly this bug).
   ============================================================ */
.client-marquee {
  --cm-margin: 72px;          /* space after every logo */
  --cm-k: 1;                      /* logo scale: desktop 1, phone .75 */
  --cm-duration: 58s;         /* one full loop; about 80 px/s */
  --cm-fade: 80px;                /* edge fade width */
  --cm-opacity: .72;
  position: relative;
  overflow: hidden;
  padding: 26px 0;
  background: transparent;        /* inherits the page: #0a0a0a night, #fff day */
  border-top: 1px solid var(--vlt-border-color, hsla(0, 0%, 60%, .15));
  border-bottom: 1px solid var(--vlt-border-color, hsla(0, 0%, 60%, .15));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--cm-fade), #000 calc(100% - var(--cm-fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--cm-fade), #000 calc(100% - var(--cm-fade)), transparent 100%);
}

.client-marquee__track {
  display: flex;
  align-items: center;
  /* prefixed max-content first: older WebKit/Gecko drop the unprefixed value */
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  animation: client-marquee-scroll var(--cm-duration) linear infinite;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

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

.client-marquee__group {
  display: flex;
  align-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.client-marquee__item {
  display: flex;
  align-items: center;
  flex: none;
  margin: 0 var(--cm-margin) 0 0;
  padding: 0;
  position: relative;
  opacity: var(--cm-opacity);
  transition: opacity .2s;
}

/* Each logo carries its own optical height in --h (px at desktop): wide
   wordmarks are shorter, compact marks taller, so they carry equal weight. */
.client-marquee .client-marquee__img {
  display: block;
  height: calc(var(--h) * var(--cm-k) * 1px);
  width: auto;
  max-width: none;
  /* light mode: logos are white files, make them black */
  filter: brightness(0);
}
html.night-mode .client-marquee .client-marquee__img { filter: none; }

/* colour layer: stacked on the mono image, invisible until hover */
.client-marquee .client-marquee__img--c {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  filter: none;
  pointer-events: none;
}
.client-marquee .client-marquee__img,
.client-marquee .client-marquee__img--c { transition: opacity .3s ease; }
/* theme variants: dark-theme file vs light-mode file */
html.night-mode .client-marquee .client-marquee__img--lt { display: none; }
html:not(.night-mode) .client-marquee .client-marquee__img--dk { display: none; }

@media (hover: hover) and (pointer: fine) {
  .client-marquee:hover .client-marquee__track { animation-play-state: paused; }
  .client-marquee__item:hover { opacity: 1; }
  .client-marquee__item--c:hover .client-marquee__img:not(.client-marquee__img--c) { opacity: 0; }
  .client-marquee__item--c:hover .client-marquee__img--c { opacity: 1; }
}

/* Phones */
@media (max-width: 700px) {
  .client-marquee {
    --cm-k: 0.75;
    --cm-margin: 40px;
    --cm-duration: 52s;
    --cm-fade: 40px;
    padding: 20px 0;
  }
}

/* Reduced motion: slower crawl, never a stopped row (same call as bidchamp.ai:
   a frozen strip with overflow scrolling read as broken). The hover
   pause above still applies (it only holds the strip still under the pointer). To stop it completely instead, replace the rule below with
   `.client-marquee__track { animation: none; }` and add `overflow-x: auto`
   to `.client-marquee` with `-webkit-mask-image: none; mask-image: none;`. */
@media (prefers-reduced-motion: reduce) {
  .client-marquee__track { animation-duration: calc(var(--cm-duration) * 3); }
}