/* ==========================================================================
   LOGO MARQUEE — portable client-logo ticker
   --------------------------------------------------------------------------
   Self-contained: no framework, no build step, no JS. Drop the folder in, link
   this file, paste the markup. Everything tunable is a custom property on
   .logo-marquee, so a host site themes it without touching these rules.

   Designed for DARK backgrounds — the logos are rendered white.
   ========================================================================== */

.logo-marquee {
  /* --- tune these ------------------------------------------------------- */
  --lm-logo-height: 26px;      /* all logos normalise to this height        */
  --lm-gap: 4rem;              /* space between logos                       */
  --lm-duration: 32s;          /* one full cycle; larger = slower           */
  --lm-opacity: .4;            /* resting opacity                           */
  --lm-opacity-hover: .95;     /* on hover of a single logo                 */
  --lm-fade: 12%;              /* width of the soft edge on each side       */
  --lm-label-color: rgba(255, 255, 255, .3);
  --lm-label-size: .6875rem;
  --lm-label-gap: 1.75rem;
  --lm-label-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* ---------------------------------------------------------------------- */

  position: relative;
  width: 100%;
}

.logo-marquee__label {
  margin: 0 0 var(--lm-label-gap);
  font-family: var(--lm-label-font);
  font-size: var(--lm-label-size);
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--lm-label-color);
}

/* The clipping window. The mask feathers both ends so logos dissolve rather
   than being sliced off at the edge. */
.logo-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right,
    transparent, #000 var(--lm-fade), #000 calc(100% - var(--lm-fade)), transparent);
  mask-image: linear-gradient(to right,
    transparent, #000 var(--lm-fade), #000 calc(100% - var(--lm-fade)), transparent);
}

.logo-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--lm-gap);
  animation: lm-scroll var(--lm-duration) linear infinite;
  will-change: transform;
}

.logo-marquee__viewport:hover .logo-marquee__track { animation-play-state: paused; }

/* brightness(0) collapses any colour to black, invert(1) flips it to white, and
   neither touches alpha — so ANY logo dropped in here comes out white, whatever
   colour it started as. The shipped assets are already white, which makes this a
   no-op on them; it is kept as a safety net for logos added later.

   The one case it cannot rescue is a logo drawn on an OPAQUE light plate: there
   is no transparency to recover, so it whitens into a solid block. Strip the
   plate from the asset instead — see README. */
.logo-marquee__track img {
  height: var(--lm-logo-height);
  width: auto;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: var(--lm-opacity);
  transition: opacity .3s ease;
}

.logo-marquee__track img:hover { opacity: var(--lm-opacity-hover); }

/* Translating a flat -50% is the usual way to write this and it is half a gap
   short: the track's width includes the gap BETWEEN the two sets, so the
   midpoint falls inside that gap rather than on the second set's first logo.
   The result is a small jump once per cycle. Subtracting half a gap lands it
   exactly on the repeat. */
@keyframes lm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--lm-gap) / 2)); }
}

/* Motion is the whole point of this component, so reduced-motion gets a static
   arrangement rather than a frozen strip cropped mid-logo: the duplicate set is
   dropped, the row wraps, and the edge fade comes off since nothing is running
   past it any more. */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .logo-marquee__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem var(--lm-gap);
  }
  .logo-marquee__track [data-lm-clone] { display: none; }
}