/* ===== 统一动效体系（全 App，移动端流畅优先） =====
 *
 * 移动端性能原则（Android WebView）：
 * 1. 动画只使用 transform + opacity —— 走 GPU 合成层，
 *    不触发 layout/paint，避免低端机掉帧、卡顿
 * 2. 时长统一 200~300ms，短促顺滑不拖沓
 * 3. 禁用 transition: all —— 明确列出属性，避免意外触发昂贵的重排
 * 4. prefers-reduced-motion 时全部关闭（尊重系统"减少动态效果"设置）
 */

/* ---- 1. 页面进入过渡（路由切换） ----
 * 覆盖 main.css 的 fadeIn，改为「上移淡入」组合，视觉更顺滑 */
@keyframes mcPageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.page {
  animation: mcPageIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ---- 2. 认证面板切换（登录/注册/重置） ----
 * .auth-panel 由 display:none → block 切换，CSS 动画会自动从头重放 */
@keyframes mcPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.auth-panel {
  animation: mcPanelIn 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ---- 3. 表单校验反馈 ----
 * 失败：红边框常驻 + 抖动提示（抖动只持续 400ms，边框持续提示错误位置）
 * 成功：绿色脉冲一闪 */
.field-error {
  border-color: var(--mc-redstone) !important;
}
@keyframes mcShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
.field-shake {
  animation: mcShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes mcValidPulse {
  0%   { box-shadow: 0 0 0 0 rgba(15, 110, 86, 0.28); }
  100% { box-shadow: 0 0 0 8px rgba(15, 110, 86, 0); }
}
.field-valid {
  animation: mcValidPulse 0.5s ease both;
}

/* ---- 4. 按钮按压反馈（全局） ----
 * 覆盖 components.css 的 transition:all，改为明确属性；
 * :active 用 scale 缩放（GPU 合成）+ 轻微透明度 */
.btn {
  transition: transform 0.12s ease, opacity 0.12s ease,
              background-color 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, color 0.15s ease;
}
.btn:active {
  transform: scale(0.97);
  opacity: 0.9;
}
/* 次要按钮：ghost 背景透明，spinner 用主题色（主按钮白 spinner 已适配） */
.auth-send-btn .loading-spinner {
  border-color: var(--mc-border);
  border-top-color: var(--mc-grass);
}

/* ---- 5. 列表卡片 stagger 进入（js/utils/motion.js 分配延迟） ---- */
@keyframes mcCardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.stagger-item {
  opacity: 0;
  animation: mcCardIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ---- 6. Toast 动效增强 ----
 * 已在 components.css 定义 show/hide（opacity + translateY），
 * 这里补 will-change 提示合成层、退出时轻微缩放更立体 */
.toast {
  will-change: transform, opacity;
}
.toast-hide {
  transform: translateY(-8px) scale(0.97);
}

/* ---- 7. 弹窗/加载指示动效 ----
 * confirm 弹窗：遮罩淡入、对话框缩放+上移，曲线更顺滑 */
.confirm-overlay {
  transition: opacity 0.2s ease;
}
.confirm-dialog {
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}

/* ---- 8. 尊重系统「减少动态效果」设置：全部关闭 ----
 * Android 无障碍/省电设置开启后，WebView 不再播放动画，避免眩晕与耗电 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 9. 弹性滑动胶囊导航：跟随指示器弹簧缓动 ----
 * 指示器位移用 JS 设置 transform，CSS 负责过渡曲线：
 * cubic-bezier(0.34, 1.56, 0.64, 1) = 轻微过冲回弹（弹簧效果）
 * 仅使用 transform（GPU 合成），不触发 layout/paint */
.tab-indicator {
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
              width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
  .tab-indicator {
    transition: transform 0.01ms, width 0.01ms;
  }
}