/* =========================================================
   页面切换过渡（进入 / 离开）
   - 进入：纯 CSS 动画自动播放，不依赖 JS
   - 离开：transition.js 给 <html> 加 .is-leaving 后触发
   - 只动 transform / opacity，避免布局抖动；时长 300-500ms
   ========================================================= */

/* 进入遮罩：从奶油色淡出，避免首屏白闪 */
.pt-curtain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  background:linear-gradient(180deg,#f5f5f2,#f7f3f1 55%,#f5f5f2);
  opacity:0;
  animation:pt-curtain-out 420ms cubic-bezier(.22,.8,.24,1) both;
}

/* 主体进入：淡入 + 轻微上移 + 极轻缩放 */
main{animation:pt-main-in 440ms cubic-bezier(.22,.8,.24,1) both}

/* 顶部导航只做淡入，避免与吸顶定位互相干扰 */
.site-head,.g-head{animation:pt-head-in 320ms ease both}

@keyframes pt-curtain-out{from{opacity:1}to{opacity:0}}
@keyframes pt-main-in{
  from{opacity:0;transform:translate3d(0,14px,0) scale(.996)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes pt-head-in{from{opacity:0}to{opacity:1}}

/* 离开阶段：先锁住交互，再淡出并轻微上移 */
html.is-leaving body{pointer-events:none}
html.is-leaving main{
  will-change:transform,opacity;
  animation:pt-main-out 360ms cubic-bezier(.4,0,.2,1) both;
}
html.is-leaving .site-head,
html.is-leaving .g-head{animation:pt-head-out 280ms ease both}
html.is-leaving .pt-curtain{animation:pt-curtain-in 360ms cubic-bezier(.4,0,.2,1) both}

@keyframes pt-main-out{
  from{opacity:1;transform:translate3d(0,0,0) scale(1)}
  to{opacity:0;transform:translate3d(0,-10px,0) scale(.994)}
}
@keyframes pt-head-out{from{opacity:1}to{opacity:0}}
@keyframes pt-curtain-in{from{opacity:0}to{opacity:1}}

/* 带开屏动画的页面（index.html）由开屏负责进入效果，避免双重动画 */
html.has-preloader .pt-curtain{animation:none;opacity:0}
html.has-preloader main,
html.has-preloader .site-head{animation:none}

/* 低端设备降级：缩短时长并只保留透明度过渡 */
html.pt-lite main{animation:pt-fade-in 220ms ease both}
html.pt-lite .site-head,
html.pt-lite .g-head{animation:pt-fade-in 220ms ease both}
html.pt-lite .pt-curtain{animation:none;opacity:0}
html.pt-lite.is-leaving main{animation:pt-fade-out 200ms ease both}
html.pt-lite.is-leaving .site-head,
html.pt-lite.is-leaving .g-head{animation:pt-fade-out 200ms ease both}
html.pt-lite.is-leaving .pt-curtain{animation:pt-curtain-in 200ms linear both}

@keyframes pt-fade-in{from{opacity:0}to{opacity:1}}
@keyframes pt-fade-out{from{opacity:1}to{opacity:0}}

/* 系统开启「减少动态效果」时彻底关闭动画，页面照常使用 */
@media (prefers-reduced-motion: reduce){
  .pt-curtain{animation:none;opacity:0}
  main,.site-head,.g-head{animation:none!important}
  html.is-leaving main,
  html.is-leaving .site-head,
  html.is-leaving .g-head{animation:none!important;opacity:1}
}