/* =============================================================================
   电商 App 产品规划演示原型 · fluid.css
   内容：流体胶囊形变（底部 Tab 指示器 / 分段控件 / chips / SKU 胶囊 / 步进器）
   形变原理：容器负责位移，内层负责拉伸挤压 + border-radius 动态变化，
             位移用 --ease-fluid，回弹用 --ease-jelly，形成「液态迁移」观感
   ========================================================================== */

/* ---------- 1. 底部 Tab 流体指示器 ---------- */
.tabbar { overflow: hidden; }

.tab-pill {
  position: absolute;
  top: 7px;
  left: 0;
  height: 44px;
  width: 0;
  border-radius: var(--r-pill);
  transform: translateX(0);
  pointer-events: none;
  z-index: 1;
  transition: transform var(--dur-base) var(--ease-fluid),
              width var(--dur-base) var(--ease-fluid),
              border-radius var(--dur-base) var(--ease-jelly);
}
.tab-pill .pill-inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--grad-cta);
  box-shadow: 0 8px 18px rgba(255, 59, 92, 0.3);
  transform: scale(1);
  transition: transform var(--dur-base) var(--ease-jelly),
              border-radius var(--dur-base) var(--ease-jelly),
              box-shadow var(--dur-base) var(--ease-fluid);
}
/* 迁移中：横向拉伸 + 纵向压扁 + 圆角流体化 */
.tab-pill.is-stretch .pill-inner {
  transform: scaleX(1.22) scaleY(0.82);
  border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
}
/* 落位：果冻过冲回弹 */
.tab-pill.is-settle .pill-inner {
  animation: pillSettle 460ms var(--ease-jelly);
}
@keyframes pillSettle {
  0% { transform: scaleX(1.22) scaleY(0.82); border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%; }
  38% { transform: scaleX(0.9) scaleY(1.1); border-radius: 56% 44% 46% 54% / 42% 58% 46% 54%; }
  66% { transform: scaleX(1.08) scaleY(0.95); border-radius: 48% 52% 52% 48% / 52% 48% 54% 46%; }
  100% { transform: scaleX(1) scaleY(1); border-radius: var(--r-pill); }
}
/* 胶囊内部流光 */
.tab-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%);
  background-size: 260% 100%;
  animation: gradFlow 3.4s linear infinite;
  pointer-events: none;
}

/* 内容区在 Tab 切换时的淡入（不硬跳） */
.fade-swap { animation: fadeSwap var(--dur-base) var(--ease-fluid) both; }
@keyframes fadeSwap {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 2. 分段控件（日期筛选 / 订单状态） ---------- */
.capsule-group {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.capsule-group .capsule-ind {
  position: absolute;
  top: 3px;
  left: 0;
  height: calc(100% - 6px);
  width: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-fluid),
              width var(--dur-base) var(--ease-fluid),
              border-radius var(--dur-base) var(--ease-jelly);
  pointer-events: none;
  z-index: 1;
}
.capsule-group.is-stretch .capsule-ind { border-radius: 42% 58% 54% 46% / 56% 44% 58% 42%; }
.capsule-group.is-stretch .capsule-ind::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--grad-data);
  opacity: 0.18;
  filter: blur(4px);
}
.capsule-group .cap {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-fluid);
}
.capsule-group .cap.is-active { color: var(--text); font-weight: 800; }
.capsule-group .cap:active { transform: scale(0.95); }

/* 可滚动的胶囊组（Tab 多的时候） */
.capsule-scroll { overflow-x: auto; padding: 0 12px 2px; }
.capsule-scroll .capsule-group { display: inline-flex; }

/* ---------- 3. chips 点击形变 + 选中流光边框 ---------- */
.chip.is-morph { animation: chipMorph var(--dur-slow) var(--ease-jelly); }
@keyframes chipMorph {
  0% { border-radius: var(--r-pill); }
  35% {
    border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
    transform: scale(0.94, 1.08);
  }
  68% {
    border-radius: 58% 42% 46% 54% / 44% 56% 48% 52%;
    transform: scale(1.04, 0.97);
  }
  100% { border-radius: var(--r-pill); transform: scale(1); }
}
.chip.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, var(--c-brand), var(--c-accent), var(--c-cyan), var(--c-brand));
  background-size: 300% 100%;
  animation: gradFlow 3s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- 4. SKU 选择胶囊 ---------- */
.sku-group { display: flex; flex-wrap: wrap; gap: 8px; }
.sku-chip {
  position: relative;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--dur-base), background var(--dur-base),
              border-color var(--dur-base), border-radius var(--dur-slow) var(--ease-jelly),
              transform var(--dur-fast) var(--ease-snap);
}
.sku-chip:active { transform: scale(0.96); }
.sku-chip.is-active {
  background: rgba(255, 77, 79, 0.1);
  border-color: var(--c-brand);
  color: var(--c-brand);
}
.sku-chip.is-disabled {
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--border);
  text-decoration: line-through;
  pointer-events: none;
  opacity: 0.65;
}
.sku-chip.is-morph { animation: chipMorph var(--dur-slow) var(--ease-jelly); }

/* ---------- 5. 数量步进器（胶囊） ---------- */
.stepper {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
  border: 1px solid var(--border);
}
.stepper button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  transition: transform var(--dur-fast) var(--ease-snap), background var(--dur-base);
}
.stepper button:active { transform: scale(0.82); background: var(--surface-2); }
.stepper button svg { width: 14px; height: 14px; }
.stepper .num {
  min-width: 34px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-base) var(--ease-jelly);
}
.stepper .num.is-bump { animation: badgeBump var(--dur-slow) var(--ease-jelly); }
.stepper button[disabled] { opacity: 0.4; pointer-events: none; }

/* ---------- 6. 流体进度条（结算步骤 / 库存条） ---------- */
.fluid-bar {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.fluid-bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--grad-cta);
  transition: width var(--dur-page) var(--ease-fluid);
  position: relative;
}
.fluid-bar > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  background-size: 200% 100%;
  animation: gradFlow 1.8s linear infinite;
}
.fluid-bar.is-thin { height: 4px; }

/* 结算步骤条 */
.step-track { display: flex; align-items: center; gap: 6px; }
.step-track .st { flex: 1 1 0; height: 3px; border-radius: var(--r-pill); background: var(--surface-3); transition: background var(--dur-slow); }
.step-track .st.is-done { background: var(--grad-cta); }

/* ---------- 7. 流体商品图容器（详情页轮播圆角） ---------- */
.fluid-media {
  border-radius: 0 0 26px 26px;
  transition: border-radius var(--dur-slow) var(--ease-jelly);
}
.fluid-media.is-morph { border-radius: 0 0 40% 60% / 0 0 12% 8%; }