/* ================================================================
   安装易 · 动画层（v7）
   原则：只用 opacity / transform，不加滤镜和噪点（会让文字发虚）
   ================================================================ */

/* ---------- 1. 跨页面转场（Chrome 111+ / Edge 支持，其他浏览器自动忽略） ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pageOut .18s ease both; }
::view-transition-new(root) { animation: pageIn .26s cubic-bezier(.22,.8,.28,1) both; }
@keyframes pageOut { to { opacity: 0; transform: translateY(-4px) } }
@keyframes pageIn  { from { opacity: 0; transform: translateY(8px) } }

/* ---------- 2. 首屏进入 ---------- */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes fadeIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideIn  { from { opacity: 0; transform: translateX(-6px) } to { opacity: 1; transform: none } }

.top        { animation: fadeIn .3s ease both }
.sortbar    { animation: slideIn .35s .04s ease both }
.side > *   { animation: fadeUp .42s ease both }
.side > *:nth-child(1) { animation-delay: .06s }
.side > *:nth-child(2) { animation-delay: .12s }
.side > *:nth-child(3) { animation-delay: .18s }
.side > *:nth-child(4) { animation-delay: .24s }

/* 列表卡片依次浮现 */
.list .li { animation: fadeUp .4s ease both }
.list .li:nth-child(1)  { animation-delay: .02s }
.list .li:nth-child(2)  { animation-delay: .06s }
.list .li:nth-child(3)  { animation-delay: .10s }
.list .li:nth-child(4)  { animation-delay: .14s }
.list .li:nth-child(5)  { animation-delay: .18s }
.list .li:nth-child(6)  { animation-delay: .22s }
.list .li:nth-child(7)  { animation-delay: .26s }
.list .li:nth-child(8)  { animation-delay: .30s }
.list .li:nth-child(9)  { animation-delay: .34s }
.list .li:nth-child(10) { animation-delay: .38s }
.list .li:nth-child(11) { animation-delay: .42s }

/* ---------- 3. 卡片悬停：抬起 + 阴影 + 缩略图微放大 ---------- */
.li {
  transition: transform .22s cubic-bezier(.22,.8,.28,1),
              box-shadow .22s ease,
              border-color .22s ease;
  will-change: transform;
}
.li:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px -10px rgba(20,30,50,.18);
  border-color: #d9dfe8;
}
.li .thumb { overflow: hidden }
.li .thumb .ph {
  transition: transform .35s cubic-bezier(.22,.8,.28,1);
  display: inline-block;
}
.li:hover .thumb .ph { transform: scale(1.08) }
.li h2 a { transition: color .18s ease }
.li:hover h2 a { color: #2563eb }

/* ---------- 4. 链接：下划线生长 ---------- */
.topnav a {
  position: relative;
  transition: color .18s ease;
}
.topnav a::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 6px;
  height: 2px;
  background: #2563eb;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s cubic-bezier(.22,.8,.28,1);
}
.topnav a:hover::after, .topnav a.on::after { transform: scaleX(1) }

.foot .links a, .post a, .dl a, .side a {
  transition: color .16s ease, opacity .16s ease;
}
.foot .links a:hover { color: #2563eb; transform: translateY(-1px) }

/* ---------- 5. 按钮/标签：按下回弹 ---------- */
.search button, .sbox button, .badge, .tg, .tags a, .posttags a.h {
  transition: transform .14s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.search button:active, .sbox button:active { transform: scale(.96) }
.tg:hover, .tags a:hover, .posttags a.h:hover {
  background: #eef4ff;
  color: #2563eb;
  border-color: #c7d9f8;
}
.tg:active, .tags a:active { transform: scale(.95) }

/* 搜索输入框：聚焦时柔和高亮 */
.search input, .sbox input { transition: box-shadow .2s ease, border-color .2s ease }
.search input:focus, .sbox input:focus {
  outline: none;
  border-color: #9dc0f5;
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}

/* ---------- 6. 排序切换时的重排过渡 ---------- */
#list.reflow .li {
  animation: reorder .34s cubic-bezier(.22,.8,.28,1) both;
}
@keyframes reorder {
  from { opacity: .25; transform: translateY(9px) scale(.99) }
  to   { opacity: 1;   transform: none }
}

/* ---------- 7. 滚动进入（JS 加 .rv，进入视口加 .in） ---------- */
.rv { opacity: 0; transform: translateY(14px) }
.rv.in {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.8,.28,1);
}

/* ---------- 8. 缩略图占位上的期数角标：轻微呼吸 ---------- */
.thumb .tag-issue { animation: fadeIn .5s .15s ease both }

/* ---------- 9. 详情页截图：悬停放大 + 描边 ---------- */
.shot { transition: transform .25s ease, box-shadow .25s ease }
.shot:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(20,30,50,.28) }

/* ---------- 10. 尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none }
  @view-transition { navigation: none }
}