/* ==========================================
       跑马灯核心 CSS 结构
       ========================================== */
.marquee-wrapper {
  width: 100%;
  /*  max-width: 1000px; /* 支持自定义容器尺寸，这里设定最大宽度 */
  overflow: hidden; /* 隐藏溢出内容 */
  white-space: nowrap; /* 强制文本不换行 */
  position: relative;


  border-radius: 8px;
  padding: 15px 0;

  cursor: pointer; /* 提示用户可交互（悬停暂停） */
}

/* 左右两侧渐变遮罩，让文本出现和消失更加平滑自然 */
.marquee-wrapper::before,
.marquee-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none; /* 防止遮罩阻挡鼠标事件 */
}

.marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--container-bg), transparent);
}

.marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--container-bg), transparent);
}

/* 内部滚动包裹层 */
.marquee-content {
  position: relative;
  display: inline-block;
  left: 0;
}

/* 单个文本节点 */
.marquee-text {
  display: inline-block;
  /* padding-right 将由 jQuery 动态注入，用于控制文本间隔 */
}