/* ============================================================
   RetailLib 动效质感层 motion.css（2026-08-29）
   —— 仅动效/交互反馈升级，颜色与结构零改动（四色系统不变）
   —— 依据 apple-design：响应即时 / 临界阻尼默认 / 轻回弹限动量交互 / 减少动效降级
   —— 本文件须在 user-theme.css 之后加载（覆盖其「扁平无毛玻璃」），删本文件 + 3 处 <link> 即回滚
   ============================================================ */

/* ---------- 动效令牌（映射 apple 阻尼/响应参数） ---------- */
:root {
  /* 默认 UI：临界阻尼（damping≈1.0，无回弹，平滑落定） */
  --motion-ease: cubic-bezier(0.25, 0.9, 0.3, 1);
  /* 物理/入场：轻回弹（damping≈0.8，仅用于弹层/首屏入场等带动量的场景） */
  --motion-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
}

/* ============================================================
   1. 顶栏 / 底栏 半透明（同色系酒红 #720001，仅通透；毛玻璃在支持环境启用）
   ============================================================ */
.navbar {
  background: rgba(114, 0, 1, 0.84);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.app-tabbar {
  background: rgba(114, 0, 1, 0.92);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
/* 不支持 backdrop-filter 的浏览器：退回近实色（仍酒红） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar { background: rgba(114, 0, 1, 0.97); }
  .app-tabbar { background: rgba(114, 0, 1, 0.97); }
}

/* ============================================================
   2. 响应——按压即时反馈（pointer-down 即出，不等 click/释放）
   ============================================================ */
/* 按钮：按压微缩；释放走临界阻尼落定。保留原 hover 抬升/描边行为 */
.btn {
  transition:
    transform 0.16s var(--motion-ease),
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.25s ease;
}
.btn:active {
  transform: scale(0.95);
}
.btn:active { transition-duration: 0.08s; }

/* 策略卡片 / 工具卡：按压微缩（区别于 hover 描边） */
.strategy-card {
  transition:
    transform 0.15s var(--motion-ease),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.strategy-card:active {
  transform: scale(0.985);
}
.tool-card:active {
  transform: scale(0.97);
}

/* 底部 Tab：按压轻缩（含中心「策略+」） */
.app-tab {
  transition: color 0.2s ease, transform 0.15s var(--motion-ease);
}
.app-tab:active {
  transform: scale(0.93);
}
.app-tab-add:active {
  transform: scale(0.92);
}

/* 卡片删除键 / 表单多空勾选：按压反馈 */
.strategy-delete {
  transition: transform 0.12s var(--motion-ease), color 0.2s ease, background 0.2s ease;
}
.strategy-delete:active {
  transform: scale(0.88);
}
.side-opt:active {
  opacity: 0.7;
}
.section-tag:active {
  opacity: 0.65;
}
.empty-add {
  transition: transform 0.18s var(--motion-spring), box-shadow 0.18s ease;
}

/* ============================================================
   3. 入场动画（加载即动，轻抬升；禁用时淡出即可）
   ============================================================ */
@keyframes rl-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* 策略看板：卡片逐一入场（JS 重渲染也会重播，符合「列表注入」观感） */
.strategy-card {
  animation: rl-rise 0.45s var(--motion-ease) backwards;
}
.strategy-card:nth-child(2)  { animation-delay: 60ms; }
.strategy-card:nth-child(3)  { animation-delay: 120ms; }
.strategy-card:nth-child(4)  { animation-delay: 180ms; }
.strategy-card:nth-child(5)  { animation-delay: 240ms; }
.strategy-card:nth-child(6)  { animation-delay: 300ms; }
.strategy-card:nth-child(7)  { animation-delay: 360ms; }
.strategy-card:nth-child(8)  { animation-delay: 420ms; }
.strategy-card:nth-child(n+9) { animation-delay: 480ms; }

/* 首页首屏：Hero 区块逐元素抬升（轻回弹） */
.hero-badge,
.hero-title,
.hero-desc,
.hero-actions,
.hero-stats {
  animation: rl-rise 0.5s var(--motion-spring) backwards;
}
.hero-title   { animation-delay: 70ms; }
.hero-desc    { animation-delay: 140ms; }
.hero-actions { animation-delay: 210ms; }
.hero-stats   { animation-delay: 280ms; }

/* 首页下区块：轻入场 */
.compare,
.cta-inner,
.footer-inner {
  animation: rl-rise 0.5s var(--motion-ease) backwards;
}
.cta-inner     { animation-delay: 60ms; }
.footer-inner  { animation-delay: 40ms; }

/* 表单页：各分区逐一入场 */
.form-section {
  animation: rl-rise 0.4s var(--motion-ease) backwards;
}
.form-section:nth-child(2) { animation-delay: 60ms; }
.form-section:nth-child(3) { animation-delay: 120ms; }
.form-section:nth-child(4) { animation-delay: 180ms; }
.form-section:nth-child(n+5) { animation-delay: 240ms; }

/* 看板头部 */
.board-header {
  animation: rl-rise 0.4s var(--motion-ease) backwards;
}

/* ============================================================
   4. 弹层 / 提示弹簧质感（damping≈0.8 轻回弹，映射 apple 弹层）
   ============================================================ */
.auth-modal {
  animation: auth-pop 0.3s var(--motion-spring) backwards;
}

/* ============================================================
   5. 减少动态偏好：所有动效降级为瞬变（无障碍）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}