/* ============================================================
   合作品牌 Logo 牆（首頁 + about 共用）
   來源 style.css 行 2427-2589（純搬移，內容未改）
   ============================================================ */

/* ============================================================
   09 BRANDS SERVED
   ============================================================ */
.brands-section {
  padding: 15.625vw 0 0;
  position: relative;
  background: var(--c-bg-section);
}

.brands-section::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15.625vw;
  background-image: url(../../img/geyes-design-bg.png);
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  content: '';
}

.brands-section-wrap {
  position: relative;
  z-index: 1;
  background: #191919;
  padding-top: 25px;
}

.brands-section-wrap .section-h1 {
  color: var(--c-on-dark);
}

.brands-section-wrap .section-h1 .accent {
  color: var(--c-on-dark);
}

.brands-section-wrap .section-h1 sup {
  color: var(--c-brand);
}

.brands-section-wrap .section-h4 {
  color: var(--c-on-dark);
}

.brands-section-wrap .body-l {
  color: var(--c-on-dark);
}

/* logo 牆：上下兩排無限跑馬燈容器 */
.logo-wall {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}

/* 滑鼠追蹤圓形游標：由 JS 設定 --x / --y，CSS 以 transform 平滑跟隨產生輕微滯後感 */
.logo-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(90px, 10vw, 130px);
  height: clamp(90px, 10vw, 130px);
  border-radius: 50%;
  background: var(--c-brand);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) translate(-50%, -50%) scale(0);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
  /* mix-blend-mode: multiply; */
  will-change: transform, opacity;
}

/* 進入 logo 牆時顯示並放大，離開時自動回到 scale(0) 並淡出 */
.logo-wall.is-hover .logo-cursor {
  opacity: 1;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) translate(-50%, -50%) scale(1);
}

/* 單排視窗：隱藏溢出，左右淡出遮罩讓邊緣銜接更自然；z-index 高於游標讓 logo 蓋在前方 */
.logo-marquee {
  overflow: hidden;
  position: relative;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--c-bg-black) 6%, var(--c-bg-black) 94%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--c-bg-black) 6%, var(--c-bg-black) 94%, transparent);
}

/* 跑馬燈軌道：寬度依內容撐開，動畫位移 -50%（兩份相同內容）達成無縫循環
   間距改用 .logo-item 的 margin-right（非 flex gap），否則 -50% 會多算半個 gap 造成跳動 */
.logo-track {
  display: flex;
  width: max-content;
  /* 用 longhand 並給定預設 duration，避免 shorthand 把 animation-duration 重設為 0s 而停住不動 */
  animation-name: logo-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 55s;
  will-change: transform;
}

/* 上排速度較快 */
.logo-track--top {
  animation-duration: 45s;
}

/* 下排速度較慢，呈現層次感 */
.logo-track--bottom {
  animation-name: logo-scroll2;
  animation-duration: 45s;
}

/* 滑鼠移入時暫停，方便使用者看清 logo */
.logo-marquee:hover .logo-track {
  animation-play-state: paused;
}

@keyframes logo-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* 下排：由左至右。需從 -50% 動到 0（兩份相同內容），否則左側會露出空白 */
@keyframes logo-scroll2 {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

/* 單一 logo 卡片：固定寬度，避免動畫過程跳動 */
.logo-item {
  flex: 0 0 auto;
  width: clamp(140px, 16vw, 200px);
  aspect-ratio: 16/7;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color .3s, transform .3s;
}

.logo-item:hover {
  border-color: var(--c-brand);
  transform: scale(1.05);
}

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

.logo-item:hover img {
  filter: none;
  opacity: 1;
}

/* 註：原本在 prefers-reduced-motion: reduce 時停用跑馬燈，
   但開啟「減少動態」的系統/瀏覽器會導致載入時完全不動；
   此為品牌牆裝飾性輪播，依需求改為一律播放，故移除停用規則。 */