/* ═══════════════════════════════════════════════════════════════
   home.css —— 首页专属样式（依赖 site.css 的令牌与基础组件）
   含：首屏 / 跑马灯 / 行列表实例 / 关于与语言图 / 数据卡与热力图 / 联系
   ═══════════════════════════════════════════════════════════════ */
/* ── 07 首屏 ─────────────────────────────────────────────────── */
.hero{padding:calc(var(--nav-h) + clamp(52px,9vw,104px)) 0 clamp(48px,7vw,84px);position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.hero-status{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);
  border:1px solid var(--line);padding:5px 10px;border-radius:var(--radius);margin-bottom:22px;
}
.hero-status em{width:6px;height:6px;background:var(--ac);border-radius:50%;display:block;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.hero h1{
  font-size:clamp(2rem,6.2vw,3.4rem);line-height:1.06;letter-spacing:-.04em;
  font-weight:800;min-height:1.16em;
}
.hero h1 .cur{display:inline-block;width:.5em;height:.9em;background:var(--ac);vertical-align:-.09em;margin-left:.06em;animation:blink 1.05s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.hero-sub{margin-top:22px;color:var(--tx2);font-size:clamp(.93rem,1.7vw,1.03rem);max-width:52ch}
.hero-sub b{color:var(--tx);font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}

/* 按钮：直角细边，主按钮为荧光实心 */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:11px 19px;
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:.86rem;font-weight:600;color:var(--tx);
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.btn:hover{border-color:var(--ac);color:var(--ac)}
.btn-solid{background:var(--ac);color:var(--ac-ink);border-color:var(--ac)}
.btn-solid:hover{background:transparent;color:var(--ac)}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translate(3px,-3px)}

/* 右侧资料卡：直角描边，头像环用 outline 而非阴影 */
.card-side{border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.avatar{position:relative;width:96px;height:96px;margin-bottom:18px}
.avatar img{
  width:96px;height:96px;border-radius:var(--radius);
  border:1px solid var(--line);object-fit:cover;background:var(--line);
}
.avatar::after{                /* 头像环：纯描边 + 呼吸，不使用阴影 */
  content:"";position:absolute;inset:-8px;border:1px solid var(--ac);
  opacity:.5;border-radius:var(--radius);animation:ring 3.6s var(--ease) infinite;
}
@keyframes ring{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.045);opacity:.16}}
.card-side .who{font-weight:800;font-size:1.06rem;letter-spacing:-.01em}
.card-side .role{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2);margin-top:5px}

/* 统计：等宽数字 + 细线分隔 */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:20px;border-radius:var(--radius);overflow:hidden}
.stats > div{background:var(--bg);padding:14px 4px 14px 0}
.stats b{display:block;font-family:var(--mono);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--tx)}
.stats span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}

