/* ============================================================
   页面转场系统
   点内页 → 地球「撤走」（沿自身圆盘中心缩小退入深空）→ 扫描光带掠过
   → 内页内容逐级浮现。全程无刷新（SPA），导航常驻不动。

   ★ 设计为渐进增强：JS 不执行时，链接仍是普通跳转，页面照常显示
     （.pt-item 的 opacity:0 由 JS 添加，无 JS 时不会隐藏内容）。

   ★ 不使用四角 HUD 角标/括号等装饰件（遵循本项目约定）。
   ============================================================ */

/* ---------- 地球层：整体沿圆盘中心（0.80w / 0.50h）缩小退走 ---------- */
#hero{
  position:fixed; inset:0; z-index:2;
  transform-origin:80% 50%;
  transition:transform .95s cubic-bezier(.5,0,.28,1), opacity .8s ease;
}
body.hero-out #hero{ transform:scale(.42); opacity:0; pointer-events:none; }

/* 首次加载：地球从远处推近（动画结束后立即移除 class，避免覆盖 hero-out 的 transform） */
body.hero-boot #hero{ animation:heroBoot 1.15s cubic-bezier(.2,.75,.25,1) both; }
@keyframes heroBoot{ from{ opacity:0; transform:scale(1.08) } to{ opacity:1; transform:none } }

/* ---------- 持久星空背景：内页模式下压暗，天体隐去（星空保留，串起全站） ---------- */
#bg{ transition:opacity .85s ease; }
body.page-mode #bg{ opacity:.30; }
body.page-mode #bg .sun,
body.page-mode #bg .moon,
body.page-mode #bg .aurora{ opacity:0; transition:opacity .5s ease; }

/* ---------- 内页容器 ---------- */
#pageLayer{
  position:fixed; inset:0; z-index:3; display:none;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
}
#pageLayer.on{ display:block; }

/* ---------- 板块逐级浮现 / 退场 ---------- */
.pt-item{ opacity:0; }
.pt-enter .pt-item{ animation:ptRise .72s cubic-bezier(.2,.72,.2,1) both; }
.pt-exit  .pt-item{ animation:ptSink .38s ease both; }
@keyframes ptRise{ from{ opacity:0; transform:translateY(28px) } to{ opacity:1; transform:none } }
@keyframes ptSink{ from{ opacity:1; transform:none } to{ opacity:0; transform:translateY(-16px) } }

/* ---------- 转场扫描光带（掠过整屏，遮住内容交换的瞬间） ---------- */
#ptWipe{ position:fixed; inset:0; z-index:15; pointer-events:none; opacity:0; overflow:hidden; }
#ptWipe.on{ animation:ptWipeFade .9s linear both; }
#ptWipe.on .pt-band{ animation:ptWipeBand .9s cubic-bezier(.4,0,.35,1) both; }
#ptWipe .pt-band{
  position:absolute; left:0; right:0; top:-34vh; height:34vh;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(5,217,232,.06) 38%,
    rgba(5,217,232,.18) 62%,
    rgba(180,250,255,.50) 76%,
    rgba(5,217,232,.10) 86%,
    transparent 100%);
}
#ptWipe .pt-line{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(140,246,255,.95) 22%,rgba(215,255,255,1) 50%,rgba(140,246,255,.95) 78%,transparent);
  box-shadow:0 0 26px 5px rgba(5,217,232,.55);
}
@keyframes ptWipeFade{ 0%{opacity:0} 10%{opacity:1} 80%{opacity:1} 100%{opacity:0} }
@keyframes ptWipeBand{ 0%{transform:translateY(0)} 100%{transform:translateY(136vh)} }

/* ---------- 降级：尊重 prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  #hero{ transition:opacity .3s ease; }
  body.hero-out #hero{ transform:none; }
  body.hero-boot #hero{ animation:none; }
  #ptWipe{ display:none; }
  .pt-enter .pt-item{ animation:ptFade .28s ease both; }
  .pt-exit  .pt-item{ animation:ptFade .2s ease both reverse; }
  @keyframes ptFade{ from{opacity:0} to{opacity:1} }
}