/* ============ 主题变量（自动跟随系统浅/深色） ============ */
:root{
  --bg:#0b1220; --text:#e7ebf3; --muted:#a6afc3; --primary:#7c5cff; --accent:#00e0ff;
  --card:rgba(255,255,255,.06); --border:rgba(255,255,255,.12);
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --radius-sm:12px; --radius-md:18px; --radius-lg:26px;
  --space-1:6px; --space-2:10px; --space-3:14px; --space-4:18px; --space-5:24px; --space-6:34px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f7fb; --text:#131722; --muted:#5b657a; --primary:#5b6cff; --accent:#0bbbd6; --card:#ffffff; --border:#e8ecf3; --shadow:0 8px 30px rgba(13,24,46,.08);} 
}

/* ============ 全局样式 ============ */
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans SC, sans-serif; color:var(--text); background: radial-gradient(1200px 700px at 20% -10%, rgba(124,92,255,.35), transparent 60%),
           radial-gradient(900px 600px at 90% 10%, rgba(0,224,255,.25), transparent 60%),
           var(--bg);
  line-height:1.6; scroll-behavior:smooth; 
}
::selection{ background: rgba(124,92,255,.35); color: inherit }
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1200px, 92%); margin-inline:auto}
.skip-link{position:absolute; left:12px; top:-100px; background:var(--card); border:1px solid var(--border); padding:8px 12px; border-radius:var(--radius-sm); box-shadow:var(--shadow)}
.skip-link:focus{top:12px}

/* 让锚点滚动时不被导航遮住 */
:target{ scroll-margin-top: 110px; }

