/* ============================================================================
   Smartguard — Logo Marquee
   Pure CSS, no JavaScript. Movement comes from a scroll-linked timeline
   (animation-timeline: scroll(root)), so the strip's horizontal position
   is a direct function of total page scroll offset — it moves exactly
   while the user is scrolling and is truly stationary the instant they
   stop, with no JS, no timers, no "ease out".

   ============================================================================
   CONFIGURATION — everything you asked to control lives here.
   ============================================================================ */

.logo-marquee {

    /* ---- 1. Slide speed ----
      Total time for one full loop. Lower = faster movement. */
    --logo-marquee-duration: 50s;

  /* ---- 3. Image size ----
     Every logo is set to this height; width follows automatically to
     keep each logo's own aspect ratio, so logos of different natural
     shapes still sit at a consistent visual size. */
  --logo-marquee-logo-height: 50px;
    --logo-marquee-logo-scale: 0.3;

  /* ---- 4. Width ----
     Width of the whole component as a percentage of its parent
     container. 100% = full width of whatever it sits inside. */
  --logo-marquee-width: 80%;

  /* ---- 5. Gap between images ---- */
  --logo-marquee-gap: 3px;

  /* ---- 5b. Side-bearing tighten ----
     Many logo assets include transparent left/right space in the file.
     This pulls items closer without shrinking the logos. */
  --logo-marquee-side-bearing-tighten: 8px;

  /* ---- 6. Recolour ----
     Every logo is recoloured to a single flat brand tone (ignoring its
     original colours) using it as a mask. Adjust the lightness value in
     the oklch() below to taste; leave "c h" as-is so it stays derived
     from --colour-brand rather than becoming a new colour.
     Background: use `transparent`, or swap in var(--colour-page) /
     var(--colour-surface) for a dark card-like strip. */
  --logo-marquee-tint: oklch(from var(--colour-brand) 80% c h / 0.8);
  --logo-marquee-bg: transparent;
  /* --logo-marquee-bg: var(--colour-page); */

  /* ============================================================================
     Below this point is implementation — you shouldn't need to touch it
     to adjust any of the six options above.
     ============================================================================ */

  width: var(--logo-marquee-width);
  max-width: 100%;
  margin-inline: auto;
  overflow-x: hidden;
  overflow: hidden;
  background: var(--logo-marquee-bg);
  padding-block: var(--space-lg);
  & p {
    font-family: var(--font-family);
    font-size: var(--font-size-1);
    line-height: 1.5;
    color: oklch(from var(--colour-brand) 80% c h / 0.3);
    margin: 0.5rem 0 1rem 0;
    text-align: center;
  }
}

.section--temperature .logo-marquee p{
  color: oklch(from var(--colour-brand) 80% c var(--temperature-col-h) / 0.3);
}

.logo-marquee__track {
  display: flex;
  width: max-content;
  overflow-x: clip;
  will-change: transform;
}

.logo-marquee__set {
  display: flex;
  align-items: center;
  width: max-content;
  flex-shrink: 0;
  gap: var(--logo-marquee-gap);
  padding-inline-end: 0;
}

.logo-marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-inline-end: calc(var(--logo-marquee-side-bearing-tighten) * -1);
}

.logo-marquee__item:last-child {
  margin-inline-end: 0;
}

.logo-marquee__logo {
  height: calc(var(--logo-marquee-logo-height) * var(--logo-marquee-logo-scale));
  width: auto;
  display: block;
}

.logo-marquee__logo:not(.logo-marquee__logo--inline) {
  /* ---- Recolour via mask (primary technique) ----
     Uses the logo image purely as a shape mask and fills that shape
     with --logo-marquee-tint, so every logo — regardless of its
     original colours — reads as one flat brand tone. Works best with
     transparent-background SVG/PNG source logos. */
  background-color: var(--logo-marquee-tint);
  filter: brightness(0.7) opacity(0.7);
  -webkit-mask-image: var(--logo-marquee-mask, none);
  mask-image: var(--logo-marquee-mask, none);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.logo-marquee__logo--inline {
  color: var(--logo-marquee-tint);
  width: auto;
  height: calc(var(--logo-marquee-logo-height) * var(--logo-marquee-logo-scale));
  max-width: none;
  flex: 0 0 auto;
  display: block;
  background-color: currentColor;
  -webkit-mask-image: var(--logo-marquee-mask, none);
  mask-image: var(--logo-marquee-mask, none);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.logo-marquee__logo--inline image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.logo-marquee__logo--inline path,
.logo-marquee__logo--inline rect,
.logo-marquee__logo--inline circle,
.logo-marquee__logo--inline ellipse,
.logo-marquee__logo--inline polygon,
.logo-marquee__logo--inline polyline,
.logo-marquee__logo--inline line {
  fill: currentColor;
  stroke: currentColor;
}

/* Because the mask image differs per logo, set it per <img> via its own
   src — the simplest way in plain CSS/HTML is a one-line inline style,
   e.g.:
     <img class="logo-marquee__logo"
          src="/images/clients/client-01.svg"
          style="--logo-marquee-mask: url(/images/clients/client-01.svg)">
   If that's impractical (no inline styles allowed), use the plain
   filter-based alternative below instead — remove the mask rules above
   and use this on .logo-marquee__logo instead:

     filter: brightness(0) saturate(100%) opacity(0.55);
     mix-blend-mode: multiply; // only if --logo-marquee-bg is light

   The filter route is a rougher approximation (it darkens to near-black
   rather than a true brand tint on most browsers without further
   hue-rotate tuning per logo), which is why mask-image is the
   recommended default. */

/* ============================================================================
   MOTION — continuous marquee in a fixed viewport
   ============================================================================ */

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

.logo-marquee__track {
  animation-name: logo-marquee-scroll;
  animation-duration: var(--logo-marquee-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track {
    animation: none !important;
    transform: none !important;
  }
}


.logo-marquee--temperature {
  --logo-marquee-tint: oklch(from var(--colour-brand) 80% c var(--temperature-col-h));
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track {
    animation: none !important;
    transform: none !important;
  }
}

@media (width <= 1024px) {
  .logo-marquee {
    position: absolute;
    top: -10000px;
    display: none;
    visibility: hidden;
  }
}