/* ==========================================================================
   Base：重置、排版、通用工具类、动效初始态
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }

a { color: var(--c-lemon); text-decoration: none; }
a:hover { color: var(--c-lemon-hi); }

:focus-visible { outline: 2px solid var(--c-lemon); outline-offset: 3px; border-radius: 8px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--c-lemon); color: var(--c-on-lemon); font-weight: 600;
  transition: top var(--dur-fast);
}
.skip-link:focus { top: 12px; color: var(--c-on-lemon); }

.is-hidden { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sec-y) 0; }
.sec:last-of-type { padding-bottom: var(--sec-y); }
.sec-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: clamp(36px, 4vw, 56px);
}
.sec-head__title { display: flex; flex-direction: column; gap: 18px; }

/* ---------- Typography ---------- */
.mono { font-family: var(--font-mono); }

/* 中文标题按短语断行：每个 .ph 内部不折行，只在短语之间折行，避免孤字 */
.ph { display: inline-block; }

/* 大标题逐行遮罩入场：每行一个 .ln，行内不折行（断行位置由 HTML 决定） */
.ln { display: block; overflow: hidden; padding: 0.04em 0 0.1em; white-space: nowrap; }
.ln > span { display: inline-block; }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--c-lemon);
}
.kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; }

.h1 { font-size: var(--fs-h1); line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; }
.h2 { font-size: var(--fs-h2); line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; }
.h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }

.lead, .desc {
  font-family: var(--font-body);
  color: var(--c-muted);
  line-height: 1.85;
  text-wrap: pretty;
}
.lead { font-size: var(--fs-lead); }
.desc { font-size: 15px; }

/* 高亮关键词：品牌渐变 + 扫光（扫光由 GSAP 驱动 background-position） */
.kw {
  background: linear-gradient(100deg, #d7f94a 0%, #d7f94a 33%, #fbffe6 48%, #5ee6f0 60%, #d7f94a 78%, #d7f94a 100%);
  background-size: 300% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-lemon);
}

/* ---------- Motion 初始态 ----------
   仅当 JS 已就绪（html.js）且用户未开启"减少动态效果"时才隐藏，
   脚本加载失败时 head 中的兜底脚本会移除 .js，内容始终可见。 */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 28px, 0); }
  .js [data-intro]:not(.is-in) { opacity: 0; }
  .js .ln:not(.is-in) > span { transform: translate3d(0, 110%, 0); }
}

/* 循环动画：未进入视口（或首屏动画未完成）时暂停，节省性能 */
.js [data-live]:not(.is-live) *,
.js [data-live]:not(.is-live)::before,
.js [data-live]:not(.is-live)::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}