/* ============================================
   分类标签 - 仅激活项旋转流光效果
   ============================================ */

@property --tab-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* === 不修改容器和未激活标签，保持原样 === */

/* === 仅激活标签 - 旋转流光效果 === */
.slider-tab .tab-item.active {
  position: relative;
  z-index: 1;
  overflow: visible !important;
  color: #fff !important;
}

/* 旋转流光外层 */
.slider-tab .tab-item.active::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -2px;
  border-radius: var(--theme-border-radius-sm, 6px);
  background: conic-gradient(
    from var(--tab-angle),
    #7c3aed,
    #3b82f6,
    #a855f7,
    #6366f1,
    #818cf8,
    #7c3aed
  );
  animation: tab-spin 3s linear infinite;
  opacity: 0.9;
}

/* 内层填充 */
.slider-tab .tab-item.active::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 2px;
  border-radius: var(--theme-border-radius-sm, 4px);
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.75), rgba(49, 46, 129, 0.7));
}

/* 隐藏原始 .anchor 滑块 */
.slider-tab .anchor {
  opacity: 0 !important;
  pointer-events: none;
}

@keyframes tab-spin {
  to { --tab-angle: 360deg; }
}

/* === 触屏设备回退为静态渐变 === */
@media (hover: none) and (pointer: coarse) {
  .slider-tab .tab-item.active::before {
    animation: none;
    background: linear-gradient(135deg, #7c3aed, #3b82f6, #a855f7);
    opacity: 0.8;
  }
}