/* ============================================================
   HeiT · 首页（个人主页）重做
   参考 Microsoft / Apple 官网：白底、超大字号、大留白、
   整块视觉面板；动效克制（入场 / 视差 / hover）
   只作用于 index.html，不影响其它页
   ============================================================ */

body.hx-home{
  --hx-ink:#1d1d1f;
  --hx-sub:#6e6e73;
  --hx-blue:#0067b8;
  --hx-blue-2:#005a9e;
  --hx-band:#f5f5f7;
  --hx-panel:#f5f5f7;
  --hx-card:#ffffff;
  --hx-line:#e6e6e9;
  --hx-card-line:#ececef;
  --hx-grad:linear-gradient(96deg,#0078d4 0%,#4f6bff 52%,#9a5cff 100%);
  --hx-ease:cubic-bezier(.22,.85,.25,1);
  background:#fff;
}
[data-theme="dark"] body.hx-home,[data-theme="amoled"] body.hx-home{
  --hx-ink:#f5f5f7;
  --hx-sub:#a1a1a6;
  --hx-blue:#63b3ff;
  --hx-blue-2:#8cc8ff;
  --hx-band:#161618;
  --hx-panel:#1b1b1e;
  --hx-card:#202023;
  --hx-line:#2b2b2f;
  --hx-card-line:#333338;
  --hx-grad:linear-gradient(96deg,#5db4ff 0%,#9aa8ff 52%,#c79bff 100%);
  background:var(--bg);
}
[data-theme="amoled"] body.hx-home{background:#000}

.hx-main{overflow:clip}

/* ---------- 首屏 ---------- */
.hx-hero{
  position:relative;
  padding:clamp(56px,9vh,96px) 0 clamp(96px,13vh,150px);
  text-align:center;
  isolation:isolate;
}
.hx-hero-bg{position:absolute;inset:-10% -10% auto;height:130%;z-index:-1;pointer-events:none;overflow:hidden}
.hx-blob{
  position:absolute;display:block;border-radius:50%;
  opacity:.85;
  will-change:transform;
  transform:translate3d(calc(var(--hx-px,0) * 14px),calc(var(--hx-py,0) * 14px),0);
  transition:transform .6s var(--hx-ease);
}
.hx-blob.b1{
  width:min(66vw,880px);aspect-ratio:1.2;
  left:50%;top:-8%;
  translate:-50% 0;
  background:radial-gradient(closest-side,rgba(0,120,212,.16),rgba(0,120,212,0) 72%);
}
.hx-blob.b2{
  width:min(46vw,620px);aspect-ratio:1;
  right:2%;top:18%;
  background:radial-gradient(closest-side,rgba(122,92,255,.15),rgba(122,92,255,0) 72%);
}
.hx-blob.b3{
  width:min(40vw,540px);aspect-ratio:1;
  left:1%;top:30%;
  background:radial-gradient(closest-side,rgba(0,180,216,.13),rgba(0,180,216,0) 72%);
}
[data-theme="dark"] body.hx-home .hx-blob.b1{background:radial-gradient(closest-side,rgba(0,120,212,.22),transparent 70%)}
[data-theme="dark"] body.hx-home .hx-blob.b2{background:radial-gradient(closest-side,rgba(122,92,255,.2),transparent 70%)}
[data-theme="dark"] body.hx-home .hx-blob.b3{background:radial-gradient(closest-side,rgba(0,180,216,.16),transparent 70%)}

.hx-hero-in{position:relative;max-width:1040px}
.hx-kicker{
  margin:0;
  font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--hx-blue);
}
.hx-title{
  margin:20px 0 0;
  font-size:clamp(40px,7vw,88px);
  line-height:1.04;
  letter-spacing:-.045em;
  font-weight:700;
  color:var(--hx-ink);
  text-wrap:balance;
}
.hx-title .line{display:block}
.hx-grad{
  background:var(--hx-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hx-lede{
  margin:22px auto 0;
  max-width:38em;
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.7;
  color:var(--hx-sub);
  text-wrap:pretty;
}
.hx-acts{
  margin-top:34px;
  display:flex;align-items:center;justify-content:center;gap:10px 22px;flex-wrap:wrap;
}
.hx-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:48px;padding:0 26px;border-radius:999px;
  background:var(--hx-blue);color:#fff!important;
  font-size:15.5px;font-weight:600;letter-spacing:0;
  transition:background .25s,transform .3s var(--hx-ease);
}
.hx-btn:hover{background:var(--hx-blue-2);transform:translateY(-1px)}
.hx-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--hx-ease)}
.hx-btn:hover svg{transform:translateX(3px)}
.hx-quiet{
  display:inline-flex;align-items:center;gap:6px;
  height:48px;padding:0 6px;
  color:var(--hx-blue)!important;font-size:15.5px;font-weight:600;
}
.hx-quiet:hover{color:var(--hx-blue-2)!important}
.hx-quiet svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--hx-ease)}
.hx-quiet:hover svg{transform:translateX(4px)}

