/* ============================================================
 * Nexus 全站动效系统（Material Design 3 Motion）
 * ------------------------------------------------------------
 * 设计原则：
 *  - 时长/曲线对齐 MD3：短 150ms / 中 250ms / 长 400ms，
 *    standard 曲线 cubic-bezier(.2,0,0,1)，emphasized 曲线 cubic-bezier(.05,.7,.1,1)
 *  - 滚动入场保持「纯 opacity 淡入」（亚克力/渐变背景上无拖影），
 *    位移类动效仅用于 hover/点击等交互瞬间（非滚动），无合成层残留
 *  - 尊重 prefers-reduced-motion（全局已关闭动画时长）
 * ============================================================ */
:root {
  --nexus-motion-fast: 150ms;
  --nexus-motion-base: 250ms;
  --nexus-motion-slow: 400ms;
  --nexus-motion-ease: cubic-bezier(.2, 0, 0, 1);
  --nexus-motion-emph: cubic-bezier(.05, .7, .1, 1);
  --nexus-motion-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- 1. 通用交互反馈（MD3 state layer + 轻量反馈） ---------- */
.icon-btn,
.btn,
.seg-btn,
.mc-ico,
.player-ctrl,
.player-vol,
.player-plist,
.player-lyric,
.nexus-search-entry,
.drawer-toggle {
  transition: background-color var(--nexus-motion-fast) var(--nexus-motion-ease),
    color var(--nexus-motion-fast) var(--nexus-motion-ease),
    transform var(--nexus-motion-fast) var(--nexus-motion-ease),
    box-shadow var(--nexus-motion-base) var(--nexus-motion-ease),
    opacity var(--nexus-motion-fast) ease;
}
.icon-btn:active,
.btn:active,
.seg-btn:active,
.mc-ico:active {
  transform: scale(.94);
}
.icon-btn:hover,
.seg-btn:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 10%, transparent);
}

/* 主按钮 hover 提升 */
.btn-primary:hover,
.mc-submit:hover,
.nexus-pager .pager-btn:hover {
  box-shadow: 0 2px 6px color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 32%, transparent);
  filter: brightness(1.05);
}
.btn-primary:active,
.mc-submit:active {
  filter: brightness(.96);
}

/* 左侧导航项：hover 背景 state layer + 图标微移 */
.nav-link {
  transition: background-color var(--nexus-motion-fast) var(--nexus-motion-ease),
    color var(--nexus-motion-fast) var(--nexus-motion-ease);
}
.nav-link:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 10%, transparent);
}
.nav-link i {
  transition: transform var(--nexus-motion-fast) var(--nexus-motion-ease),
    color var(--nexus-motion-fast) ease;
}
.nav-link:hover i {
  transform: scale(1.12);
}
.nav-link.active {
  background: color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 14%, transparent);
}

/* ---------- 2. 卡片 hover：elevation 提升 + 封面缩放（MD3） ---------- */
/* 文章卡片 */
.post-card .post-thumb {
  transition: box-shadow var(--nexus-motion-base) var(--nexus-motion-ease);
  border-radius: 14px;
  overflow: hidden;
}
.post-card:hover .post-thumb {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 22%, rgba(0,0,0,.12));
}
.post-card:hover .post-thumb img {
  transform: scale(1.05);
}
.post-card .read-more {
  transition: gap var(--nexus-motion-base) var(--nexus-motion-ease),
    color var(--nexus-motion-fast) ease;
}
.post-card:hover .read-more {
  gap: 8px;
}

/* 相册索引卡 */
.album-index-card {
  transition: box-shadow var(--nexus-motion-base) var(--nexus-motion-ease),
    transform var(--nexus-motion-base) var(--nexus-motion-emph);
}
.album-index-card:hover {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 26%, rgba(0,0,0,.14));
  transform: translateY(-4px);
}
.album-index-card .album-index-cover img,
.album-index-card .album-index-cover .ph {
  transition: transform var(--nexus-motion-slow) var(--nexus-motion-ease);
}
.album-index-card:hover .album-index-cover img {
  transform: scale(1.06);
}
.album-index-card .album-index-more i {
  transition: transform var(--nexus-motion-base) var(--nexus-motion-ease);
}
.album-index-card:hover .album-index-more i {
  transform: translateX(4px);
}

