:root{
  --pt-bg: #ffffff;                    /* 轉場覆蓋色（通常 = 網站背景色） */
  --pt-dur: 500ms;                     /* 動畫時間 */
  --pt-ease: cubic-bezier(.4,0,.2,1);  /* 動畫速率 */
}

/* 覆蓋層：預設藏在畫面下方 */
.page-transition{
  position: fixed;
  inset: 0;
  background: var(--pt-bg);
  z-index: 9999;
  transform: translateY(100%);
  pointer-events: none;
}

/* 進場（新頁載入）: 從覆蓋 → 往上滑出 */
body.page-enter .page-transition{
  animation: pt-swipe-out var(--pt-dur) var(--pt-ease) both;
  pointer-events: auto;
}

/* 離場（點連結）: 從下往上蓋住畫面 */
body.page-exit .page-transition{
  animation: pt-swipe-in var(--pt-dur) var(--pt-ease) both;
  pointer-events: auto;
}

/* 避免轉場期間滾動/誤觸 */
body.page-enter,
body.page-exit{ overflow: clip; cursor: progress; }

/* 動畫關鍵影格 */
@keyframes pt-swipe-in  { from { transform: translateY(100%);} to { transform: translateY(0);} }
@keyframes pt-swipe-out { from { transform: translateY(0);}    to { transform: translateY(-100%);} }

/* 可選：使用淡入淡出（把 body 加 class "pt-fade"） */
.pt-fade .page-transition{ transform:none; opacity:0; }
.pt-fade.page-enter .page-transition{ animation: pt-fade-out var(--pt-dur) linear both; }
.pt-fade.page-exit  .page-transition{ animation: pt-fade-in  var(--pt-dur) 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){
  .page-transition{ display:none; }
  body.page-enter, body.page-exit{ overflow:auto; cursor:auto; }
}