/* ==========================================================================
   CreeperConfettiPro — 落地页 / Landing page
   只作用于 body[data-page="home"]，不改变 wiki 各页的 site.css 规则。
   ========================================================================== */

body[data-page="home"] .main {
  padding: 0;
  max-width: none;
}

.home-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- 第一屏 / Hero ---------- */
.home-hero {
  position: relative;
  min-height: calc(100vh - var(--topbar-h));
  display: flex;
  align-items: center;
  padding: clamp(64px, 8vw, 124px) 0 clamp(56px, 7vw, 104px);
  overflow: hidden;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: auto -10% -30% -10%;
  height: 70%;
  background:
    radial-gradient(48% 60% at 22% 100%, var(--blob-1), transparent 70%),
    radial-gradient(42% 55% at 78% 92%, var(--blob-2), transparent 72%);
  filter: blur(28px);
  opacity: .55;
  pointer-events: none;
}

.hh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 6px 13px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
}

.hh-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: dotPulse 2.6s ease-out infinite;
}

@keyframes dotPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 52%, transparent); }
  55% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hh-title {
  margin: 0 0 22px;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 780;
  color: var(--text);
  max-width: none;
}

/* 中文标题：不做负字距，避免汉字相互挤压 */
html[lang^="zh"] .hh-title {
  letter-spacing: 0;
  font-weight: 750;
  line-height: 1.2;
}

.hh-lead {
  margin: 0 auto 30px;
  max-width: 620px;
  font-size: clamp(15.5px, 1.5vw, 18px);
  line-height: 1.66;
  color: var(--text-2);
}

.hh-lead b { color: var(--text); font-weight: 650; }

.hh-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 46px;
}

.btn-lg {
  height: auto;
  padding: 13px 24px;
  font-size: 14.5px;
  border-radius: 11px;
}

/* 首屏文案栏 */
.hh-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
}

.hh-copy {
  min-width: 0;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hh-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 780px;
  margin: clamp(56px, 7vw, 92px) auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.hh-facts > div {
  padding: 0 20px;
  border-left: 1px solid var(--border);
  text-align: center;
}
.hh-facts > div:first-child { padding-left: 0; border-left: 0; }

.hh-facts dt {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 760;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hh-facts dd {
  margin: 6px 0 0;
  font-size: 12.8px;
  line-height: 1.45;
  color: var(--muted);
}

/* 入场交给 GSAP（assets/motion-home.js）；无 JS 时内容默认可见 */

/* SplitText 拆分后的字符 / 单词 */
.cc-char,
.cc-word {
  display: inline-block;
  will-change: transform;
}

/* ---------- ShinyText：一道光泽扫过文字 ---------- */
/* 注意：不能用 currentColor —— color 被设为 transparent 后它也会变透明 */
.shiny {
  background-image: linear-gradient(100deg,
    var(--text-2) 0%,
    var(--text-2) 38%,
    var(--accent) 50%,
    var(--text-2) 62%,
    var(--text-2) 100%);
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shinySweep 6s linear infinite;
}

@keyframes shinySweep {
  0% { background-position: 130% 0; }
  60%, 100% { background-position: -30% 0; }
}

/* ---------- GradientText：渐变缓慢流动 ---------- */
.grad-flow {
  background-image: linear-gradient(100deg,
    var(--accent-strong) 0%,
    var(--accent) 28%,
    #45d6c8 52%,
    var(--accent) 76%,
    var(--accent-strong) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradFlow 9s ease-in-out infinite;
}

@keyframes gradFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 降低动效时，文字效果保持静态可读 */
@media (prefers-reduced-motion: reduce) {
  .shiny, .grad-flow { animation: none; }
  .shiny { background-position: 50% 0; }
  .grad-flow { background-position: 30% 50%; }
}

/* ---------- 通用分区 ---------- */
.main.home { counter-reset: sec; }

.home-sec {
  counter-increment: sec;
  padding: clamp(104px, 11vw, 168px) 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 52%, transparent);
}

.hs-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* 章节序号，给出编辑式的节奏感 */
.hs-kicker::before {
  content: counter(sec, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: .7;
  letter-spacing: .04em;
}

.hs-kicker::after {
  content: "";
  width: 26px;
  height: 1px;
  background: color-mix(in srgb, var(--border-strong) 70%, transparent);
}

.hs-title {
  margin: 0 0 22px;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.16;
  letter-spacing: -.028em;
  font-weight: 750;
  color: var(--text);
  max-width: 26ch;
  border: 0;
  padding: 0;
}
.hs-title::after { display: none; }

html[lang^="zh"] .hs-title {
  max-width: 17em;
  letter-spacing: 0;
  line-height: 1.28;
}

.hs-lead {
  margin: 0 0 clamp(38px, 4.4vw, 56px);
  max-width: 680px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
}

/* 流程图容器 */
.hs-flow {
  margin: 0 0 26px;
  padding: 22px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.hs-flow svg { display: block; width: 100%; min-width: 640px; height: auto; }

.hs-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--warn-border);
  border-left: 3px solid var(--warn);
  border-radius: 12px;
  background: color-mix(in srgb, var(--warn-soft) 74%, transparent);
}
.hs-callout p { margin: 0; font-size: 14px; line-height: 1.68; color: var(--text-2); }
.hs-badge {
  flex: none;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--warn);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ---------- 能力卡片 ---------- */
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 24px);
}