/* 相册照片（hover 提升 + 标题浮现） */
.album-photo {
  transition: box-shadow var(--nexus-motion-base) var(--nexus-motion-ease);
}
.album-photo:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
  z-index: 2;
}
.album-photo .album-photo-btn img {
  transition: transform var(--nexus-motion-slow) var(--nexus-motion-ease);
}
.album-photo:hover .album-photo-btn img {
  transform: scale(1.05);
}

/* 友链宽条 */
.link-bar {
  transition: box-shadow var(--nexus-motion-base) var(--nexus-motion-ease),
    transform var(--nexus-motion-base) var(--nexus-motion-emph);
}
.link-bar:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  transform: translateY(-4px);
}
.link-bar .link-bar-bg {
  transition: transform var(--nexus-motion-slow) var(--nexus-motion-ease);
}
.link-bar:hover .link-bar-bg {
  transform: scale(1.05);
}
.link-bar .link-bar-avatar img {
  transition: transform var(--nexus-motion-base) var(--nexus-motion-ease);
}
.link-bar:hover .link-bar-avatar img {
  transform: scale(1.1);
}

/* 豆瓣 / 番剧 条目 */
.douban-item,
.bgm-item {
  transition: box-shadow var(--nexus-motion-base) var(--nexus-motion-ease),
    transform var(--nexus-motion-base) var(--nexus-motion-emph);
}
.douban-item:hover,
.bgm-item:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
  transform: translateY(-4px);
}
.douban-item .douban-cover img,
.bgm-item .bgm-cover img {
  transition: transform var(--nexus-motion-slow) var(--nexus-motion-ease);
}
.douban-item:hover .douban-cover img,
.bgm-item:hover .bgm-cover img {
  transform: scale(1.06);
}
.douban-item .douban-title,
.bgm-item .bgm-title {
  transition: color var(--nexus-motion-fast) ease;
}
.douban-item:hover .douban-title,
.bgm-item:hover .bgm-title {
  color: var(--md-sys-color-primary, #6750a4);
}

/* 评论气泡 hover 轻提升 */
.comment-bubble {
  transition: box-shadow var(--nexus-motion-base) var(--nexus-motion-ease),
    background-color var(--nexus-motion-fast) ease;
}
.comment-item:hover .comment-bubble {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

/* ---------- 3. 首页横向菜单切换动画 ---------- */
.home-menu-inner {
  animation: nexusMenuIn var(--nexus-motion-base) var(--nexus-motion-emph);
}
@keyframes nexusMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 首页列表局部切换（main.js render 后添加，一次性淡入） */
.nexus-list-swap {
  animation: nexusListIn .22s var(--nexus-motion-ease);
}
@keyframes nexusListIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 追加项逐条淡入（加载更多 / 分页追加内容：新卡片依次浮现） */
.nexus-item-in {
  animation: nexusItemIn .32s var(--nexus-motion-ease) both;
}
@keyframes nexusItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pjax 整页切换：瞬时替换 + 极轻淡入（无感平滑，不做整页大动画） */
.nexus-pjax-in {
  animation: nexusPjaxIn .15s ease both;
}
@keyframes nexusPjaxIn {
  from { opacity: .35; }
  to   { opacity: 1; }
}

/* ---------- 4. 归档柱状图生长 ---------- */
.stat-bar-fill {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .9s var(--nexus-motion-emph);
  will-change: transform;
}
.stat-bars.is-anim .stat-bar-fill {
  transform: scaleY(1);
}
.stat-bar-fill em {
  opacity: 0;
  transition: opacity .3s ease .55s;
}
.stat-bars.is-anim .stat-bar-fill em {
  opacity: 1;
}

/* ---------- 5. 数字滚动（motion.js 驱动，初始显示真实值） ---------- */
.nexus-count {
  font-variant-numeric: tabular-nums;
}

/* ---------- 6. 404 页面动画 ---------- */
.error-404 .code {
  display: inline-block;
  animation: nexusCodeIn .9s var(--nexus-motion-emph) both;
}
.error-404 h1,
.error-404 p,
.error-404 .btn {
  animation: nexusFadeUp .6s var(--nexus-motion-ease) both;
}
.error-404 h1 { animation-delay: .12s; }
.error-404 p  { animation-delay: .24s; }
.error-404 .btn { animation-delay: .36s; }
@keyframes nexusCodeIn {
  from { opacity: 0; transform: scale(.85); letter-spacing: .18em; }
  to   { opacity: 1; transform: scale(1); letter-spacing: normal; }
}
@keyframes nexusFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 7. 弹窗 / 抽屉 / 浮层 过渡增强 ---------- */
.nexus-dialog,
.modal {
  animation: nexusPopIn var(--nexus-motion-base) var(--nexus-motion-emph);
}
@keyframes nexusPopIn {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.nexus-dialog-mask,
.modal-mask {
  animation: nexusFadeIn var(--nexus-motion-fast) ease;
}
@keyframes nexusFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 8. 移动端底部导航指示过渡 ---------- */
.mobile-tab {
  transition: color var(--nexus-motion-fast) ease,
    background-color var(--nexus-motion-fast) ease;
}
.mobile-tab::before {
  transition: transform var(--nexus-motion-base) var(--nexus-motion-emph),
    opacity var(--nexus-motion-fast) ease;
}

/* ---------- 9. 灯箱 / 播放器浮层 ----------
   注意：不要给 .fancybox__backdrop 叠加动画 —— Fancybox 自带 backdrop
   淡入（--f-backdrop-enter-duration），主题再叠一层会双动画竞争 opacity，
   造成遮罩「闪一下」露出网页 */
.lightbox-mask {
  animation: nexusFadeIn var(--nexus-motion-fast) ease;
}

/* ---------- 10. 滚动入场扩展（沿用 main.css 的 .nexus-reveal 纯 opacity 方案，
     本文件不再重复定义，避免覆盖主样式表） ---------- */

/* ============================================================
 * 夜间模式优化 + 流星划过（Canvas 星空，参考 0True）
 * ============================================================ */
/* 深色模式下原生控件（滚动条 / 表单 / 弹层）跟随夜间配色 */
html.dark {
  color-scheme: dark;
}

/* 星空流星 Canvas 覆盖层（仅深色模式显示，纯装饰不拦截交互） */
#universe {
  display: none;
}
html.dark #universe {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  pointer-events: none;
  z-index: 950;
}
@media (prefers-reduced-motion: reduce) {
  html.dark #universe { display: none; }
}

/* ============================================================
 * MD3 移动端动效增强（M3 Expressive 2025）
 * ------------------------------------------------------------
 *  - 首页列表切换：fade-through（旧内容淡出 70ms → 新内容淡入 200ms）
 *  - 底部导航：pill 指示器 emphasize 曲线过渡 + 图标轻抬
 *  - 列表/说说卡片入场 stagger（JS 注入 animation-delay）
 * ============================================================ */

/* 首页列表切换：离开态（render 先加 leave 再替换内容） */
.nexus-list-leave {
  opacity: 0;
  transition: opacity 70ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .nexus-list-leave {
    transition: none;
  }
}

/* 底部导航：激活切换时 pill 放大 + 图标轻抬（emphasized 曲线） */
@media (max-width: 768px) {
  .mobile-tab.is-active i {
    animation: nexusTabIconPop var(--nexus-motion-base) var(--nexus-motion-emph);
  }
  @keyframes nexusTabIconPop {
    0% { transform: scale(.8); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
  }
}

/* 说说/相册/文章卡片：滚动入场统一 stagger（纯 opacity，无位移拖影） */
.home-list > .nexus-reveal,
.moment-stream > .nexus-reveal {
  transition: opacity .4s ease;
}

/* 抽屉开启：MD3 modal drawer 淡入（与遮罩联动） */
#drawer.open .col-left-inner > * {
  animation: nexusFadeUp var(--nexus-motion-base) var(--nexus-motion-emph) both;
}
#drawer.open .col-left-inner > *:nth-child(2) { animation-delay: 40ms; }
#drawer.open .col-left-inner > *:nth-child(3) { animation-delay: 80ms; }