.hx-stats{
  margin:44px 0 0;padding:0;list-style:none;
  display:flex;align-items:center;justify-content:center;gap:clamp(22px,4vw,52px);
  color:var(--hx-sub);font-size:13.5px;
}
.hx-stats li{display:flex;align-items:baseline;gap:8px;flex:0 0 auto;white-space:nowrap}
.hx-stats b{
  font-size:19px;font-weight:600;letter-spacing:-.01em;
  color:var(--hx-ink);font-variant-numeric:tabular-nums;
}
.hx-scroll{
  position:absolute;left:50%;bottom:clamp(26px,4vh,48px);translate:-50% 0;
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hx-sub);
}
.hx-scroll span{
  width:1px;height:26px;background:currentColor;opacity:.55;
  transform-origin:top;
  animation:hx-cue 2.2s var(--hx-ease) infinite;
}
@keyframes hx-cue{
  0%{transform:scaleY(.2);opacity:.2}
  45%{transform:scaleY(1);opacity:.75}
  100%{transform:scaleY(.2);opacity:.2}
}

/* 首屏入场 */
.hx-rise{opacity:0;transform:translateY(22px)}
.hx-rise.on,
html:not([data-motion="off"]) .hx-hero .hx-rise{
  animation:hx-rise .95s var(--hx-ease) var(--d,0s) both;
}
@keyframes hx-rise{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

/* ---------- 板块 ---------- */
.hx-feat{padding:clamp(64px,10vh,124px) 0}
.hx-feat-in{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:center;gap:clamp(32px,6vw,88px);
}
.hx-feat.flip .hx-copy{order:2}
.hx-feat.flip .hx-panel{order:1}
.hx-num{
  display:inline-block;font-size:12.5px;font-weight:700;
  letter-spacing:.18em;color:var(--hx-blue);text-transform:uppercase;
}
.hx-feat h2{
  margin:14px 0 0;
  font-size:clamp(30px,4.4vw,54px);
  line-height:1.06;letter-spacing:-.045em;font-weight:700;
  color:var(--hx-ink);text-wrap:balance;
}
.hx-feat p{
  margin:18px 0 0;max-width:32em;
  font-size:clamp(15.5px,1.4vw,17px);line-height:1.75;
  color:var(--hx-sub);
}
.hx-cta{
  margin-top:26px;
  display:inline-flex;align-items:center;gap:6px;
  color:var(--hx-blue)!important;font-size:15.5px;font-weight:600;
}
.hx-cta:hover{color:var(--hx-blue-2)!important}
.hx-cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--hx-ease)}
.hx-cta:hover svg{transform:translateX(4px)}

/* 视觉面板 */
.hx-panel{
  position:relative;display:grid;place-items:center;
  aspect-ratio:5/4;border-radius:28px;
  background:var(--hx-panel);
  overflow:hidden;
}
.hx-par{width:100%;height:100%;display:grid;place-items:center;will-change:transform}
.hx-panel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.035);
}
[data-theme="dark"] body.hx-home .hx-panel::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}

