/* ==========================================================================
   Partners Marquee — Full viewport width, seamless infinite loop
   ========================================================================== */
.zg3-marquee {
  overflow: hidden;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.zg3-marquee__track {
  display: flex;
  gap: var(--zg3-sp-48);
  width: max-content;
  will-change: transform;
  animation: zg3-partners-scroll 60s linear infinite;
}

/* With 4 copies: -25% moves exactly one full set, seamless loop */
@keyframes zg3-partners-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

/* Pause on hover — only on pointer devices (prevents stuck-hover on touch) */
@media (hover: hover) and (pointer: fine) {
  .zg3-marquee:hover .zg3-marquee__track {
    animation-play-state: paused;
  }
}

.zg3-marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--zg3-sp-8) var(--zg3-sp-20);
  opacity: 0.55;
  transition: opacity 0.3s, transform 0.3s;
  border-radius: var(--zg3-r-md);
}
@media (hover: hover) and (pointer: fine) {
  .zg3-marquee__item:hover {
    opacity: 1;
    transform: scale(1.05);
  }
}
.zg3-marquee__item img {
  /* Natural width determined by height. Wide logos stay wide. */
  height: 48px;
  width: auto;
  display: block;
  border-radius: var(--zg3-r-sm);
}