/* Hero logo marquee — items come from the "Hero logos" repeater (Home -> Hero tab). */

.logos--hero {
  --hero-logos-gap: 100px;
  --hero-logos-scale: 1;
  --hero-logos-max-height: 80px;
  --hero-logos-duration: 70s;
}

/* The .flex helper centres its children. With two rows overflowing the strip
   that pushes the whole thing left of the container, so the last row runs out
   before the right edge once the animation has moved a full row along. The
   marquee has to start flush left for the loop to stay covered. */
.logos--hero .logos__inner {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: var(--hero-logos-gap);
  padding-top: 24px;
  padding-bottom: 24px;
}

.logos--hero .logos__row {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--hero-logos-gap);
  will-change: transform;
}

.logos--hero .logos__item {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 0;
  width: calc(var(--logo-w, 160px) * var(--hero-logos-scale));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.logos--hero .logos__item img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(var(--hero-logos-max-height) * var(--hero-logos-scale));
  -o-object-fit: contain;
     object-fit: contain;
}

/* Overrides the generic .logos .moveLeft rule in home.css, which is tuned to the
   old fixed-width SVG. One cycle travels exactly one row plus the gap that
   separates the two rows, so the duplicate row lands pixel-perfect. */
.logos--hero .logos__row.moveLeft {
  -webkit-animation: heroLogosMove var(--hero-logos-duration) linear infinite;
          animation: heroLogosMove var(--hero-logos-duration) linear infinite;
}

@-webkit-keyframes heroLogosMove {
  from {
    -webkit-transform: translateX(calc(-100% - var(--hero-logos-gap)));
            transform: translateX(calc(-100% - var(--hero-logos-gap)));
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes heroLogosMove {
  from {
    -webkit-transform: translateX(calc(-100% - var(--hero-logos-gap)));
            transform: translateX(calc(-100% - var(--hero-logos-gap)));
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@media only screen and (max-width: 768px) {
  .logos--hero {
    --hero-logos-gap: 60px;
    --hero-logos-scale: 0.8;
  }
}

@media only screen and (max-width: 520px) {
  .logos--hero {
    --hero-logos-gap: 40px;
    --hero-logos-scale: 0.65;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logos--hero .logos__row.moveLeft {
    -webkit-animation: none;
            animation: none;
  }
}