/* 智能体平台子页面 · 配图 + 文案要点（less is more）
   复用 site.css 的 nav / reveal / 配色变量；本文件负责 hero、图文版块与架构层带。
   设计原则见 docs/agent-platform-design.md 第零节：一屏一念、文字封顶三级、留白优先。 */

:root {
  --ap-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ap-fs-hero:  clamp(30px, 3.1vw, 46px);   /* H1（仅 Hero） */
  --ap-fs-title: clamp(22px, 2.05vw, 31px);  /* 区块标题 */
  --ap-fs-body:  clamp(14px, 1.05vw, 16px);  /* 正文 */
  --ap-lh-title: 1.25;
  --ap-lh-body:  1.85;
}

/* ── 页面基底 ── */
body { background: var(--void); }
.ap-shell { position: relative; z-index: 1; }
body > footer { border-top: 0; }

/* ═══════ 01 Hero · 文字靠左，配图立方体在右侧负空间 ═══════ */
.ap-hero {
  min-height: clamp(600px, 56vw, 880px);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: clamp(96px, 7vw, 128px) 0;
  background: #000000;
}
.ap-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("assets/ap-hero-2560.webp") center center / cover no-repeat;
}
/* 左侧加深 → 保证靠左文字可读；右侧透出立方体；底部轻压暗 */
.ap-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 26%, rgba(0,0,0,0.18) 56%, rgba(0,0,0,0) 78%),
    linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(0,0,0,0.55) 100%);
}
.ap-hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: min(1200px, 100vw);
  margin: 0 auto; padding: 0 clamp(22px, 4vw, 64px);
  text-align: left;
}
.ap-hero-title {
  max-width: 660px;
  font-size: var(--ap-fs-hero); font-weight: 600; line-height: var(--ap-lh-title);
  letter-spacing: 0; margin: 0 0 20px; color: #ffffff; text-wrap: balance;
  text-shadow: 0 10px 42px rgba(0,0,0,0.9), 0 0 22px rgba(0,0,0,0.85);
}
.ap-hero-sub {
  max-width: 500px;
  font-size: var(--ap-fs-body); line-height: var(--ap-lh-body);
  color: rgba(255,255,255,0.84); letter-spacing: 0.02em; margin: 0;
  text-shadow: 0 8px 30px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.75);
}
.ap-hero-tags {
  display: flex; align-items: center; gap: 18px;
  margin-top: clamp(26px, 3.2vw, 40px);
  font-size: clamp(13px, 1vw, 15px); letter-spacing: 0.16em;
  color: rgba(255,255,255,0.9);
}
.ap-hero-tags span { position: relative; }
.ap-hero-tags span:not(:first-child)::before {
  content: ""; position: absolute; left: -10px; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--volt); transform: translateY(-50%);
}

/* ═══════ 通用区块（留白比子页面再放大一档）═══════ */
.ap-section { padding: clamp(72px, 9.6vh, 132px) 0; position: relative; }
.ap-case-row {
  max-width: 1160px; margin: 0 auto; padding: 0 clamp(22px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 84px); align-items: center;
}
/* 偶数屏：图右文左，制造左右交替 */
.ap-case--flip .ap-case-figure { order: 2; }
.ap-case--flip .ap-case-copy { order: 1; }

.ap-case-figure { margin: 0; min-width: 0; }
.ap-case-figure img {
  width: 100%; height: auto; display: block; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.ap-case-copy { max-width: 480px; min-width: 0; }
.ap-case--flip .ap-case-copy { margin-left: auto; }

/* 英文术语主标（品牌蓝点缀）→ 中文副标（白，大）→ 一句话（灰） */
.ap-case-name {
  font-family: var(--sans); font-size: clamp(14px, 1.1vw, 17px); font-weight: 600;
  letter-spacing: 0.12em; color: var(--volt); margin: 0 0 12px;
}
.ap-case-title {
  font-size: var(--ap-fs-title); font-weight: 600; line-height: var(--ap-lh-title);
  color: var(--bone); margin: 0 0 16px; text-wrap: balance;
}
.ap-case-body {
  font-size: var(--ap-fs-body); line-height: var(--ap-lh-body);
  color: rgba(255, 255, 255, 0.78); margin: 0; letter-spacing: 0.01em;
}

/* ═══════ 02 架构层带（4 层名 · 极简、细线分隔、留白）═══════ */
.ap-arch-stack { list-style: none; margin: clamp(22px, 2.6vw, 32px) 0 0; padding: 0; }
.ap-arch-stack li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--hair);
  font-size: var(--ap-fs-body); line-height: 1.6; color: rgba(255, 255, 255, 0.7);
}
.ap-arch-stack li:last-child { border-bottom: 1px solid var(--hair); }
.ap-arch-stack b {
  flex: none; min-width: 92px; color: #ffffff; font-weight: 600; letter-spacing: 0.02em;
}