/* ── 08 跑马灯横幅 ───────────────────────────────────────────── */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ac);color:var(--ac-ink);overflow:hidden;
  position:relative;z-index:1;
}
.marquee-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;padding:11px 0;padding-right:46px;white-space:nowrap;
}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ── 10 关于 / 技能 / 语言图 ────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,60px)}
.about-text p{color:var(--tx2);font-size:.95rem;margin-bottom:14px;max-width:60ch}
.about-text p:last-child{margin-bottom:0}
.about-text b{color:var(--tx);font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  border:1px solid var(--line);color:var(--tx2);padding:5px 9px;border-radius:var(--radius);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.tag:hover{border-color:var(--ac);color:var(--ac)}

.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.donut{position:relative;width:172px;height:172px;flex:none}
.donut svg{width:172px;height:172px;transform:rotate(-90deg)}
.donut circle{fill:none;transition:stroke-width .25s var(--ease),opacity .25s var(--ease)}
.donut-ct{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px;
}
.donut-ct b{font-family:var(--mono);font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.donut-ct span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}
.legend{display:flex;flex-direction:column;gap:9px;flex:1;min-width:140px}
.lg{display:flex;align-items:center;gap:9px;font-size:.83rem;cursor:default}
.lg i{width:9px;height:9px;flex:none;display:block;border-radius:var(--radius)}
.lg b{font-weight:600;flex:1;color:var(--tx)}
.lg span{font-family:var(--mono);font-size:11px;color:var(--tx3)}
.lg.dim{opacity:.42}

/* 语言条形 */
.bars{display:grid;gap:11px;margin-top:6px}
.bar-row{display:grid;grid-template-columns:74px 1fr 46px;align-items:center;gap:12px}
.bar-row .nm{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{height:6px;background:var(--line);border-radius:var(--radius);overflow:hidden}
.bar-fill{height:100%;width:0;background:var(--ac);transition:width .9s var(--ease)}
.bar-row .pc{font-family:var(--mono);font-size:11px;color:var(--tx3);text-align:right}

/* ── 11 数据卡 / 贡献热力图 ─────────────────────────────────── */
/* 数据卡：单元格描边式网格（空位露出页面底色，而非分割线色） */
.data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.data-card{background:var(--bg);padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.data-card h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);font-weight:600;margin-bottom:16px}
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:.86rem}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--tx2)}
.kv .v{font-family:var(--mono);font-weight:600}

/* 热力图：13 周 × 7 天，纯色阶（非渐变） */
.heat{display:grid;grid-template-columns:repeat(13,1fr);grid-auto-rows:1fr;gap:3px}
.heat i{width:100%;aspect-ratio:1;background:var(--line);border-radius:1px;display:block}
.heat i[data-l="1"]{background:var(--ac);opacity:.32}
.heat i[data-l="2"]{background:var(--ac);opacity:.58}
.heat i[data-l="3"]{background:var(--ac);opacity:.82}
.heat i[data-l="4"]{background:var(--ac)}
.heat-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.heat-key{display:flex;align-items:center;gap:4px}
.heat-key i{width:9px;height:9px;display:block;border-radius:1px;background:var(--line)}

/* ── 12 联系 ─────────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cc{
  background:var(--bg);padding:22px;display:flex;flex-direction:column;gap:14px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .24s var(--ease),color .24s var(--ease);
}
.cc:hover,.cc:focus-within{background:var(--ac);color:var(--ac-ink)}
.cc:hover .cc-ico,.cc:hover .cc-t,.cc:hover .cc-h{color:var(--ac-ink);opacity:.75}
.cc-top{display:flex;align-items:center;gap:11px}
.cc-ico{width:22px;height:22px;color:var(--tx2);transition:color .24s,opacity .24s}
.cc-t{font-weight:700;font-size:.98rem;transition:color .24s,opacity .24s}
.cc-h{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--tx3);word-break:break-all;transition:color .24s,opacity .24s}
.cc-a{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-top:auto}
.cc-a .arw{transition:transform .25s var(--ease)}
.cc:hover .cc-a .arw{transform:translate(3px,-3px)}

/* ── 数据块加载态与板块收尾按钮 ─────────────────────────────── */
.skel{display:flex;align-items:center;gap:10px;padding:24px 4px;color:var(--tx2);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.skel em{width:7px;height:7px;background:var(--ac);border-radius:50%;animation:pulse 1.1s infinite}
.cta-row{margin-top:28px}

/* ── 响应式（首页专属；导航/行列表/页脚的响应式规则在 site.css）── */
@media (max-width:940px){
  .hero-grid,.about-grid{grid-template-columns:1fr}
  .card-side{order:-1}
  .avatar,.avatar img{width:76px;height:76px}
  .donut-wrap{justify-content:center}
}
@media (max-width:820px){
  .sec{padding:56px 0}
}
@media (max-width:520px){
  .stats{grid-template-columns:1fr 1fr}
  .bar-row{grid-template-columns:64px 1fr 42px;gap:9px}
  .hero-actions .btn{flex:1;justify-content:center}
  .contact-grid{grid-template-columns:1fr}
}