/* ==========================================================
   site.css — 全站共享样式
   目前只放跨页面的转场规则；页面自身样式仍在内联 <style> 里。

   转场原理：
   1. 点击站内链接后，原有 .leaving 类让黄色遮罩滑下盖住页面；
   2. 浏览器冻结这张「整屏黄色」的快照，等新页面加载完成
      （所以加载期间看到的是黄色，而不是白屏）；
   3. View Transition 让旧快照整屏上移，露出新页面。
   ========================================================== */

/* ---------- 开启跨文档 View Transition ---------- */
@view-transition { navigation: auto; }

/* ---------- 黄色遮罩：旧快照整屏上移 ---------- */
::view-transition-old(root) {
  animation: veil-lift .7s cubic-bezier(.76, 0, .24, 1) both;
}

/* 新页面直接呈现，不再叠一层淡入 */
::view-transition-new(root) {
  animation: none;
}

@keyframes veil-lift {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

/* 浏览器后退时反向向下让出 */
html[data-nav="back"] ::view-transition-old(root) {
  animation-name: veil-drop;
}

@keyframes veil-drop {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* ---------- 转场到达时：内容直接呈现 ----------
   页面里的 .st 元素靠 body.revealed 做入场动画（最晚约 1.4s）。
   如果让它在遮罩后面播，抬起遮罩时会看到半透明的卡片。
   所以转场到达时直接给最终状态——遮罩抬起本身就是入场。 */
body.vt-arrive .st {
  opacity: 1 !important;
  transition: none !important;
}

/* ---------- 尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}