/* ═══════ 响应式 ═══════ */
@media (max-width: 880px) {
  /* 图文单列堆叠：图上文下，复位左右交替 */
  .ap-case-row { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 32px); }
  .ap-case--flip .ap-case-figure { order: 0; }
  .ap-case--flip .ap-case-copy { order: 0; }
  .ap-case-copy, .ap-case--flip .ap-case-copy { max-width: 100%; margin-left: 0; }
}
@media (max-width: 760px) {
  .ap-hero { min-height: min(600px, 76vh); padding: 88px 0; }
  /* 窄屏立方体上移露出、文字下方靠左，暗场整体加强 */
  .ap-hero::before { background-position: 70% 28%; }
  .ap-hero::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.30) 40%, rgba(0,0,0,0.86) 100%),
      linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.28) 60%, rgba(0,0,0,0.10) 100%);
  }
  .ap-hero { align-items: flex-end; }
  .ap-hero-inner { padding: 0 22px; }
  .ap-hero-title { max-width: 340px; line-height: 1.34; }
  .ap-hero-sub { max-width: 330px; }
  .ap-section { padding: 60px 0; overflow: hidden; }
  .ap-arch-stack b { min-width: 80px; }
  footer { padding: 34px 0 40px; }
}

/* ═══════ 滚动入场动效（图文错位 + 文案逐级 + 层带逐条）═══════ */
@media (prefers-reduced-motion: no-preference) {
  /* 版块容器不再整体位移，改由图 / 文分别错位入场 */
  html.js .ap-case-row.reveal { opacity: 1; transform: none; }

  /* 配图：从外侧滑入 + 轻微放大归位（flip 屏反向） */
  html.js .ap-case-row .ap-case-figure {
    opacity: 0; transform: translateX(-34px) scale(0.97);
    transition: opacity 1.05s var(--ap-ease), transform 1.05s var(--ap-ease);
  }
  html.js .ap-case--flip .ap-case-figure { transform: translateX(34px) scale(0.97); }
  html.js .ap-case-row.in .ap-case-figure { opacity: 1; transform: none; }

  /* 文案：整体上浮，略晚于图 */
  html.js .ap-case-row .ap-case-copy {
    opacity: 0; transform: translateY(26px);
    transition: opacity 1.05s var(--ap-ease) 0.1s, transform 1.05s var(--ap-ease) 0.1s;
  }
  html.js .ap-case-row.in .ap-case-copy { opacity: 1; transform: none; }

  /* 文案内元素逐级浮现 */
  html.js .ap-case-copy > * { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ap-ease), transform 0.8s var(--ap-ease); }
  html.js .ap-case-row.in .ap-case-copy > * { opacity: 1; transform: none; }
  html.js .ap-case-row.in .ap-case-copy > *:nth-child(1) { transition-delay: 0.16s; }
  html.js .ap-case-row.in .ap-case-copy > *:nth-child(2) { transition-delay: 0.26s; }
  html.js .ap-case-row.in .ap-case-copy > *:nth-child(3) { transition-delay: 0.36s; }

  /* 架构层带：容器不淡入，交给内部 4 条逐条亮起 */
  html.js .ap-case-copy > .ap-arch-stack { opacity: 1; transform: none; transition: none; }
  html.js .ap-arch-stack li { opacity: 0; transform: translateY(12px); transition: opacity 0.66s var(--ap-ease), transform 0.66s var(--ap-ease); }
  html.js .ap-case-row.in .ap-arch-stack li { opacity: 1; transform: none; }
  html.js .ap-case-row.in .ap-arch-stack li:nth-child(1) { transition-delay: 0.40s; }
  html.js .ap-case-row.in .ap-arch-stack li:nth-child(2) { transition-delay: 0.52s; }
  html.js .ap-case-row.in .ap-arch-stack li:nth-child(3) { transition-delay: 0.64s; }
  html.js .ap-case-row.in .ap-arch-stack li:nth-child(4) { transition-delay: 0.76s; }
}