/* 画廊面板：三张照片叠放 */
.hx-shots{position:relative;width:80%;height:78%}
.hx-shot{
  position:absolute;margin:0;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  background:#0b0f17;
  box-shadow:0 18px 40px -18px rgba(6,10,20,.55);
  transition:transform .7s var(--hx-ease);
}
.hx-shot img{display:block;width:100%;height:100%;object-fit:cover}
.hx-shot .hx-shot-icon{
  width:56%;height:auto;aspect-ratio:1/1;border-radius:26%;
  object-fit:cover;
  box-shadow:0 22px 44px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.28) inset;
  animation:hx-icon-float 7s ease-in-out infinite;
}
@keyframes hx-icon-float{
  0%,100%{transform:translateY(0) rotate(-1.2deg)}
  50%{transform:translateY(-9px) rotate(1.2deg)}
}
.hx-shot.s1{width:58%;left:0;top:12%;transform:rotate(-5.5deg)}
.hx-shot.s2{width:52%;right:0;top:0;transform:rotate(4deg)}
.hx-shot.s3{width:44%;left:24%;bottom:0;transform:rotate(-1deg)}
.hx-feat:hover .s1{transform:rotate(-8deg) translate(-10px,-6px)}
.hx-feat:hover .s2{transform:rotate(6.5deg) translate(10px,-6px)}
.hx-feat:hover .s3{transform:rotate(0deg) translateY(6px)}

/* 资源面板：一张白色清单 */
.hx-list{
  width:76%;background:var(--hx-card);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 54px -30px rgba(6,10,20,.4);
}
.hx-row{display:flex;align-items:center;gap:12px;padding:14px 16px}
.hx-row + .hx-row{border-top:1px solid var(--hx-card-line)}
.hx-row .ic{
  width:36px;height:36px;flex:0 0 auto;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(0,103,184,.1);color:var(--hx-blue);
}
[data-theme="dark"] body.hx-home .hx-row .ic{background:rgba(99,179,255,.14)}
.hx-row .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hx-row .tx{min-width:0;flex:1}
.hx-row .tx b{display:block;font-size:14px;font-weight:600;color:var(--hx-ink);letter-spacing:-.01em}
.hx-row .tx span{display:block;margin-top:2px;font-size:12px;color:var(--hx-sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-row .go{color:var(--hx-sub)}
.hx-row .go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 音乐面板：一个小播放器 */
.hx-player{
  width:min(76%,330px);padding:16px;
  background:var(--hx-card);border-radius:20px;
  box-shadow:0 26px 60px -32px rgba(6,10,20,.45);
}
.hx-cover{
  position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;
  background:linear-gradient(140deg,#0078d4 0%,#4f6bff 46%,#a45cff 74%,#ff9bb8 100%);
  display:grid;place-items:center;color:#fff;
}
.hx-cover svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.hx-eq{display:flex;align-items:flex-end;gap:3px;height:18px}
.hx-eq i{width:3px;border-radius:2px;background:var(--hx-blue);opacity:.85;animation:hx-eq 1.15s ease-in-out infinite}
.hx-eq i:nth-child(1){height:35%;animation-delay:-.2s}
.hx-eq i:nth-child(2){height:80%;animation-delay:-.5s}
.hx-eq i:nth-child(3){height:55%;animation-delay:-.85s}
.hx-eq i:nth-child(4){height:100%;animation-delay:-.35s}
.hx-eq i:nth-child(5){height:45%;animation-delay:-.7s}
@keyframes hx-eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.hx-pmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.hx-pmeta b{font-size:14px;font-weight:600;color:var(--hx-ink)}
.hx-pmeta span{font-size:12px;color:var(--hx-sub);font-variant-numeric:tabular-nums}
.hx-prog{height:3px;border-radius:3px;background:rgba(0,0,0,.1);margin-top:10px;overflow:hidden}
[data-theme="dark"] body.hx-home .hx-prog{background:rgba(255,255,255,.14)}
.hx-prog i{display:block;width:32%;height:100%;background:var(--hx-blue);border-radius:3px}
.hx-pctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;color:var(--hx-sub)}
.hx-pctrl span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.05)}
[data-theme="dark"] body.hx-home .hx-pctrl span{background:rgba(255,255,255,.08)}
.hx-pctrl span.main{width:38px;height:38px;background:var(--hx-blue);color:#fff}
.hx-pctrl svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hx-pctrl span.main svg{width:15px;height:15px;fill:currentColor;stroke:none}

/* 工具面板：2×2 小格子 */
.hx-tiles{width:84%;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hx-tile{
  display:flex;flex-direction:column;gap:10px;padding:16px;
  background:var(--hx-card);border-radius:16px;
  box-shadow:0 18px 40px -32px rgba(6,10,20,.4);
  transition:transform .5s var(--hx-ease),box-shadow .5s var(--hx-ease);
}
.hx-feat:hover .hx-tile{box-shadow:0 22px 46px -30px rgba(6,10,20,.5)}
.hx-feat:hover .hx-tile:nth-child(1){transform:translate(-4px,-4px)}
.hx-feat:hover .hx-tile:nth-child(2){transform:translate(4px,-4px)}
.hx-feat:hover .hx-tile:nth-child(3){transform:translate(-4px,4px)}
.hx-feat:hover .hx-tile:nth-child(4){transform:translate(4px,4px)}
.hx-tile .ic{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(0,103,184,.1);color:var(--hx-blue);
}
[data-theme="dark"] body.hx-home .hx-tile .ic{background:rgba(99,179,255,.14)}
.hx-tile .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hx-tile b{font-size:13.5px;font-weight:600;color:var(--hx-ink);line-height:1.35}
.hx-tile span{font-size:11.5px;color:var(--hx-sub)}

/* ---------- 工具区 ---------- */
.hx-tools{
  padding:clamp(60px,9vh,104px) 0 clamp(66px,10vh,112px);
  background:var(--hx-band);
}
.hx-tools-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin-bottom:30px;
}
.hx-tools-head h2{
  margin:0;font-size:clamp(28px,3.6vw,42px);
  letter-spacing:-.04em;line-height:1.08;color:var(--hx-ink);font-weight:700;
}
.hx-tools-head p{margin:10px 0 0;max-width:36em;color:var(--hx-sub);font-size:15.5px}
.hx-tools-head .hx-cta{margin-top:0}

.hx-home #home-tools{grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.hx-home #home-tools .card{
  padding:22px;border:1px solid var(--hx-card-line);border-radius:18px;
  background:var(--hx-card)!important;
  box-shadow:0 1px 2px rgba(6,10,20,.04);
  transition:transform .45s var(--hx-ease),box-shadow .45s var(--hx-ease),border-color .3s;
}
.hx-home #home-tools .card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 46px -26px rgba(6,10,20,.28);
  border-color:transparent;
}
.hx-home #home-tools .card h3{font-size:16.5px;letter-spacing:-.02em;color:var(--hx-ink)}
.hx-home #home-tools .card-desc{color:var(--hx-sub)}
.hx-home #home-tools .card .card-ic{background:rgba(0,103,184,.1);color:var(--hx-blue);border-radius:10px}
[data-theme="dark"] body.hx-home #home-tools .card .card-ic{background:rgba(99,179,255,.14)}
.hx-home #home-tools .card .tag{background:rgba(0,0,0,.05);color:var(--hx-sub)}
[data-theme="dark"] body.hx-home #home-tools .card .tag{background:rgba(255,255,255,.07)}
.hx-home #home-tools .card .card-enter{color:var(--hx-blue)}

