/* ═══════════════════════════════════════════════════
   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 {
  /* Increased size slightly (was 50px) */
  height: 60px;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  opacity: .35;
  filter: grayscale(1);
  display: block;
  /* Added 'filter' to transition for a smooth color fade on hover */
  transition: opacity .25s ease, filter .25s ease;
}

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

.jpr-marquee-track img:hover {
  opacity: 1 !important; /* Full visibility on hover */
  filter: grayscale(0) brightness(1) !important; /* Strips grayscale and resets brightness to show original logo colors */
}

.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%); }
}