/* ===========================================
 * 页面离场过渡样式
 * - 进入：直接在 body 加载完成时加 .pt-ready 类触发淡入（由 JS 控制）
 * - 离场：给 body 加 .pt-leaving 类即可触发淡出 + 左滑
 * - 减少动画偏好下退化为瞬时切换
 * =========================================== */

/* 进入页面：JS 加载后给 body 加 .pt-ready 触发一次淡入
   注意：body 默认完全可见，仅在 .pt-ready 被加上时才播放动画。
   这样即使 JS 加载失败/被阻塞，body 也不会停留在透明状态导致页面无法显示。 */
@keyframes pt-body-in {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    99%  { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 1; transform: none; }
}
body.pt-ready {
    animation: pt-body-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 离场：点击链接跳转时由 JS 加 .pt-leaving 触发 */
@keyframes pt-body-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(-24px, 0, 0); }
}
body.pt-leaving {
    animation: pt-body-out 200ms cubic-bezier(0.4, 0, 1, 1) both;
}

/* 减少动画偏好：直接关掉所有过渡 */
@media (prefers-reduced-motion: reduce) {
    body { opacity: 1 !important; }
    body.pt-ready { animation: none !important; }
    body.pt-leaving { animation: none !important; }
}