@import "/mk3/assets/palette.css";
/* ========================================================================
 * 合作夥伴 Logo 無限輪播 (參考 Kids Gallery)
 * 配合 market.css 的 navy/orange 設計系統使用。
 * ===================================================================== */

.logo-slideshow-section { overflow: hidden; }

.logo-slideshow {
  margin-top: 14px;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.logo-track {
  display: flex;
  width: max-content;
  animation: logo-scroll 32s linear infinite;
  will-change: transform;
}

/* Hover / 鍵盤聚焦時暫停 */
.logo-slideshow:hover .logo-track,
.logo-slideshow:focus-within .logo-track { animation-play-state: paused; }

/* 第二行反向滾動，與第一行交叉方向（參考 Kids Gallery） */
.logo-track.reverse { animation-direction: reverse; }

.logo-item {
  flex: 0 0 auto;
  width: 200px;
  height: 100px;
  margin: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .55;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}

.logo-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.08);
}

/* 兩組相同 Logo + translateX(-50%) = 無縫循環 */
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 響應式 */
@media (max-width: 768px) {
  .logo-item { width: 150px; height: 75px; margin: 0 14px; }
  .logo-track { animation-duration: 22s; }
}

/* 尊重「減少動態效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .logo-item img { filter: none; opacity: 1; }
}