/* ============================================================
 * 澄源知本官网 · 首页专属样式
 * 依赖 tokens.css 令牌与 base.css 通用类（.container/.section/
 * .btn/.card/.eyebrow/.display/.lead/.gold-text/.divider-herb…）
 * 本文件只写首页区块样式，不重复定义通用类。
 * ============================================================ */

/* ---------------- 1. Hero ---------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height) + var(--sp-12)) 0 var(--sp-16);
  background: radial-gradient(120% 90% at 70% 10%, var(--pine-900) 0%, var(--pine-950) 55%, var(--pine-990) 100%);
}

.hero__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* 鎏金径向光晕 / 山峦墨影叠层（资产代理产出 hero-glow.svg） */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../img/hero-glow.svg") center bottom / cover no-repeat;
  opacity: 0.8;
}

.hero__seal-watermark {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(52vw, 620px);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  filter: saturate(1.1);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-16);
  align-items: center;
}

.hero__positioning {
  max-width: 100%;
  letter-spacing: 0.12em;
  line-height: 1.8;
}

.hero__positioning::before {
  flex-shrink: 0;
}

.hero__title {
  margin: var(--sp-4) 0 var(--sp-6);
  font-size: var(--fs-display);
  line-height: 1.18;
  letter-spacing: 0.04em;
  color: var(--ink-strong);
}

.hero__lead {
  max-width: 34em;
  color: var(--ink-body);
  line-height: 1.9;
  margin: 0 0 var(--sp-8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* 两个静态地址仅显示一个入口，首次渲染及旋转屏幕均不依赖脚本。 */
.hero__actions .hero__web-entry--desktop {
  display: none;
}

@media (min-width: 1024px) {
  .hero__actions .hero__web-entry--mobile {
    display: none;
  }

  .hero__actions .hero__web-entry--desktop {
    display: inline-flex;
  }
}

/* 三设备产品图组合 */
.hero__shots-stage {
  position: relative;
  aspect-ratio: 5 / 4;
  transform-style: preserve-3d;
  perspective: 900px;
}

.shot {
  position: absolute;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-med) var(--ease-out);
  will-change: transform;
}

.shot--pc {
  width: 86%;
  left: 0;
  top: 8%;
  z-index: 1;
  transform: translateZ(0);
}

.shot--web {
  width: 58%;
  right: 0;
  top: 0;
  z-index: 2;
  transform: translateZ(36px);
}

.shot--app {
  width: 26%;
  right: 8%;
  bottom: 2%;
  z-index: 3;
  transform: translateZ(72px);
  filter: drop-shadow(0 12px 28px rgba(3, 12, 9, 0.6));
}

/* ---------------- 2. 数据带 ---------------- */
.stats {
  border-top: var(--line-faint);
  border-bottom: var(--line-faint);
  background: linear-gradient(180deg, rgba(201, 168, 106, 0.05), rgba(201, 168, 106, 0.015));
  padding: var(--sp-12) 0;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
  text-align: center;
}

.stat__num {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
}

.stat__suffix {
  font-size: 0.55em;
  letter-spacing: 0.08em;
}

.stat__label {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-muted);
  letter-spacing: 0.12em;
}

/* ---------------- 3. 平台能力 ---------------- */
.features__title,
.crafts__title,
.flow__title {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: var(--fs-h1);
  color: var(--ink-strong);
}

.features__lead,
.crafts__lead {
  max-width: 36em;
  color: var(--ink-body);
  line-height: 1.9;
  margin: 0 0 var(--sp-12);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.feature-card {
  padding: var(--sp-8);
}

.feature-card__icon {
  width: 40px;
  height: 40px;
  color: var(--gold-500);
  margin-bottom: var(--sp-5, 20px);
  filter: drop-shadow(0 0 6px rgba(201, 168, 106, 0.25));
}

.feature-card__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--ink-strong);
  letter-spacing: 0.06em;
}

.feature-card__desc {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-body);
  line-height: 1.85;
}

/* ---------------- 4. 制作工艺 ---------------- */
.crafts__strip {
  display: flex;
  gap: var(--sp-4);
}

.craft {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5, 20px);
  padding: var(--sp-8) var(--sp-4) var(--sp-6);
  background: var(--pine-900);
  border: var(--line-faint);
  border-radius: var(--radius-l);
  cursor: pointer;
  overflow: hidden;
  transition:
    flex-grow var(--dur-med) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    background var(--dur-med) var(--ease-out);
}

.craft:hover,
.craft:focus-visible,
.craft.is-active {
  flex-grow: 2.2;
  border-color: rgba(201, 168, 106, 0.45);
  background: var(--pine-850);
  box-shadow: var(--shadow-card), var(--glow-gold);
  outline: none;
}

/* 鎏金刻度环 */
.craft__ring {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, var(--pine-850) 58%, transparent 59%),
    conic-gradient(from -90deg,
      var(--gold-600) 0deg, var(--gold-400) 90deg,
      var(--gold-500) 180deg, var(--gold-600) 270deg, var(--gold-400) 360deg);
  box-shadow: inset 0 0 0 1px rgba(201, 168, 106, 0.35), 0 0 18px rgba(201, 168, 106, 0.12);
}

