/* ============================================
   works-filter.css — 筛选栏
   ============================================ */

/* ---------- 基础样式 ---------- */
.filter-bar {
  padding: 0 48px;
  max-width: 1400px;
  margin: 0 auto 48px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-btn {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 24px;
  border-radius: 100px;
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: inherit;
}
.filter-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  border-color: rgba(0, 0, 0, 0.08);
}
.filter-btn.active {
  background: var(--brand);
  color: #1d1d1f;
  border-color: var(--brand);
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(255, 192, 0, 0.3);
}
.filter-btn.active:hover {
  background: #ffca1a;
}

/* ──────────── 单行标签流 + 右侧渐隐收纳────────────────── */
#filterBar {
  display: flex;
}

.filter-scroll {
  min-width: 0;
  position: relative;
  /* 容器宽度收拢 / 放开的平滑过渡 */
  transition: max-width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 行高逐帧跟随：JS 在动画期间以 rAF 把筛选栏当前实际高度
   写成内联 height（内容高度变化本身不产生过渡，只有这里
   写入的数值变化才会走这条 0.55s 的平滑曲线）。
   收起时它把"多行 → 单行"的塌缩 растянуть 成整场动画的长度；
   动画结束后 JS 清空内联高度，恢复内容自适应。
   ⚠️ 只过渡 height，不加 overflow:hidden —— 裁切溢出标签
      的活儿仍由 mask 渐隐区负责，overflow 会破坏 mask 定位 */
.filter-scroll {
  transition:
    max-width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 渐隐区锚定在容器右缘：退场标签滑入此处逐渐透明（无背景色块）。
   JS 收拢容器时已为切换按钮预留 30px 实色余量，按钮不会被擦到 */
.filter-scroll.collapsed {
  -webkit-mask-image: linear-gradient(
    to right,
    #000 calc(100% - 0px),
    transparent
  );
  mask-image: linear-gradient(to right, #000 calc(100% - 0px), transparent);
}

.filter-track {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 100%;
}

/* 收起态：禁止换行 —— 切换按钮永远留在标签所在的那一行 */
.filter-scroll.collapsed .filter-track {
  flex-wrap: nowrap;
}

/* 展开态：标签恰好占满一行时，切换按钮可换到下一行行首 */
.filter-track:not(.is-collapsed) {
  flex-wrap: wrap;
}

/* 标签位移 + 淡出 + margin 收拢；transition-delay 由 JS 逐个写入形成波浪 */
.filter-track .filter-btn {
  flex: 0 0 auto;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease,
    margin-left 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.filter-track .filter-btn.filter-hidden {
  transform: translateX(26px);
  opacity: 0;
  pointer-events: none;
  /* ⚠️ 不要在这里写百分比负 margin！
     margin 的 % 参照的是父容器宽度而非自身宽度，
     会把按钮拽到整条流最左侧、垫到可见按钮底下。
     精确像素值由 JS 实测后写入内联样式 */
}

/* ── 展开 / 收起切换按钮：与标签按钮同高，仅放箭头 ── */
.filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  width: 44px;
}

/* hidden 属性的默认 display:none 会被 .filter-toggle 的
   display:inline-flex 覆盖，这里强制夺回控制权 */
#filterBar [hidden] {
  display: none !important;
}

.toggle-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 展开状态：箭头翻转为左 */
.filter-toggle[aria-expanded="true"] .toggle-chevron {
  transform: rotate(180deg);
}