/* motion.css — 所有過渡與動畫集中在這裡 */
:root{--ease:cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes fade{from{opacity:0}}

/* 1. 首屏依序浮現 */
nav{animation:fade .8s var(--ease) backwards}
.hero>*{animation:rise .8s var(--ease) backwards}
.hero>:nth-child(1){animation-delay:.05s}
.hero>:nth-child(2){animation-delay:.15s}
.hero>:nth-child(3){animation-delay:.28s}
.hero>:nth-child(4){animation-delay:.4s}

/* 2. 文章列表：載入與篩選時都會依序浮現 */
.post{animation:rise .6s var(--ease) backwards;animation-delay:calc(var(--i,0)*70ms + .45s)}
.post.refilter{animation-delay:calc(var(--j,0)*55ms)}
.post h3{background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat;transition:background-size .45s var(--ease),color .2s;display:inline}
.post:hover h3{background-size:100% 2px}

/* 3. 捲動進入視窗時浮現 */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* 4. 文章頁：段落依序浮現 */
#article .back,#article .eyebrow,#article .info{animation:fade .6s var(--ease) .2s backwards}
#article .body>*{animation:rise .7s var(--ease) backwards}
#article .body>:nth-child(1){animation-delay:.25s}
#article .body>:nth-child(2){animation-delay:.32s}
#article .body>:nth-child(3){animation-delay:.39s}
#article .body>:nth-child(4){animation-delay:.46s}
#article .body>:nth-child(n+5){animation-delay:.53s}
#article .pn{animation:fade .8s var(--ease) .7s backwards}

/* 5. 小互動 */
nav ul a{background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 1.5px no-repeat;transition:background-size .35s var(--ease),color .2s;padding-bottom:3px}
nav ul a:hover{background-size:100% 1.5px}
#theme,.chips button,.sub button,#top{transition:transform .2s var(--ease),background .25s,color .25s,border-color .25s,opacity .25s}
#theme:hover{transform:rotate(180deg)}
#theme:active,.chips button:active,.sub button:active,#top:active{transform:scale(.92)}
.chips button:hover{border-color:var(--accent);color:var(--accent)}
.chips button.on:hover{color:#fff}
.sub input{transition:border-color .25s,box-shadow .25s}
.sub input:focus,.tools input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.tools input{transition:border-color .25s,box-shadow .25s}
#bar{transition:width .12s linear}
.quote{transition:transform .4s var(--ease),box-shadow .4s}
.quote:hover{transform:translateX(6px);box-shadow:0 12px 30px -18px var(--accent)}

/* 6. 主題切換：從按鈕位置圓形擴散 */
.theme-vt::view-transition-old(root),.theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
.theme-vt::view-transition-old(root){z-index:1}
.theme-vt::view-transition-new(root){z-index:2}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}