/* ============ 顶部导航 ============ */
.nav{
  position:sticky; top:0; z-index:50; isolation:isolate;
  background: rgba(16,22,35,.48);
  border-bottom: 1px solid color-mix(in oklab, #fff 12%, transparent);
  padding-top: max(env(safe-area-inset-top), 0px);
  backdrop-filter: blur(18px) saturate(1.8) contrast(1.02);
  -webkit-backdrop-filter: blur(18px) saturate(1.8) contrast(1.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.08);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
/* 液态玻璃高光层 */
.nav::before{ content:""; position:absolute; inset:-20px -20px 60% -20px; pointer-events:none; mix-blend-mode:soft-light;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.28), rgba(255,255,255,.12) 45%, rgba(255,255,255,0) 60%);
}
/* 细腻噪点纹理层（SVG 噪声） */
.nav::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.5"/></svg>');
  background-size: 140px 140px;
}
@media (prefers-color-scheme: light){
  .nav{ background:rgba(255,255,255,.68); border-bottom:1px solid rgba(13,24,46,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 30px rgba(13,24,46,.08); }
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px; transition: height .25s ease}
.brand{display:flex; gap:.6rem; align-items:center; font-weight:800; letter-spacing:.3px}
.brand-badge{width:28px; height:28px; border-radius:9px; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow:var(--shadow)}
.nav a{opacity:.9}
.links{display:flex; gap:1.1rem}
.menu-toggle{display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:var(--card); color:var(--text); box-shadow:var(--shadow); align-items:center; justify-content:center; overflow:hidden}
.menu-toggle:focus-visible{outline:2px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset:2px}
.menu-icon{position:relative; width:20px; height:2px; background:currentColor; border-radius:1px}
.menu-icon::before, .menu-icon::after{content:""; position:absolute; left:0; width:20px; height:2px; background:currentColor; border-radius:1px; transition:transform .2s ease, opacity .2s ease}
.menu-icon::before{transform:translateY(-6px)}
.menu-icon::after{transform:translateY(6px)}
.nav.open .menu-icon{background:transparent}
.nav.open .menu-icon::before{transform:translateY(0) rotate(45deg)}
.nav.open .menu-icon::after{transform:translateY(0) rotate(-45deg)}
.links a{position:relative; padding:4px 2px; transition:opacity .2s ease, color .2s ease; overflow:hidden}
.links a::after{content:""; position:absolute; left:50%; bottom:-6px; width:0%; height:2px; background:linear-gradient(90deg, var(--primary), var(--accent)); transform:translateX(-50%); transition:width .22s ease}
.links a:hover::after,.links a.active::after{width:80%}
.links a.active{ color: color-mix(in oklab, var(--accent) 72%, #ffffff); text-shadow:0 0 8px color-mix(in oklab, var(--accent) 35%, transparent) }

/* 顶部栏点击涟漪裁切 */
.brand{ overflow:hidden }

/* 滚动压缩顶部栏 */
.nav.compact{ background: rgba(16,22,35,.64); box-shadow:0 6px 24px rgba(0,0,0,.18) }
@media (prefers-color-scheme: light){ .nav.compact{ background:rgba(255,255,255,.8) } }
.nav.compact .nav-inner{ height:60px }

/* 顶部栏入场动画 */
.nav.animate-in{ animation: navDrop .5s cubic-bezier(.2,.8,.2,1) }

/* 小屏：折叠菜单 */
@media (max-width: 780px){
  .menu-toggle{display:none}
  .links{position:static; left:auto; right:auto; top:auto; background:transparent; border:0; display:flex; gap:1rem; overflow:visible; max-height:none}
  .links a{padding:6px 4px}
}

/* ============ Hero 区 ============ */
.hero{padding:84px 0 48px}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
.title{font-size: clamp(32px, 6vw, 56px); line-height:1.1; font-weight:800; margin:0 0 12px; letter-spacing:.2px; text-wrap:balance}
.grad{background:linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%; animation:gradientShift 12s linear infinite}
.lead{font-size: clamp(16px, 2.4vw, 20px); color:var(--muted); margin:0 0 24px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{padding:12px 16px; border-radius:14px; border:1px solid var(--border); background:var(--card); display:inline-flex; align-items:center; gap:8px; font-weight:600; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; position:relative; overflow:hidden}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.35)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset:2px}
.btn-primary{background:linear-gradient(135deg, var(--primary), var(--accent)); color:white; border:0; background-size:200% 200%; animation:gradientShift 8s ease infinite}
.btn-primary:hover{filter:brightness(1.06); box-shadow:0 14px 36px rgba(0,0,0,.4)}

.avatar{
  width:220px; aspect-ratio:1/1; border-radius:var(--radius-lg); 
  background:linear-gradient(135deg, rgba(124,92,255,.18), rgba(0,224,255,.18)); border:1px solid var(--border);
  box-shadow:var(--shadow); overflow:hidden; margin-left:auto; 
  display:grid; place-items:center; font-weight:800; font-size:44px; letter-spacing:1px; color:rgba(255,255,255,.9)
}
@media (prefers-color-scheme: light){ .avatar{ color:#333 } }

/* 头像在进入后轻微浮动 */
.avatar.reveal.in{ animation: floatY 6s ease-in-out infinite .3s }

/* ============ 区块基础 ============ */
section{padding:56px 0}
.section-title{font-size:28px; font-weight:800; margin:0 0 18px; text-wrap:balance; position:relative}
.section-title::after{content:""; display:block; width:0; height:3px; margin-top:8px; background:linear-gradient(90deg, var(--primary), var(--accent)); border-radius:999px; transition:width .5s ease}
.section-title.reveal.in::after{ width:56px }
.muted{color:var(--muted)}
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns:repeat(3, 1fr)}
@media (max-width: 920px){ .hero-grid{grid-template-columns:1fr} .avatar{margin:0} .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .grid-3{grid-template-columns:1fr} section{padding:42px 0} .hero{padding:62px 0 34px} }
@media (max-width: 480px){
  body{ background: radial-gradient(600px 360px at 20% -10%, rgba(124,92,255,.28), transparent 60%), var(--bg); }
  .avatar{ width:180px; font-size:36px }
  .cover::after{ display:none }
  .to-top{ right:14px; bottom: max(14px, env(safe-area-inset-bottom) + 10px) }
}

/* ============ 卡片 ============ */
.card{position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; box-shadow:var(--shadow); transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; --rx:0deg; --ry:0deg}
.card::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg, color-mix(in oklab, var(--primary) 70%, transparent), color-mix(in oklab, var(--accent) 70%, transparent));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.85; pointer-events:none; transition:opacity .22s ease}
.card:hover::before{ opacity:1 }
.card:hover{transform:translateY(-6px) scale(1.02) rotateX(var(--rx)) rotateY(var(--ry)); border-color:color-mix(in oklab, var(--accent) 30%, var(--border)); box-shadow:0 18px 44px rgba(0,0,0,.36)}
.cover{height:160px; border-radius:12px; background:radial-gradient(120px 80px at 20% 20%, rgba(124,92,255,.35), transparent 45%),
       radial-gradient(140px 90px at 80% 30%, rgba(0,224,255,.35), transparent 45%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); margin-bottom:12px; position:relative; overflow:hidden}
.cover::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.06) 35%, transparent 50%); transform:skewX(-20deg) translateX(-120%); animation:shimmer 3s linear infinite}
.card h3{margin:2px 0 6px; font-size:18px}
.card p{margin:0 0 10px; color:var(--muted)}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px}
.tag{padding:6px 10px; border-radius:999px; border:1px solid color-mix(in oklab, var(--accent) 20%, var(--border)); background:rgba(255,255,255,.05); font-size:12px; transition:transform .2s ease, border-color .2s ease, background .2s ease}
.tag:hover{ transform:translateY(-2px); background:rgba(255,255,255,.08); border-color:color-mix(in oklab, var(--accent) 40%, var(--border)) }

