/* ============================================================
   动效层 · Sheet / Toast / 页面转场 / 微交互
   全部走 transform + opacity，避免触发重排，保证 60fps 跟手
   ============================================================ */

/* ---------- 页面转场（标签切换：淡入上移；推入详情：右滑） ---------- */
.page-enter { animation: pageFade var(--d3) var(--ease-out) both; }
@keyframes pageFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.push-enter { animation: pushIn var(--d3) var(--ease-out) both; }
.push-exit  { animation: pushOut var(--d2) var(--ease-in-out) both; }
@keyframes pushIn  { from { opacity: .4; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes pushOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-16px); } }

/* 列表逐项浮现（错峰） */
.stagger > * { animation: riseIn var(--d3) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 24ms; }
.stagger > *:nth-child(3) { animation-delay: 48ms; }
.stagger > *:nth-child(4) { animation-delay: 72ms; }
.stagger > *:nth-child(5) { animation-delay: 96ms; }
.stagger > *:nth-child(6) { animation-delay: 120ms; }
.stagger > *:nth-child(7) { animation-delay: 144ms; }
.stagger > *:nth-child(8) { animation-delay: 168ms; }
.stagger > *:nth-child(n+9) { animation-delay: 192ms; }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Sheet（底部弹层，iOS） ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: var(--z-sheet-backdrop);
  background: rgba(27, 24, 21, .38);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--d3) var(--ease);
}
.sheet-backdrop.is-open { opacity: 1; }

.sheet {
  position: fixed; z-index: var(--z-sheet);
  left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: 100%; max-width: var(--app-max);
  max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--paper-2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-xl);
  transition: transform var(--d4) var(--ease-spring);
  will-change: transform;
  overflow: hidden;
}
.sheet.is-open { transform: translate(-50%, 0); }
@media (min-width: 768px) {
  /* 桌面：居中卡片式弹层 */
  .sheet {
    bottom: auto; top: 50%; transform: translate(-50%, -46%) scale(.96);
    max-width: 520px; max-height: 86vh; max-height: 86dvh;
    border-radius: var(--r-xl); opacity: 0;
    transition: transform var(--d3) var(--ease-spring), opacity var(--d3) var(--ease);
  }
  .sheet.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.sheet__grabber { width: 38px; height: 5px; border-radius: var(--r-full); background: var(--line-2); margin: var(--sp-2) auto 0; flex: 0 0 auto; }
@media (min-width: 768px) { .sheet__grabber { display: none; } }
.sheet__hd {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-3);
  flex: 0 0 auto; border-bottom: 1px solid var(--line);
}
.sheet__title { flex: 1 1 auto; min-width: 0; font-family: var(--font-serif); font-size: var(--fs-title3); font-weight: var(--fw-bold); letter-spacing: .02em; }
.sheet__sub { font-size: var(--fs-footnote); color: var(--text-3); font-weight: var(--fw-regular); font-family: var(--font-sans); margin-top: 2px; letter-spacing: 0; }
.sheet__bd { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--sp-4); }
.sheet__ft { flex: 0 0 auto; padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-bottom)); border-top: 1px solid var(--hairline); background: var(--paper-2); display: flex; gap: var(--sp-3); }
.sheet__ft .btn { flex: 1 1 0; }
.sheet--full { max-height: 100vh; max-height: 100dvh; height: 100dvh; border-radius: 0; }
@media (min-width: 768px) { .sheet--full { height: auto; max-height: 86dvh; border-radius: var(--r-xl); } }

/* 确认弹窗（居中，用于 L2/L3 与危险操作） */
.dialog {
  position: fixed; z-index: var(--z-sheet);
  left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9);
  width: calc(100% - 48px); max-width: 380px;
  background: var(--paper-3); border-radius: var(--r-lg);
  box-shadow: var(--sh-xl); opacity: 0;
  transition: transform var(--d3) var(--ease-spring), opacity var(--d2) var(--ease);
  overflow: hidden;
}
.dialog.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.dialog__bd { padding: var(--sp-6) var(--sp-5) var(--sp-4); text-align: center; }
.dialog__title { font-family: var(--font-serif); font-size: var(--fs-title3); font-weight: var(--fw-bold); }
.dialog__msg { font-size: var(--fs-subhead); color: var(--text-2); margin-top: var(--sp-2); line-height: var(--lh-relaxed); }
.dialog__ft { display: flex; border-top: 1px solid var(--line); }
.dialog__btn { flex: 1 1 0; min-height: 50px; border: 0; background: none; cursor: pointer; font-size: var(--fs-callout); font-weight: var(--fw-semi); color: var(--accent); transition: background var(--d1); }
.dialog__btn:active { background: var(--sunk); }
.dialog__btn + .dialog__btn { border-left: 1px solid var(--line); }
.dialog__btn--danger { color: var(--danger); }
.dialog__btn--primary { color: var(--ink-900); font-weight: var(--fw-bold); }

/* ---------- Toast ---------- */
#toast-root { position: fixed; z-index: var(--z-toast); left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-4)); width: calc(100% - 32px); max-width: 420px; display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(42, 37, 28, .94);
  color: #f7f3ea; border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  font-size: var(--fs-subhead); font-weight: var(--fw-medium);
  transform: translateY(20px) scale(.96); opacity: 0;
  animation: toastIn var(--d3) var(--ease-spring) forwards;
  pointer-events: auto;
}
.toast.is-out { animation: toastOut var(--d2) var(--ease-in-out) forwards; }
.toast__icon { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; }
.toast__icon svg { width: 20px; height: 20px; }
.toast__msg { flex: 1 1 auto; min-width: 0; line-height: var(--lh-snug); }
.toast--success .toast__icon { color: #8fd6a0; }
.toast--error .toast__icon { color: #f0a79c; }
.toast--info .toast__icon { color: #a9c6d6; }
.toast--warning .toast__icon { color: #e9c98a; }
@keyframes toastIn { to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateY(12px) scale(.96); opacity: 0; } }

/* ---------- 微交互 ---------- */
/* 加菜飞入动效：一个小圆点从菜品飞向购物车角标 */
.fly-dot {
  position: fixed; z-index: var(--z-fab); width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--cinnabar), var(--cinnabar-deep));
  box-shadow: var(--sh-brand); pointer-events: none;
  display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700;
}
/* 角标弹跳 */
.bump { animation: bump var(--d3) var(--ease-spring); }
@keyframes bump { 0% { transform: scale(1);} 40% { transform: scale(1.28);} 100% { transform: scale(1);} }

/* 数字滚动变化高亮 */
.flash { animation: flash var(--d4) var(--ease-out); }
@keyframes flash { 0% { background: var(--gold-soft); } 100% { background: transparent; } }

/* 按下态通用 */
.pressable { transition: transform var(--d1) var(--ease-spring), opacity var(--d2); cursor: pointer; }
.pressable:active { transform: scale(.97); opacity: .9; }

/* 淡入 */
.fade-in { animation: fadeIn var(--d3) var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 骨架脉冲（用于卡片加载） */
.pulse-soft { animation: pulseSoft 1.6s var(--ease-in-out) infinite; }
@keyframes pulseSoft { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* 同步指示（顶栏小圆环） */
.sync-ring { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--brand); animation: spin .8s linear infinite; }

/* 抽屉式金额面板滑入 */
.slide-up-in { animation: slideUpIn var(--d3) var(--ease-out) both; }
@keyframes slideUpIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }