/* ==========================================================================
   小花社区 · 动效层 motion.css
   目标：Telegram 级丝滑 —— 只动 transform / opacity / filter（GPU 合成层），
   缓动统一走 iOS 曲线，弹簧感不过冲。绝不触发 layout。
   ========================================================================== */

/* ---------- 路由切换 ----------
   ⚠️ 刻意不用 Vue 的 <transition>：实测它的 transitionend 检测不可靠，
   离场元素会永久残留（.content 里堆叠多个不消失的整页容器，把内容一路往下推）。
   改为「带 key 的宿主容器 + CSS 入场动画」：key 变化即换新节点，旧节点立即移除，
   既不泄漏也不依赖 transitionend。 */
@keyframes viewIn {
  0%   { opacity: 0; transform: translate3d(0, 16px, 0) scale(.988); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
/* ⚠️ 整页入场刻意不用 filter: blur() —— 大面积模糊每帧都要重新栅格化整棵子树，
   实测把路由切换从 60fps 打到 36fps。对焦感交给 scale + opacity 就够了。 */
.view-host { animation: viewIn .46s var(--ease-ios) both; will-change: transform, opacity; }

/* ---------- 列表错峰浮现（.rise + --i）---------- */
@keyframes riseIn {
  0%   { opacity: 0; transform: translate3d(0, 16px, 0) scale(.985); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
/* 同理：列表项入场也不做 blur（列表可能十几行，模糊代价叠加起来很可观） */
.rise { animation: riseIn .58s var(--ease-ios) backwards; animation-delay: calc(var(--i, 0) * 46ms); }

/* 卡片浮现（进视口触发，app.js 加 .in） */
.rv { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .6s var(--ease-out), transform .6s var(--ease-ios); }
.rv.in { opacity: 1; transform: none; }

/* ---------- 侧边栏抽屉遮罩已在 app.css；这里做抽屉内条目错峰 ---------- */
@keyframes drawerIn {
  0% { opacity: 0; transform: translate3d(-14px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0,0,0); }
}
body.drawer .nav-item, body.drawer .brand, body.drawer .user-card {
  animation: drawerIn .42s var(--ease-ios) backwards;
}
body.drawer .brand { animation-delay: .04s; }
body.drawer .nav-item:nth-child(2) { animation-delay: .07s; }
body.drawer .nav-item:nth-child(3) { animation-delay: .10s; }
body.drawer .nav-item:nth-child(4) { animation-delay: .13s; }
body.drawer .nav-item:nth-child(5) { animation-delay: .16s; }
body.drawer .nav-item:nth-child(6) { animation-delay: .19s; }
body.drawer .nav-item:nth-child(7) { animation-delay: .22s; }
body.drawer .user-card { animation-delay: .26s; }

/* ---------- 顶栏标题切换（内容变化时轻微上浮）---------- */
@keyframes titleIn { 0% { opacity: 0; transform: translate3d(0,8px,0); } 100% { opacity: 1; transform: none; } }
.topbar h2, .topbar .sub { animation: titleIn .5s var(--ease-ios) both; }
.topbar .sub { animation-delay: .05s; }

/* ---------- 交互反馈：按压/悬停 ---------- */
.press { transition: transform var(--d1) var(--ease-spring); }
.press:active { transform: scale(.955); }

/* 点赞的心形弹跳 */
@keyframes likePop {
  0% { transform: scale(1); } 35% { transform: scale(1.42); }
  62% { transform: scale(.9); } 100% { transform: scale(1); }
}
.like-on { animation: likePop .52s var(--ease-spring); }

/* 数字变化跳动 */
@keyframes numPop { 0% { transform: translate3d(0,-6px,0); opacity: 0; } 100% { transform: none; opacity: 1; } }
.num-pop { animation: numPop .42s var(--ease-ios); }

/* ---------- 模态 / 面板 ---------- */
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.92) translate3d(0,10px,0); filter: blur(8px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.pop-enter-active { animation: popIn .44s var(--ease-spring); }
.pop-leave-active { transition: opacity var(--d2) var(--ease-ios), transform var(--d2) var(--ease-ios); }
.pop-leave-to { opacity: 0; transform: scale(.96); }

/* ---------- toast 进出 ---------- */
@keyframes toastIn { 0% { opacity: 0; transform: translate3d(0,20px,0) scale(.94); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: blur(0); } }
.toast { animation: toastIn .4s var(--ease-spring); }

/* ---------- 主题切换时的整体过渡（避免突变）---------- */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .5s var(--ease-ios), color .5s var(--ease-ios),
              border-color .5s var(--ease-ios), box-shadow .5s var(--ease-ios) !important;
}

/* ---------- 降级：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .rise, .rv, .view-host,
  body.drawer .nav-item, body.drawer .brand, body.drawer .user-card { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}