/* ═══════════════════════════════════════════════════
   JP ROBOTIC — LOGO MARQUEE
   Single source of truth. Add via Asset Injector.
═══════════════════════════════════════════════════ */

.jpr-marquee-outer {
  overflow: hidden;
  width: 100%;
}

.jpr-marquee-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: jpr-marquee 32s linear infinite;
}

.jpr-marquee-track img {
  /*height: 36px;*/
  height: 50px;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  opacity: .35;
  filter: grayscale(1);
  display: block;
  transition: opacity .25s;
}

[data-theme="light"] .jpr-marquee-track img {
  filter: grayscale(1) brightness(.3);
  opacity: .38;
}

.jpr-marquee-track img:hover {
  opacity: .65;
}

.jpr-marquee-outer:hover .jpr-marquee-track {
  animation-play-state: paused;
}

/* Logos start just off the right edge and scroll left.
   The -50% endpoint = one full logo set width (seamless loop).
   Tweak the 0% translateX value to taste:
     0px    = starts fully visible on left (original)
     50vw   = starts from center of screen
     100vw  = starts fully off right (arrives late)
     110%   = just beyond right edge of track container  */
@keyframes jpr-marquee {
  0%   { transform: translateX(110%); }
  100% { transform: translateX(-50%); }
}