/* 1. 全局重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #f5f5f5;
  padding: 50px 0;
  overflow-x: hidden; /* 防止出现水平滚动条 */
}

/* 2. 外层容器 */
.logo-wall {
  display: flex;
  width: 100%; /* 确保占满屏幕宽度 */
  flex-direction: column;
  gap: 30px; /* 行与行之间的间距 */
}

/* 3. 每一行的容器 */
.logo-row {
  position: relative;
  width: 100%;
  overflow: hidden; /* 关键：隐藏超出屏幕的部分 */
  background: #fff;
  padding: 20px 0;
  white-space: nowrap; /* 关键：强制图片不换行 */
}

/* 4. 滚动轨道 */
.track {
  display: inline-flex;
  align-items: center;
  gap: 50px; /* 默认间距（电脑端） */
  /* 动画配置 */
  animation-timing-function: linear; /* 匀速滚动 */
  animation-iteration-count: infinite; /* 无限循环 */
  will-change: transform; /* 性能优化 */
}

/* 5. 图片样式（已移除灰度滤镜，显示原色） */
.track img {
  height: 60px; /* 默认高度（电脑端） */
  width: auto; /* 宽度根据高度自动缩放 */
  object-fit: contain;
  /* transition: filter 0.3s; // 不需要变色动画了，这行可以留着也可以删掉 */
}

/* --- 6. 核心动画定义 --- */

/* 向左滚动 */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  } /* 移动总长度的一半 */
}

/* 向右滚动 */
@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* 应用动画 */
.scroll-left .track {
  animation-name: scrollLeft;
  animation-duration: 30s; /* 滚动速度 */
}

.scroll-right .track {
  animation-name: scrollRight;
  animation-duration: 30s;
}

/* --- 7. 交互功能 --- */
/* 鼠标悬停暂停 */
.logo-row:hover .track {
  animation-play-state: paused;
}

/* --- 8. 移动端自适应 (新增部分) --- */
/* 当屏幕宽度小于 768px (手机/平板竖屏) 时生效 */
@media screen and (max-width: 768px) {
  .logo-wall {
    gap: 15px; /* 减小行间距 */
  }

  .logo-row {
    padding: 10px 0; /* 减小上下内边距 */
  }

  .track {
    gap: 20px; /* 减小 Logo 左右间距 */
  }

  .track img {
    height: 35px; /* 减小 Logo 高度，宽度会自动变小 */
  }
}