/* ============================================================
   Make文档 · 视觉品质增强层 refine.css
   加载顺序：style.css → home.css → refine.css
   定位：只增强、不覆盖破坏性样式；出任何问题可直接摘掉本文件回滚。
   原则：
     1) 动效只服务于「理解当前发生了什么」，不做无意义的炫技；
     2) 全部动效尊重 prefers-reduced-motion；
     3) 无 JS 时内容必须照常可见（揭示动画由 .js-reveal 门控）；
     4) 工具类站点优先速度与可操作性，不遮挡内容、不延迟交互。
   ============================================================ */

/* ---------------- 1. 设计令牌补充 ---------------- */
:root {
  /* 留白刻度：4px 基准，向上取 8 的倍数与中间值。
     现有样式里散落的 12/16/20/34/46px 逐步收敛到这套刻度。 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --sp-11: 96px;

  /* 流动排版：视口 390px → 1440px 之间平滑缩放，
     解决原写死 44px/26px 在两端「小屏溢出、大屏偏小」的问题。
     系数说明：vw 取值刻意对齐原有响应式断点（≤768px 时原样式为 clamp(32px,4vw,48px)），
     避免中等屏幕（平板）上标题突然跳大挤爆两栏布局。 */
  --fs-display: clamp(31px, 4.4vw, 50px);
  --fs-h2:      clamp(21px, 2.6vw, 28px);
  --fs-h3:      clamp(16px, 1.8vw, 19px);
  --fs-lead:    clamp(15px, 1.4vw, 17.5px);

  /* 动效令牌：统一缓动与时长，避免各处手写 cubic-bezier 造成节奏打架 */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-spring:cubic-bezier(.34, 1.42, .64, 1);
  --dur-fast:   .16s;
  --dur:        .24s;
  --dur-slow:   .48s;

  /* 增强阴影：比原 shadow-md 层次更分明（近景更实、远景更散） */
  --shadow-lift: 0 6px 14px rgba(17, 24, 39, .06), 0 20px 44px rgba(17, 24, 39, .10);

  /* 辅助文字对比度修正：
     原 #64748B 在页面底色 #F6F8FC 上只有 4.48:1，差 0.02 未达 WCAG AA（正文需 4.5:1）。
     调暗到 #636F82 → 4.79:1（白色卡片上 5.09:1），肉眼几乎无差别但合规。
     已确认页脚等深色区域未引用此变量，无「深色底反被压暗」风险。 */
  --text-light: #636F82;
}

/* ---------------- 1.5 首屏光晕：品牌色的极淡晕染 ----------------
   用 background-image 而非伪元素，避免 z-index/层叠上下文带来的遮挡风险。
   纯 CSS 渐变，零请求、零布局开销，也不参与揭示动画。 */
.hero {
  background-image:
    radial-gradient(58% 52% at 50% 28%, rgba(37, 99, 235, .075), transparent 72%),
    radial-gradient(38% 38% at 82% 18%, rgba(109, 92, 231, .055), transparent 74%);
  background-repeat: no-repeat;
}

/* ---------------- 2. 排版：层级与节奏 ---------------- */

/* 首屏主标题：由写死 44px 改为流动字号，行高收紧提升标题的「紧实感」 */
.hero-home .hero-copy h1 {
  font-size: var(--fs-display);
  line-height: 1.14;
  letter-spacing: -.028em;
}
.hero h1 {
  letter-spacing: -.024em;
}
/* 副标题：放宽行高，中文长句更易读 */
.hero .subtitle,
.hero-home .hero-copy .subtitle {
  font-size: var(--fs-lead);
  line-height: 1.68;
  letter-spacing: -.005em;
}

