/* ============================================================
   补充样式  polish.css
   ------------------------------------------------------------
   在 tailwind.css 之后加载。原则：
   · 不改颜色变量、不改间距、不改圆角 —— 骨架视觉以参考站为准
   · 做三件事：
       1) 字体替换为思源黑体（Noto Sans SC），全站生效（含所有次级页面）
       2) 渐变文字调整 —— 首页名字 + 各栏目/文章页大标题统一处理
       3) 补齐参考站没编译进 CSS 的交互动效（hover 上浮 / 阴影 / 变色）
   ============================================================ */

/* ---------- 1. 全站字体：思源黑体 ---------- */
html,
body,
input,
button,
textarea,
select,
.ns-shell,
.garden-shell {
  font-family: "Noto Sans SC Variable", "Noto Sans SC", "Geist", ui-sans-serif,
    system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    sans-serif;
}

/* 可变字体自带全部字重，关掉浏览器合成加粗，避免「假粗」发虚 */
b,
strong,
h1,
h2,
h3,
h4 {
  font-synthesis-weight: none;
}

/* ---------- 2. 渐变文字 ---------- */

/* 2.1 首页名字（参考站原本就有 .gradient-text）—— 微调角度与色标，更顺滑 */
.gradient-text {
  background: linear-gradient(118deg, #6366f1 0%, #7c5cf6 42%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 2.2 次级页面的大标题：极轻的渐变（正文色 → 主色），让每个栏目页也有质感 */
main.garden-shell > div:first-child > h1,
main.garden-shell > div:first-child > h2 {
  background: linear-gradient(
    112deg,
    var(--foreground) 0%,
    var(--foreground) 48%,
    color-mix(in oklab, var(--primary) 92%, var(--foreground)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 深色模式下主色更亮，收敛一点避免过曝 */
.dark main.garden-shell > div:first-child > h1,
.dark main.garden-shell > div:first-child > h2 {
  background: linear-gradient(
    112deg,
    var(--foreground) 0%,
    var(--foreground) 52%,
    color-mix(in oklab, var(--primary) 78%, var(--foreground)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* 页头里的小标签也跟着主色走，和渐变标题呼应 */
main.garden-shell > div:first-child > p:first-child {
  letter-spacing: 0.06em;
}

/* ---------- 3. 列表项：悬停略微上浮 + 阴影（参考站首页卡片同款手感） ---------- */
.panel-hover {
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  will-change: transform;
}
.panel-hover:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  background-color: var(--card);
  box-shadow: 0 10px 30px -14px color-mix(in oklab, var(--foreground) 30%, transparent);
}

.panel-hover h2 {
  transition: color 0.2s ease;
}
.panel-hover:hover h2 {
  color: var(--primary);
}

/* ---------- 4. 标签 / 技能胶囊的悬停反馈 ---------- */
.tag-pill,
.skill-pill {
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.panel-hover:hover .tag-pill {
  border-color: color-mix(in oklab, var(--primary) 35%, transparent);
}
a:hover > .tag-pill,
a:hover .tag-pill {
  color: var(--primary);
}

/* ---------- 5. 正文链接：下划线随悬停加深 ---------- */
.prose a {
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.prose a:hover {
  border-bottom-color: var(--primary);
}

/* ---------- 6. 小屏：不做位移，避免误触感 ---------- */
@media (max-width: 640px) {
  .panel-hover:hover {
    transform: none;
  }
}

/* ---------- 7. 拦掉 Netlify 自动注入的「Powered by Netlify」推广徽章 ----------
   该徽章是一个固定定位、z-index 极高的 iframe（id=nl-badge-frame），
   默认对所有访客显示，还会压住右下角的 AI 分身入口。
   主拦截在 BaseLayout 里（提前写 localStorage，让它的脚本直接 return）；
   这里再兜一层样式，万一它以后换了存储键名也不会露出来。
   注：用 !important 才能压过 iframe 上的内联样式。 */
#nl-badge-frame,
#nl-hud-frame,
iframe[title="Powered by Netlify"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}