/* =============================================================================
   Chino's Blog — Effects & Performance  (v7)
   -----------------------------------------------------------------------------
   #11 二次元「灵动 · 轻松 · 柔和」动效层 + 性能优化。
   原则：
     · 只增强、不打架 —— 仅调整缓动/新增伪元素与关键帧，不重写既有布局。
     · 丝滑 —— 交互统一采用弹簧缓动（--t-spring），配合极短 active 反馈。
     · 柔和 —— 位移/缩放幅度克制，透明度渐变自然。
     · 性能 —— content-visibility 分块渲染离屏卡片，contain 隔离重排/重绘。
     · 无障碍 —— 全部动画在 prefers-reduced-motion 下降级或关闭。
   ============================================================================= */

/* ── 缓动统一：交互面反馈更弹、更顺滑 ─────────────────────── */
.post-card, .cat-card, .save-card, .hero-shortcut,
.admin-card, .stat-card, .img-card, .admin-tag-item {
  transition: transform var(--t-spring), box-shadow var(--t-base),
              border-color var(--t-base), background var(--t-base);
}

/* ── 微交互：按压回弹（丝滑触感） ────────────────────────── */
.btn { transition: transform var(--t-fast), background var(--t-fast),
        color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.btn:active { transform: scale(.96); }
.icon-btn:active, .tb-btn:active, .theme-toggle:active,
.editor-mode-switch button:active { transform: scale(.9); }
.back-to-top:active { transform: scale(.9) translateY(0); }

/* ── 导航链接：悬停时中心生长的下划线（active 用 ::after，不冲突） ── */
.nav-link { will-change: auto; }
.nav-link::before {
  content: ''; position: absolute; left: 50%; bottom: -.375rem;
  width: 0; height: 2px; background: hsl(var(--chino));
  border-radius: 1px; transform: translateX(-50%);
  transition: width var(--t-base); opacity: .55; pointer-events: none;
}
.nav-link:hover::before { width: 1.25rem; }
.nav-link.is-active::before { width: 0; }

/* ── 文章卡封面：悬停轻微推近（呼应 save-cover 的处理） ──────── */
.post-card-cover { overflow: hidden; }
.post-card-cover,
.post-cover-hero img { transition: transform var(--t-slow); }
.post-card:hover .post-card-cover { transform: scale(1.05); }
.post-cover-hero:hover img { transform: scale(1.03); }

/* ── 品牌头像：入场轻盈浮入 + 悬停已有旋转 ──────────────────── */
@keyframes chino-float-in {
  0%   { opacity: 0; transform: translateY(-8px) scale(.9); }
  60%  { opacity: 1; transform: translateY(2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.navbar-brand img { animation: chino-float-in .6s cubic-bezier(.34, 1.56, .64, 1) both; }

/* ── 空态图标：柔和上下漂浮，增添二次元俏皮感 ───────────────── */
@keyframes chino-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.empty-icon svg, .login-logo img { animation: chino-bob 3.2s ease-in-out infinite; }

/* ── 主内容入场：整体轻柔淡入上移一次 ──────────────────────── */
@keyframes chino-page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page > *:first-child,
.page.admin-page .admin-container { animation: chino-page-in .5s ease both; }

/* ── reveal：弹簧缓动 + JS 交错延迟（更灵动） ───────────────── */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1),
              transform .6s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ── 抽屉项目：打开时逐个柔和滑入 ───────────────────────────── */
@keyframes chino-drawer-item { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.mobile-drawer.is-open > a,
.mobile-drawer.is-open > .post-toc {
  animation: chino-drawer-item .4s cubic-bezier(.22, 1, .36, 1) both;
}
.mobile-drawer.is-open > a:nth-child(1) { animation-delay: .03s; }
.mobile-drawer.is-open > a:nth-child(2) { animation-delay: .06s; }
.mobile-drawer.is-open > a:nth-child(3) { animation-delay: .09s; }
.mobile-drawer.is-open > a:nth-child(4) { animation-delay: .12s; }
.mobile-drawer.is-open > a:nth-child(5) { animation-delay: .15s; }
.mobile-drawer.is-open > a:nth-child(n+6) { animation-delay: .18s; }

/* ── 标签 / 标签胶囊：悬停轻微上浮已有，补充丝滑缓动 ─────────── */
.tag { transition: transform var(--t-spring), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.tag:hover { transform: translateY(-1px); }

/* ── 主题切换按钮：悬停时太阳/月亮轻旋 ──────────────────────── */
.theme-toggle:hover .icon-sun { transform: rotate(35deg); }
html.chino-dark .theme-toggle:hover .icon-moon { transform: rotate(-12deg); }

/* =============================================================================
   性能优化
   ============================================================================= */

/* 分块渲染：离屏重复卡片跳过渲染，显著降低首屏/长列表布局与绘制成本。
   contain-intrinsic-size 提供占位高度，避免滚动条跳动。 */
.post-card, .cat-card, .img-card, .img-manager-grid > .img-card, .timeline-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
}
.admin-card { content-visibility: auto; contain-intrinsic-size: auto 120px; }

/* 隔离：卡片内部变化不触发外部重排 */
.post-card, .cat-card, .save-card, .admin-card, .img-card { contain: layout paint; }

/* GPU 合成层提示（仅动画元素，避免滥用） */
.snowflake, .chino-cursor, .chino-trail, .back-to-top { will-change: transform; }

/* =============================================================================
   无障碍降级：尊重系统「减少动态效果」
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .navbar-brand img,
  .empty-icon svg, .login-logo img,
  .page > *:first-child, .page.admin-page .admin-container,
  .mobile-drawer.is-open > a, .mobile-drawer.is-open > .post-toc {
    animation: none !important;
  }
  .reveal { transition: opacity .01s linear !important; transform: none !important; }
  .post-card:hover .post-card-cover,
  .post-cover-hero:hover img { transform: none !important; }
}