/* 1. 兩側漸層遮罩 */
.marquee-mask {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #1e272e 0; /* 背景色可自行更換 */
  /* 使用 mask-image 讓左右兩側 10% 的範圍呈現透明淡出 */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* 2. 跑馬燈外框 */
.marquee-container {
  display: flex;
  white-space: nowrap;
  padding: 0 15px 0;
  cursor: pointer;
}

/* 3. 滾動內容包覆層 */
.marquee-content {
  display: flex;
  flex-shrink: 0;
  will-change: transform;
  animation: seamless-marquee 20s linear infinite;
}

/* 文字項目 */
.marquee-item {
  color: #FFF;
  font-size: 16px;
  padding-right: 50px; /* 兩組文字之間的間距 */
}

/* 4. 滑鼠懸停與 JS 控制暫停 */
.marquee-container:hover .marquee-content,
.marquee-container.is-paused .marquee-content {
  animation-play-state: paused;
}

/* 5. 無縫動畫關鍵：因為內容重複兩次，只需平移至 -50% 即可完美循環 */
@keyframes seamless-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}