.home-card {
  position: relative;
  padding: 26px 26px 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s;
}

/* 跟随指针的柔光（与 wiki 卡片同一套做法） */
.home-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity .32s var(--ease);
  pointer-events: none;
}

.home-card:hover::after { opacity: 1; }

.home-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.hc-num {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

.home-card h3 {
  margin: 0 0 9px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--text);
}

.home-card p {
  margin: 0;
  font-size: 14.2px;
  line-height: 1.66;
  color: var(--muted);
}

/* ---------- 安装分区（左右） ---------- */
.home-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}

.hs-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hs;
}

.hs-steps li {
  position: relative;
  padding: 0 0 16px 38px;
  font-size: 14.6px;
  line-height: 1.62;
  color: var(--text-2);
  counter-increment: hs;
}
.hs-steps li:last-child { padding-bottom: 0; }

.hs-steps li::before {
  content: counter(hs);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-strong);
  font-size: 11.5px;
  font-weight: 750;
}

.hs-steps li::after {
  content: "";
  position: absolute;
  left: 11.5px;
  top: 28px;
  bottom: 4px;
  width: 1px;
  background: var(--border);
}
.hs-steps li:last-child::after { display: none; }

.hs-code {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--code-bg);
  box-shadow: var(--shadow-md);
}

.hs-code-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: #8ea3b5;
  font-size: 12px;
  font-family: var(--mono);
}

.hs-lights { display: inline-flex; gap: 5px; }
.hs-lights i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a4a5a;
}
.hs-lights i:first-child { background: #e0655c; }
.hs-lights i:nth-child(2) { background: #e0b24e; }
.hs-lights i:nth-child(3) { background: #4bbd7c; }

.hs-code pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--code-text);
  font-family: var(--mono);
  font-size: 12.8px;
  line-height: 1.8;
}
.hs-code pre code { background: none; padding: 0; color: inherit; }
.hs-code .tok-c { color: #6b8299; }
.hs-code .tok-k { color: #6ee6a6; }
.hs-code .tok-n { color: #e0b24e; }

.hs-note {
  margin: 14px 0 0;
  font-size: 12.8px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- 文档入口 ---------- */
.home-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 18px);
  margin-bottom: 36px;
}

.home-links a {
  display: block;
  padding: 18px 18px 20px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg-elev);
  text-decoration: none;
  transition: transform .22s var(--ease), border-color .22s, box-shadow .22s;
}
.home-links a:hover {
  transform: translateY(-2px);
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.home-links b {
  display: block;
  margin-bottom: 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}
.home-links span {
  display: block;
  font-size: 12.8px;
  line-height: 1.55;
  color: var(--muted);
}

.home-cta-line { margin: 0; }

/* 按下时轻微下沉，给点击一个实体感 */
.home .btn:active {
  transform: translateY(1px) scale(.986);
}

/* ---------- 页脚 ---------- */
.home-foot {
  max-width: 1120px;
  margin: 0 auto;
  padding: 30px 32px 56px;
  border-top: 1px solid var(--border);
}
/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .hh-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .home-wrap { padding: 0 22px; }
  .home-hero { padding: 56px 0 44px; min-height: 0; }
  .hh-title { max-width: none; }
  .hh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .hh-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .home-sec { padding: 62px 0; }
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-links { grid-template-columns: minmax(0, 1fr); }
  .hh-actions .btn { width: 100%; justify-content: center; }
  .home-foot { padding: 26px 22px 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-card:hover, .home-links a:hover { transform: none; }
}