/* ============ 技能与时间线 ============ */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:var(--card); font-weight:600; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.chip:hover{ transform: translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.28); border-color:color-mix(in oklab, var(--accent) 25%, var(--border)) }
.timeline{border-left:2px dashed var(--border); margin-left:12px; padding-left:16px}
.tl-item{margin:12px 0}
.tl-item h4{margin:0; font-size:16px}
.tl-item small{color:var(--muted)}

footer{position:relative}
footer::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, var(--primary), var(--accent)); opacity:.35}

/* ============ 美化底部栏 ============ */
.site-footer{ position:relative; padding:42px 0; color:var(--muted); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); }
.footer-inner{ display:grid; align-items:center; gap:16px; grid-template-columns: 1fr auto auto; }
.footer-brand{ display:inline-flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px; color:var(--text); opacity:.9 }
.footer-links{ display:flex; gap:1rem; justify-content:center }
.footer-links a{ position:relative; padding:4px 2px }
.footer-links a::after{ content:""; position:absolute; left:50%; bottom:-6px; width:0%; height:2px; background:linear-gradient(90deg, var(--primary), var(--accent)); transform:translateX(-50%); transition:width .22s ease }
.footer-links a:hover::after{ width:80% }
.footer-social{ display:flex; gap:10px; justify-content:flex-end }
.social{ width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:var(--text); opacity:.9; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease }
.social:hover{ transform: translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.35); border-color: color-mix(in oklab, var(--accent) 30%, var(--border)) }
.footer-meta{ grid-column: 1 / -1; text-align:center; font-size:14px; opacity:.9; margin-top:2px }

@media (max-width: 780px){
  .footer-inner{ grid-template-columns: 1fr; justify-items:center; gap:12px }
  .footer-social{ justify-content:center }
}

/* ============ 滚动进入动画 与 返回顶部按钮 ============ */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; transition-delay: var(--reveal-delay, 0s)}
.reveal.in{opacity:1; transform:none}
.to-top{position:fixed; right:18px; bottom:18px; width:42px; height:42px; border-radius:12px; border:0; cursor:pointer; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, var(--primary), var(--accent)); box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; overflow:hidden}
.to-top.show{opacity:1; pointer-events:auto; animation: popIn .26s cubic-bezier(.2,.8,.2,1), glowPulse 2.6s ease-in-out infinite .26s}
.to-top:hover{transform:translateY(-2px)}

/* 顶部滚动进度条 */
.scroll-progress{ position:absolute; left:0; top:0; height:3px; width:100%; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, var(--primary), var(--accent)); border-radius:0 0 999px 999px; box-shadow:0 6px 18px rgba(0,0,0,.12); pointer-events:none }

@keyframes shimmer{ 100%{ transform:skewX(-20deg) translateX(120%)} }
@keyframes navDrop{ 0%{ transform:translateY(-10px); opacity:.0 } 100%{ transform:none; opacity:1 } }
/* 点击涟漪效果 */
.ripple{ position:absolute; border-radius:999px; pointer-events:none; width:var(--ripple-size, 20px); height:var(--ripple-size, 20px); left:calc(var(--ripple-x, 0px) - var(--ripple-size, 20px)/2); top:calc(var(--ripple-y, 0px) - var(--ripple-size, 20px)/2); background:radial-gradient(closest-side, rgba(255,255,255,.45), rgba(255,255,255,.12), rgba(255,255,255,0)); transform:scale(0); animation:rippleExpand .6s ease-out}
@keyframes rippleExpand{ to{ transform:scale(1); opacity:0 } }
@keyframes gradientShift{ 0%{ background-position:0% 50% } 50%{ background-position:100% 50% } 100%{ background-position:0% 50% } }
@keyframes floatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@keyframes popIn{ 0%{ transform:scale(.86); opacity:0 } 60%{ transform:scale(1.06); opacity:1 } 100%{ transform:scale(1) } }
@keyframes glowPulse{ 0%{ box-shadow:0 8px 30px rgba(0,0,0,.35) } 50%{ box-shadow:0 14px 46px rgba(0,0,0,.42) } 100%{ box-shadow:0 8px 30px rgba(0,0,0,.35) } }
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .btn, .card, .cover{transition:none}
  .reveal{opacity:1; transform:none}
  .cover::after{display:none}
}