/* ---------- 收尾 ---------- */
.hx-close{position:relative;text-align:center;padding:clamp(76px,12vh,150px) 0 clamp(80px,12vh,140px);overflow:hidden}
.hx-close::before{
  content:"";position:absolute;left:50%;top:0;translate:-50% 0;
  width:min(80vw,900px);height:420px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(79,107,255,.10),transparent 70%);
  z-index:-1;
}
.hx-close h2{
  margin:0;font-size:clamp(30px,5vw,58px);line-height:1.08;
  letter-spacing:-.045em;font-weight:700;color:var(--hx-ink);text-wrap:balance;
}
.hx-close h2 em{
  font-style:normal;
  background:var(--hx-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hx-close p{margin:20px auto 0;max-width:34em;color:var(--hx-sub);font-size:16.5px}
.hx-close .hx-acts{margin-top:32px}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .hx-feat-in{grid-template-columns:1fr;gap:34px}
  .hx-feat.flip .hx-copy{order:1}
  .hx-feat.flip .hx-panel{order:2}
  .hx-copy{max-width:640px}
  .hx-panel{aspect-ratio:4/3;border-radius:22px;width:100%;max-width:720px;margin:0 auto}
  .hx-tools-head{align-items:flex-start;flex-direction:column;gap:12px}
}
@media (max-width:640px){
  .hx-hero{padding-top:44px}
  .hx-title{font-size:clamp(34px,10.4vw,46px)}
  .hx-stats{flex-wrap:wrap;gap:12px 26px;justify-content:center}
  .hx-scroll{display:none}
  .hx-panel{aspect-ratio:1/1}
  .hx-shots{width:86%;height:74%}
  .hx-list{width:88%}
  .hx-player{width:min(82%,300px)}
  .hx-tiles{width:90%;gap:10px}
  .hx-home #home-tools{grid-template-columns:1fr 1fr;gap:10px}
  .hx-home #home-tools .card{padding:16px}
  .hx-home #home-tools .card .card-desc{display:none}
}

/* ---------- 降低动效 ---------- */
@media (prefers-reduced-motion:reduce){
  .hx-blob,.hx-eq i,.hx-scroll span,.hx-shot-icon{animation:none!important}
  .hx-rise,.hx-hero .hx-rise{animation:none!important;opacity:1!important;transform:none!important}
  .hx-shot,.hx-tile,.hx-panel .hx-par{transition:none!important}
}
[data-motion="off"] .hx-blob,
[data-motion="off"] .hx-eq i,
[data-motion="off"] .hx-scroll span,
[data-motion="off"] .hx-shot-icon{animation:none!important}
[data-motion="off"] .hx-rise{animation:none!important;opacity:1!important;transform:none!important}
[data-perf="lite"] .hx-blob{transition:none;transform:none}

/* ============================================================
   v2 首页：跟全站新设计层对齐（墨蓝 + 靛/薄荷），首屏更有呼吸
   ============================================================ */
body.hx-home{
  --hx-ink:var(--text);
  --hx-sub:var(--muted);
  --hx-blue:var(--accent);
  --hx-blue-2:var(--accent-2);
  --hx-band:transparent;
  --hx-panel:var(--surface-2);
  --hx-card:var(--surface-2);
  --hx-line:var(--line);
  --hx-card-line:var(--line-2);
  --hx-grad:linear-gradient(96deg,var(--accent),var(--accent-2) 58%,var(--accent-3));
  background:transparent;
}
[data-theme="dark"] body.hx-home,[data-theme="amoled"] body.hx-home{background:transparent}

.hx-hero{padding:clamp(64px,10vh,118px) 0 clamp(88px,12vh,140px)}
.hx-hero-in{max-width:1000px}
.hx-kicker{color:var(--accent);font-size:11.5px;letter-spacing:.18em}
.hx-title{
  margin-top:22px;
  font-size:clamp(38px,6.6vw,78px);
  line-height:1.06;
  letter-spacing:-.042em;
  font-weight:770;
}
.hx-lede{margin-top:26px;max-width:34em;font-size:clamp(15.5px,1.5vw,18px);line-height:1.78;color:var(--muted)}
.hx-acts{margin-top:38px;gap:12px 26px}
.hx-btn{height:50px;padding:0 28px;border-radius:999px;font-size:15px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink)!important;
  box-shadow:0 18px 40px -20px var(--accent)}
