/* 滚动域名展示（domain_roll）前台样式 — dr- 前缀隔离；颜色/圆角全走 CSS 变量 */

/* ---------- 外框：左侧标签 + 右侧滚动视口 ---------- */

.dr-bar {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
}

/* 作为主栏区块渲染时：与上下区块留出主题节奏间距（原本在 hero 钩子位时由上层负责） */
.dr-bar.is-block {
  margin: 24px 0;
}

/* 标签胶囊：主色底 + 右缘斜切，与条目区自然衔接 */
.dr-label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 20px 10px 12px;
  background: var(--ac);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

/* 视口：两端淡出遮罩，滚动进出不生硬 */
.dr-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}

/* 轨道：两组等价内容，位移 -50% = 一组宽度 → 无缝循环
   flex 容器里的子项默认 flex-shrink:1 会把轨道压回容器宽，必须 flex:none 保住 max-content 宽度，
   否则 -50% 参照的不是「一组宽度」，接缝会错位 */
.dr-track {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  animation: dr-scroll var(--dr-duration, 60s) linear infinite;
  will-change: transform;
}

/* 关键帧：整条轨道左移一半（正好一组），两组内容一致 → 循环处视觉无跳变 */
@keyframes dr-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.dr-group {
  display: flex;
  gap: 8px;
  padding-right: 8px;
  flex: none;
}

.dr-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 5px 12px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--soft-2);
  color: var(--tx-2);
  font-size: 12.5px;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.dr-item:hover {
  border-color: var(--ac);
  background: var(--card);
  color: var(--ac-2);
}

/* 无链接条目：仅展示，不可点 */
.dr-item.is-static {
  opacity: 0.8;
  cursor: default;
}

.dr-item.is-static:hover {
  border-color: var(--bd);
  background: var(--soft-2);
  color: var(--tx-2);
}

.dr-name {
  font-weight: 600;
  color: var(--tx);
}

.dr-item:hover .dr-name {
  color: var(--ac-2);
}

.dr-price {
  font-family: var(--serif);
  font-size: 11.5px;
  color: var(--tx-3);
}

/* 悬停暂停（仅真鼠标设备；触屏 :hover 会粘滞） */
@media (hover: hover) {
  .dr-bar:hover .dr-track {
    animation-play-state: paused;
  }
}

/* 减少动态：停止动画，退化为可横向拖动/滑动的静态条 */
@media (prefers-reduced-motion: reduce) {
  .dr-track {
    animation: none;
  }

  .dr-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- 移动端 ---------- */

@media (max-width: 640px) {
  .dr-label {
    padding: 7px 18px 7px 10px;
    font-size: 12px;
  }

  .dr-item {
    padding: 4px 10px;
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  /* 极窄屏只留域名，标价在条目详情页（点击）可见，避免单个胶囊过长 */
  .dr-price {
    display: none;
  }
}