/* about.css — 「關於」獨立頁面：入場動畫、頭像、時間軸、技能條，以及進出該頁的方向性轉場 */
@keyframes grow{from{transform:scaleX(0)}}
@keyframes pop{from{opacity:0;transform:scale(.55) rotate(-14deg)}}
@keyframes vt-l-out{to{opacity:0;transform:translateX(-48px)}}
@keyframes vt-r-in{from{opacity:0;transform:translateX(64px)}}
@keyframes vt-r-out{to{opacity:0;transform:translateX(48px)}}
@keyframes vt-l-in{from{opacity:0;transform:translateX(-64px)}}

/* 進入「關於」：新頁從右側滑入；返回時相反 */
[data-vt="to-about"]::view-transition-old(root){animation:.28s ease both vt-l-out}
[data-vt="to-about"]::view-transition-new(root){animation:.55s var(--ease) both vt-r-in}
[data-vt="from-about"]::view-transition-old(root){animation:.28s ease both vt-r-out}
[data-vt="from-about"]::view-transition-new(root){animation:.55s var(--ease) both vt-l-in}

nav ul a.cur{color:var(--accent);background-size:100% 1.5px}
.more{display:inline-block;color:var(--accent);transition:transform .3s var(--ease)}
.more:hover{transform:translateX(6px)}

#aboutPage{padding:40px 0 0}
#aboutPage>*{animation:rise .7s var(--ease) backwards}
#aboutPage>:nth-child(1){animation-delay:.05s}
#aboutPage>:nth-child(2){animation-delay:.12s}
#aboutPage>:nth-child(3){animation-delay:.22s}
#aboutPage>:nth-child(4){animation-delay:.3s}
#aboutPage>:nth-child(5){animation-delay:.36s}
#aboutPage>:nth-child(n+6){animation-delay:.44s}
#aboutPage .back{color:var(--mute);font-size:14px;display:inline-block;margin-bottom:28px;transition:color .2s,transform .3s var(--ease)}
#aboutPage .back:hover{color:var(--accent);transform:translateX(-4px)}
.ab-head{display:flex;gap:22px;align-items:center;margin-bottom:22px}
.avatar{flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font:900 38px var(--serif);color:#fff;background:conic-gradient(from 210deg,var(--accent),#e8a23a,var(--accent));box-shadow:0 10px 30px -10px var(--accent);animation:pop .9s var(--ease) .15s backwards;transition:transform .6s var(--ease)}
.avatar:hover{transform:rotate(360deg)}
#aboutPage h1{font-size:clamp(30px,6vw,46px);margin:6px 0 0}
#aboutPage h2{margin:48px 0 14px}
.now{list-style:none;margin:0;padding:0}
.now li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);transition:transform .3s var(--ease)}
.now li::before{content:"✦";color:var(--accent)}
.now li:hover{transform:translateX(6px)}
.tl{list-style:none;margin:0;padding:0 0 0 22px;border-left:1px solid var(--line)}
.tl li{position:relative;padding:0 0 26px 14px}
.tl li::before{content:"";position:absolute;left:-29px;top:9px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);transition:transform .3s var(--ease),background .3s}
.tl li:hover::before{background:var(--accent);transform:scale(1.5)}
.tl b{font:600 15px var(--serif);color:var(--accent);margin-right:12px}
.skills{display:grid;gap:16px}
.sk{display:grid;grid-template-columns:72px 1fr 32px;gap:14px;align-items:center;font-size:14px}
.sk i{position:relative;display:block;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.sk i::after{content:"";position:absolute;inset:0;width:var(--v);border-radius:6px;background:linear-gradient(90deg,var(--accent),#e8a23a);transform-origin:left;animation:grow 1.2s var(--ease) .7s backwards}
.sk span:last-child{color:var(--mute);text-align:right;font-variant-numeric:tabular-nums}
.links{display:flex;gap:10px;flex-wrap:wrap}
.links a{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:6px 18px;font-size:14px;transition:transform .25s var(--ease),border-color .25s,color .25s}
.links a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}