/* ============================================================
   交互升级层（追加在原有样式之后，覆盖而不破坏）
   原则：只用 transform / opacity / box-shadow 做动效，
        保证 iOS 上 60fps，且不引起布局重排。
   ============================================================ */

:root {
  --spring: cubic-bezier(.22, 1.2, .36, 1);
  --ease: cubic-bezier(.2, .8, .3, 1);
}

/* ---------- 1. 所有可点元素：统一过渡 + 按下收缩 ---------- */

button,
.chip,
.cal-cell,
.row,
.cake-pick button,
.segmented button,
.stepper button {
  transition:
    transform .14s var(--spring),
    background-color .18s var(--ease),
    border-color .18s var(--ease),
    box-shadow .18s var(--ease),
    color .18s var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:active,
.chip:active,
.cake-pick button:active,
.segmented button:active {
  transform: scale(.94);
}

/* 主按钮：按下时沉下去一点，阴影收敛 */
.btn:active {
  transform: scale(.965) translateY(1px);
  box-shadow: 0 2px 6px rgba(51, 37, 31, .14);
}
.btn:disabled:active {
  transform: none;
  box-shadow: 0 4px 14px rgba(51, 37, 31, .18);
}

/* ---------- 2. 商品行 / 列表行：按一下整行收缩 ---------- */

.row.pressed {
  transform: scale(.975);
  background: var(--accent-soft);
}

/* ---------- 3. 加减器：按下回弹 + 数字弹跳 ---------- */

.stepper button {
  transition: transform .16s var(--spring), background-color .16s var(--ease), border-color .16s var(--ease);
}
.stepper button:active {
  transform: scale(.86);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.stepper .qty.pop {
  animation: qtyPop .34s var(--spring);
}
@keyframes qtyPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.38); color: var(--accent); }
  100% { transform: scale(1); }
}

/* ---------- 4. 选中态：chip / 分段控件 有「落位」感 ---------- */

.chip.on,
.segmented button.on,
.cake-pick button.on {
  animation: settle .28s var(--spring);
}
@keyframes settle {
  0%   { transform: scale(.9); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ---------- 5. 弹层：上滑 + 背景淡入 ---------- */

.sheet-mask {
  animation: maskIn .2s var(--ease);
}
@keyframes maskIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sheet {
  animation: sheetIn .34s var(--spring);
}
@keyframes sheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ---------- 6. Toast：从下往上浮 ---------- */

.toast {
  animation: toastIn .26s var(--spring);
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 12px) scale(.94); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* ---------- 7. 底部导航：点按图标弹一下 ---------- */

.tab .ico {
  transition: transform .22s var(--spring);
}
.tab:active .ico {
  transform: scale(.82);
}
.tab.on .ico {
  transform: translateY(-1px) scale(1.08);
}
.tab-main:active .ico {
  transform: scale(.88);
}

/* ---------- 8. 日历格：按下去有「按压感」 ---------- */

.cal-cell:active {
  transform: scale(.9);
}
.cal-cell.has:active {
  background: var(--accent);
  color: #FFF8EE;
}

/* ---------- 9. 输入框：聚焦时柔和光圈 ---------- */

input, select, textarea {
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(180, 121, 74, .16);
  background: #FFFCF7;
}

/* ---------- 10. 卡片 / 徽章：细节打磨 ---------- */

.card {
  transition: box-shadow .22s var(--ease), transform .22s var(--spring);
}

.stat .v,
.row .amount,
.hero-card .amount {
  font-variant-numeric: tabular-nums;
}

.badge {
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

/* 顶栏按钮 */
.ghost-btn:active {
  transform: scale(.94);
  background: var(--accent-soft);
}

/* ---------- 11. 购物车徽章 ---------- */

.tab .ico {
  position: relative;
}

.badge-count {
  position: absolute;
  top: -5px;
  right: -9px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  line-height: 17px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
  box-shadow: 0 2px 5px rgba(51, 37, 31, .25);
  animation: badgePop .32s var(--spring);
  pointer-events: none;
}

@keyframes badgePop {
  from { transform: scale(0); }
  60%  { transform: scale(1.25); }
  to   { transform: scale(1); }
}

/* ---------- 12. 减少动效偏好：尊重系统设置 ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  button:active,
  .btn:active,
  .row.pressed {
    transform: none;
  }
}