/* 区块标题与分类标题：建立「display → h2 → h3」三级递减的清晰节奏 */
.section-title {
  font-size: var(--fs-h2);
  line-height: 1.26;
  letter-spacing: -.022em;
  margin: var(--sp-9) 0 var(--sp-5);
}
.tool-category {
  margin-bottom: var(--sp-8);
}
.tool-category h2 {
  font-size: var(--fs-h3);
  line-height: 1.35;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* 正文：中文行高提到 1.7，段宽受限时更舒适 */
.tool-card .t-desc {
  line-height: 1.72;
  letter-spacing: -.002em;
}

/* ---------------- 3. 留白：网格与容器呼吸感 ---------------- */

/* 卡片间距 15px → 18px，视觉分组更清晰但不牺牲信息密度 */
.tool-grid {
  gap: 18px;
}
/* 卡片内部：上下留白略大于左右，形成纵向阅读的呼吸节奏 */
.tool-card {
  padding: 22px 18px;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

/* ---------------- 4. 卡片：渐变描边与层次 ---------------- */

/* 悬停时浮现的品牌色渐变描边（用 mask 挖空中心，只留 1px 边框，
   不影响内部文字与背景，也不会触发重排） */
.tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .55), rgba(109, 92, 231, .32) 58%, rgba(37, 99, 235, 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}
.tool-card:hover::after,
.tool-card:focus-visible::after {
  opacity: 1;
}
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(37, 99, 235, .26);
}
/* 图标动效改用统一缓动，回弹更自然 */
.tool-card:hover .t-icon .fstack {
  transform: translateY(-3px) scale(1.06);
  transition: transform var(--dur) var(--ease-spring);
}

/* ---------------- 5. 按钮：光泽与按压反馈 ---------------- */

.btn {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              filter var(--dur) var(--ease-out);
}
/* 悬停时一道高光扫过（极淡，只在主色按钮上可见） */
.btn:not(.btn-outline):not(:disabled)::after {
  content: '';
  position: absolute;
  top: 0;
  left: -65%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .26), transparent);
  transform: skewX(-18deg);
  transition: left var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.btn:not(.btn-outline):not(:disabled):hover::after {
  left: 125%;
}
.btn:not(:disabled):active {
  transform: translateY(0) scale(.985);
}

/* ---------------- 6. 动效：入场揭示 ---------------- */

@keyframes mkRevealUp {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}

/* 关键：隐藏样式由 .js-reveal 门控。
   若 JS 未执行（脚本报错/被拦截），元素保持默认可见，不会出现「白屏看不见内容」。 */
.js-reveal [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-in {
  animation: mkRevealUp var(--dur-slow) var(--ease-out) forwards;
}
/* 动画结束后卸掉 will-change，避免长期占用合成层内存 */
.js-reveal [data-reveal].is-done {
  will-change: auto;
}

/* 桌面导航下拉项：原 min-height 38px 低于 44px 触控建议，
   在触屏笔记本/平板（带鼠标但用手指点）上容易点空。提到 42px 并加大纵向内边距。 */
.nav-drop a {
  min-height: 42px;
  padding-block: 9px;
}

/* ---------------- 7. 响应式收口 ---------------- */

/* 中屏：卡片两列时略收内边距，避免换行难看 */
@media (max-width: 768px) {
  .tool-grid {
    gap: 14px;
  }
  .tool-card {
    padding: 18px 15px;
  }
  .section-title {
    margin: var(--sp-8) 0 var(--sp-4);
  }
  .hero {
    padding: 40px 0 16px;
  }
}

/* 小屏：网格下限降到 148px，保证一行两列且文字不挤 */
@media (max-width: 430px) {
  .tool-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 10px;
  }
  .tool-card {
    padding: 15px 12px;
    border-radius: 13px;
  }
  .tool-card .t-name {
    font-size: 14.5px;
  }
  .tool-card .t-desc {
    font-size: 12.5px;
    line-height: 1.6;
  }
  .section-title {
    margin: var(--sp-7) 0 var(--sp-4);
  }
  .hero {
    padding: 30px 0 12px;
  }
}

/* 大屏：拉大留白，避免内容显得拥挤在小盒子里 */
@media (min-width: 1280px) {
  .tool-grid {
    gap: 20px;
  }
  .section-title {
    margin: var(--sp-10) 0 var(--sp-6);
  }
}

/* ---------------- 8. 降级：尊重系统偏好 ---------------- */

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-in {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
  .btn::after {
    display: none;
  }
  .tool-card:hover,
  .tool-card:hover .t-icon .fstack {
    transform: none;
  }
}