/* ============================================================================
   PARTNER BANNER — infinite brand-logo marquee
   ----------------------------------------------------------------------------
   Loaded by : every page
   Depends on: base/tokens.css

   HOW THE LOOP WORKS
   The track holds TWO identical halves of logos. The animation slides it left
   by exactly -50%, which lands the second half precisely where the first
   started, so the reset is invisible.

   => If you add or remove a logo you must add or remove it from BOTH halves,
      keeping the two halves identical. Any other item count makes the strip
      visibly jump each cycle.
   ============================================================================ */

.partner-banner{
  margin-top:var(--navbar-h);   /* clears the fixed navbar */
  background:var(--light);
  border-bottom:1px solid var(--border);
  padding:16px 0 18px;
  overflow:hidden;
  position:relative;
}

.partner-banner-label{
  text-align:center;
  font-size:0.68rem;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--text-light);
  margin-bottom:14px;
}

.marquee-wrapper{position:relative;overflow:hidden;width:100%;}

/* Gradient masks so logos fade out at both edges instead of being cut off. */
.marquee-wrapper::before,
.marquee-wrapper::after{
  content:'';position:absolute;top:0;bottom:0;
  width:120px;z-index:2;pointer-events:none;
}
.marquee-wrapper::before{left:0;background:linear-gradient(to right,var(--light) 0%,transparent 100%);}
.marquee-wrapper::after{right:0;background:linear-gradient(to left,var(--light) 0%,transparent 100%);}

.marquee-track{
  display:flex;align-items:center;gap:4rem;
  width:max-content;
  animation:marqueeScroll 30s linear infinite;
}

/* -50% == exactly one half of the track. See the note at the top of this file. */
@keyframes marqueeScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

.marquee-item{flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.marquee-item img{
  height:55px;width:auto;object-fit:contain;
  filter:grayscale(100%) opacity(0.5);
  transition:filter 0.4s ease,transform 0.3s ease;
}
.marquee-item img:hover{filter:grayscale(0%) opacity(1);transform:scale(1.08);}

@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none;}
}