.hx-btn:hover{filter:brightness(1.05);background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.hx-quiet{color:var(--muted)!important}
.hx-quiet:hover{color:var(--accent)!important}
.hx-stats{margin-top:46px;gap:clamp(20px,3.4vw,44px);font-size:12.5px;color:var(--dim)}
.hx-stats b{font-size:20px;font-weight:700;color:var(--text)}
.hx-stats li{padding:8px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}

.hx-feat{padding:clamp(56px,8vh,104px) 0}
.hx-feat h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.032em;line-height:1.14}
.hx-feat p{font-size:15.5px;line-height:1.8;color:var(--muted)}
.hx-copy .hx-num{color:var(--accent);letter-spacing:.16em}
.hx-panel .hx-par,.hx-shot,.hx-tile,.hx-row{border-radius:14px}

.hx-tools{padding:clamp(48px,7vh,88px) 0}
.hx-close{padding:clamp(56px,8vh,100px) 0}
.hx-close h2{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em}
.hx-close em{color:var(--accent);font-style:normal}

[data-perf="lite"] .hx-blob{display:none}
@media (max-width:640px){
  .hx-hero{padding:44px 0 72px}
  .hx-title{font-size:clamp(32px,9.6vw,44px);line-height:1.12}
  .hx-stats{gap:10px;font-size:10.5px}
  .hx-stats li{padding:6px 9px;gap:5px}
  .hx-stats b{font-size:15px}
  .hx-acts{gap:10px}
  .hx-btn{height:46px;padding:0 22px;font-size:14.5px}
}