.craft__ring::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(201, 168, 106, 0.4);
}

.craft__index {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--gold-400);
  text-shadow: 0 0 10px rgba(201, 168, 106, 0.4);
}

/* 竖排宋体工艺名 */
.craft__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--ink-strong);
  letter-spacing: 0.3em;
  writing-mode: vertical-rl;
  transition: letter-spacing var(--dur-med) var(--ease-out);
}

.craft.is-active .craft__name,
.craft:hover .craft__name {
  letter-spacing: 0.34em;
}

/* hover 展开的详情 */
.craft__detail {
  max-height: 0;
  opacity: 0;
  transform: translateY(10px);
  text-align: center;
  overflow: hidden;
  transition:
    max-height var(--dur-med) var(--ease-out),
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}

.craft.is-active .craft__detail,
.craft:hover .craft__detail,
.craft:focus-visible .craft__detail {
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
}

.craft__sub {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  color: var(--gold-500);
  letter-spacing: 0.2em;
}

.craft__desc {
  margin: 0;
  font-size: var(--fs-tiny);
  color: var(--ink-body);
  line-height: 1.8;
  max-width: 16em;
}

/* ---------------- 5. 五步时间线 ---------------- */
.flow__line {
  position: relative;
  list-style: none;
  margin: var(--sp-12) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-6);
}

/* 鎏金横轴 */
.flow__line::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 4%;
  right: 4%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(201, 168, 106, 0.5) 15%,
    rgba(201, 168, 106, 0.5) 85%, transparent);
}

.flow__step {
  position: relative;
  text-align: center;
  padding-top: var(--sp-8);
}

.flow__dot {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold-gradient);
  box-shadow: 0 0 0 4px rgba(201, 168, 106, 0.15), 0 0 12px rgba(201, 168, 106, 0.4);
}

.flow__num {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--gold-500);
  margin-bottom: var(--sp-2);
}

.flow__name {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--ink-strong);
  letter-spacing: 0.1em;
}

.flow__desc {
  margin: 0 auto;
  max-width: 15em;
  font-size: var(--fs-tiny);
  color: var(--ink-muted);
  line-height: 1.8;
}

/* ---------------- 7. CTA 横幅 ---------------- */
.cta__banner {
  position: relative;
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  border-radius: var(--radius-l);
  background:
    linear-gradient(var(--pine-900), var(--pine-900)) padding-box,
    var(--gold-gradient) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-card), var(--glow-gold);
  overflow: hidden;
}

.cta__seal {
  margin-bottom: var(--sp-4);
  filter: drop-shadow(0 0 12px rgba(201, 168, 106, 0.35));
}

.cta__title {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: var(--fs-h1);
  color: var(--ink-strong);
}

.cta__lead {
  margin: 0 auto var(--sp-8);
  max-width: 30em;
  color: var(--ink-body);
  line-height: 1.9;
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 1199px) {
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .crafts__strip {
    flex-wrap: wrap;
  }

  .craft {
    flex: 1 1 30%;
  }

  .craft:hover,
  .craft:focus-visible,
  .craft.is-active {
    flex-grow: 1;
  }

  .craft__detail {
    max-height: none;
    opacity: 1;
    transform: none;
  }

  .craft__name {
    writing-mode: horizontal-tb;
    letter-spacing: 0.16em;
  }

  .flow__line {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--sp-10);
  }

  .flow__line::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding: calc(var(--nav-height) + var(--sp-10)) 0 var(--sp-12);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .hero__seal-watermark {
    right: -30%;
    width: 90vw;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
  }

  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-8) var(--sp-4);
  }

  .features__grid {
    grid-template-columns: 1fr;
  }

  .crafts__strip {
    flex-direction: column;
  }

  .craft {
    flex: 1 1 auto;
  }

  .flow__line {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .flow__step {
    padding-top: 0;
    padding-left: var(--sp-10);
    text-align: left;
  }

  .flow__dot {
    left: 9px;
    top: 6px;
    transform: none;
  }

  .cta__banner {
    padding: var(--sp-12) var(--sp-6);
  }
}

/* ---------------- 动效收敛 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .shot,
  .craft,
  .craft__detail,
  .craft__name {
    transition: none;
  }

  .hero__particles {
    opacity: 0.5;
  }
}

/* ---------------- 7.5 合作入口（index.html#partner） ---------------- */
.partner-entry__title {
  margin: var(--sp-4) 0 var(--sp-12);
  font-size: var(--fs-h1);
}

.partner-entry__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

.partner-entry-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-10);
}

.partner-entry-card__tag {
  margin: 0;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--gold-500);
}

.partner-entry-card__title {
  margin: 0;
  font-size: var(--fs-h2);
  letter-spacing: 0.06em;
}

.partner-entry-card__desc {
  margin: 0 0 var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: 1.9;
  flex: 1;
}

.partner-entry-card__link {
  width: fit-content;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-400);
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.partner-entry-card__link:hover {
  color: var(--gold-300);
  transform: translateX(4px);
}

@media (max-width: 767px) {
  .partner-entry__grid {
    grid-template-columns: 1fr;
  }

  .partner-entry-card {
    padding: var(--sp-6);
  }
}