/* ============================================
   炸单了 · 微立体视觉增强
   背景纹理 / 卡片悬浮 / 按压反馈 / 交错进场
   ============================================ */

/* ─── 1. 背景网格 + 双光晕 ─── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.01) 39px, rgba(255,255,255,0.01) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.01) 39px, rgba(255,255,255,0.01) 40px),
    radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(167,139,250,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 800px 400px at 90% 90%, rgba(34,211,238,0.04) 0%, transparent 55%);
}

/* ─── 2. 卡片微悬浮 ─── */
.card,
.order-card,
.stat-card,
.guard-card {
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover,
.order-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(167,139,250,0.12);
}
.stat-card:hover,
.guard-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* ─── 3. 按钮按压反馈 ─── */
.btn,
.btn-primary,
.btn-suc,
.btn-danger,
.btn-outline,
.btn-info,
.btn-pri,
.btn-ghost {
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
}
.btn:active,
.btn-primary:active,
.btn-suc:active,
.btn-danger:active,
.btn-outline:active,
.btn-info:active,
.btn-pri:active,
.btn-ghost:active {
  transform: scale(0.96);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ─── 4. 链接 hover ─── */
a { transition: color 0.2s ease, opacity 0.2s ease; }

/* ─── 5. 头像微立体 + hover 放大 ─── */
.avatar-img,
.gc-avatar-wrap img,
[class*="avatar-"] {
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.avatar-img:hover,
.gc-avatar-wrap:hover img,
[class*="avatar-"]:hover {
  transform: scale(1.06);
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.4);
}

/* ─── 6. 图片/缩略图 hover ─── */
.pw-thumb img,
.order-proof-img {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pw-thumb:hover img,
.order-proof-img:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* ─── 7. 底部导航微立体 + 选中上浮 ─── */
.mobile-nav {
  box-shadow: 0 -1px 0 rgba(255,255,255,0.04) inset, 0 -2px 12px rgba(0,0,0,0.3);
}
.mobile-nav .nav-btn {
  transition: transform 0.2s ease, color 0.2s ease;
}
.mobile-nav .nav-btn.active {
  transform: translateY(-1px);
}

/* ─── 8. Modal 弹入 ─── */
.modal-overlay {
  animation: fadeIn 0.15s ease;
}
.modal-overlay .modal-card,
.modal-overlay .modal {
  animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.94) translateY(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ─── 9. Toast 增强滑入 ─── */
.toast {
  animation: toastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── 10. 列表交错进场 ─── */
.anim-enter {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.anim-enter.visible {
  opacity: 1;
  transform: translateY(0);
}