/* ============================================================
 * TriM3 全站动效系统（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 {
  --tri-motion-fast: 150ms;
  --tri-motion-base: 250ms;
  --tri-motion-slow: 400ms;
  --tri-motion-ease: cubic-bezier(.2, 0, 0, 1);
  --tri-motion-emph: cubic-bezier(.05, .7, .1, 1);
  --tri-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,
.tri-search-entry,
.drawer-toggle {
  transition: background-color var(--tri-motion-fast) var(--tri-motion-ease),
    color var(--tri-motion-fast) var(--tri-motion-ease),
    transform var(--tri-motion-fast) var(--tri-motion-ease),
    box-shadow var(--tri-motion-base) var(--tri-motion-ease),
    opacity var(--tri-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,
.tri3-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(--tri-motion-fast) var(--tri-motion-ease),
    color var(--tri-motion-fast) var(--tri-motion-ease);
}
.nav-link:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 10%, transparent);
}
.nav-link i {
  transition: transform var(--tri-motion-fast) var(--tri-motion-ease),
    color var(--tri-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(--tri-motion-base) var(--tri-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(--tri-motion-base) var(--tri-motion-ease),
    color var(--tri-motion-fast) ease;
}
.post-card:hover .read-more {
  gap: 8px;
}

/* 相册索引卡 */
.album-index-card {
  transition: box-shadow var(--tri-motion-base) var(--tri-motion-ease),
    transform var(--tri-motion-base) var(--tri-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(--tri-motion-slow) var(--tri-motion-ease);
}
.album-index-card:hover .album-index-cover img {
  transform: scale(1.06);
}
.album-index-card .album-index-more i {
  transition: transform var(--tri-motion-base) var(--tri-motion-ease);
}
.album-index-card:hover .album-index-more i {
  transform: translateX(4px);
}

/* 相册照片（hover 提升 + 标题浮现） */
.album-photo {
  transition: box-shadow var(--tri-motion-base) var(--tri-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(--tri-motion-slow) var(--tri-motion-ease);
}
.album-photo:hover .album-photo-btn img {
  transform: scale(1.05);
}

/* 友链宽条 */
.link-bar {
  transition: box-shadow var(--tri-motion-base) var(--tri-motion-ease),
    transform var(--tri-motion-base) var(--tri-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(--tri-motion-slow) var(--tri-motion-ease);
}
.link-bar:hover .link-bar-bg {
  transform: scale(1.05);
}
.link-bar .link-bar-avatar img {
  transition: transform var(--tri-motion-base) var(--tri-motion-ease);
}
.link-bar:hover .link-bar-avatar img {
  transform: scale(1.1);
}

/* 豆瓣 / 番剧 条目 */
.douban-item,
.bgm-item {
  transition: box-shadow var(--tri-motion-base) var(--tri-motion-ease),
    transform var(--tri-motion-base) var(--tri-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(--tri-motion-slow) var(--tri-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(--tri-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(--tri-motion-base) var(--tri-motion-ease),
    background-color var(--tri-motion-fast) ease;
}
.comment-item:hover .comment-bubble {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

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

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

/* ---------- 4. 归档柱状图生长 ---------- */
.stat-bar-fill {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .9s var(--tri-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 驱动，初始显示真实值） ---------- */
.tri3-count {
  font-variant-numeric: tabular-nums;
}

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

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

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

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

/* ---------- 10. 滚动入场扩展（沿用 main.css 的 .tri3-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; }
}