/* transitions.css — 頁面轉場（View Transitions）集中在這裡
   · 導航欄固定不動，只有頁面主體在換
   · 方向感知：前進（更深一層）新頁從右側帶透視滑入，返回則從左側
   · 共享標題：列表裡的標題與文章大標題之間平滑變形 */
:root{--vt-ease:cubic-bezier(.2,.8,.2,1)}

.topbar{view-transition-name:site-nav}
::view-transition-group(site-nav){animation:none}
::view-transition-old(site-nav){display:none}
::view-transition-new(site-nav){animation:none}

::view-transition-group(ttl){animation-duration:.6s;animation-timing-function:var(--vt-ease)}

/* 同層級切換：淡出 + 輕微上浮 */
::view-transition-old(root){animation:.22s ease both vt-fade-out}
::view-transition-new(root){animation:.45s var(--vt-ease) both vt-rise-in}
/* 前進 / 返回 */
[data-vt="fwd"]::view-transition-old(root){animation:.3s ease both vt-to-left}
[data-vt="fwd"]::view-transition-new(root){animation:.55s var(--vt-ease) both vt-from-right}
[data-vt="back"]::view-transition-old(root){animation:.3s ease both vt-to-right}
[data-vt="back"]::view-transition-new(root){animation:.55s var(--vt-ease) both vt-from-left}

@keyframes vt-fade-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-rise-in{from{opacity:0;transform:translateY(16px)}}
@keyframes vt-to-left{to{opacity:0;transform:perspective(1400px) translateX(-6vw) rotateY(8deg) scale(.98)}}
@keyframes vt-from-right{from{opacity:0;transform:perspective(1400px) translateX(9vw) rotateY(-9deg)}}
@keyframes vt-to-right{to{opacity:0;transform:perspective(1400px) translateX(6vw) rotateY(-8deg) scale(.98)}}
@keyframes vt-from-left{from{opacity:0;transform:perspective(1400px) translateX(-9vw) rotateY(9deg)}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}