/* ==========================================================================
   团队官网专属区块样式

   刻意与 styles.css 分开：那份是从 blog 原样复制过来的，一个字没改。
   blog 以后改了样式整份覆盖即可，不会和这里的改动搅在一起。

   这里只用 styles.css 已经定义好的设计变量（--bg / --text / --accent /
   --border / --radius / --shadow / --page-max …），不引入新色板，
   保证两个站看起来是同一套东西。
   ========================================================================== */

/* ==========================================================================
   飘带背景

   严格对照参考站：素材用原始 PNG，不压缩、不缩放，避免平滑渐变出现色阶带纹。

   关键是容器本身就右锚定——实测原站 .banner_bg 起点在视口 60% 处、宽 1530px，
   一直伸到视口外 757px。红色主体落在右侧靠的是这个，不是挪图片。

   结构分两层：外层全宽裁剪（防横向滚动条），内层按原站几何右锚定。

   动画只有一处不照抄：原站动的是 top/left，每帧触发布局与重绘，大位图上会抖；
   这里改用 transform，图层一次上传 GPU、之后每帧只改变换矩阵。运动方式与原站
   一致——单向匀速连续漂移，靠孪生图层交叉淡入淡出遮住重置点（详见下方说明）。
   ========================================================================== */

body { position: relative; }

/* 外层：全宽，只负责裁掉溢出视口的部分 */
.ribbon-clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* 内层：按原站实测几何右锚定（视口 1920 时起点 1147px ≈ 59.7%，宽 1530px） */
.ribbon-stage {
  position: absolute;
  top: 0;
  left: 59.7%;
  width: 1530px;
  height: 100%;
}

/* 底部渐隐，让飘带融进页面而不是硬切一条边。
   范围要够大：hero 保持原有高度（不为装饰改版式），飘带层比 hero 高得多，
   渐隐不足的话下面的区块标题就会压在浓色上。 */
.ribbon-clip::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 380px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  z-index: 1;
}

.ribbon-stage img {
  position: absolute;
  max-width: none;           /* 覆盖 styles.css 的 img{max-width:100%}，否则素材被压扁 */
  will-change: transform;    /* 提前提升为合成层，避免动画首帧才提升造成的闪顿 */
  backface-visibility: hidden;
}

/* 以下偏移量全部取自对原站的实测（容器相对坐标） */
.ribbon-stage .bg-1 { left: -50px;  top: -50px;  width: 765px; }
.ribbon-stage .bg-2 { left: -100px; top: 0;      width: 918px; }
.ribbon-stage .bg-t { left: -509px; top: -230px; width: 1377px; }
.ribbon-stage .bg-b { left: -270px; top: -100px; width: 1377px; }

/* —— 运动：闭合轨道，首尾相接 ——
   走过两次弯路，记在这里免得再犯：

   1) 直线 A→B 配 alternate 往复：走到头原路返回，每半周期减速—停住—反向，
      看着是"荡秋千"不是"流动"。
   2) 直线 A→B 配孪生层交叉淡入淡出：运动是单向了，但两张同一素材相隔 150px
      同时可见，屏幕上就是两条边缘在互相追赶。

   两者的病根都是「直线轨迹的终点不等于起点，必须想办法处理那个跳变」。
   换成闭合椭圆轨道就没有这个前提——终点即起点，永远不必跳回，于是：
   单层、单向、匀速、无缝，一次全解决，也不必再多解码一张图。 */

.ribbon-stage .bg-t {
  animation: ribbonOrbitA 22s linear infinite;
}
.ribbon-stage .bg-b {
  animation: ribbonOrbitB 28s linear infinite;
  animation-delay: -9s;      /* 负延迟：一进页面两层就已错开，不必等一轮 */
}

/* 幅度沿用原站的 ±150px 量级。两条轨道的长短轴与旋向都不同，
   叠在一起不会看出共同周期。100% 必须与 0% 完全相同，否则又出现跳变。 */
@keyframes ribbonOrbitA {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(120px, -70px, 0); }
  50%  { transform: translate3d(60px, -150px, 0); }
  75%  { transform: translate3d(-90px, -80px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes ribbonOrbitB {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-110px, 60px, 0); }
  50%  { transform: translate3d(-40px, 140px, 0); }
  75%  { transform: translate3d(100px, 70px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* 页面内容整体压在飘带之上 */
.page { z-index: 1; }
.footer { position: relative; z-index: 1; }

/* 顶栏让飘带穿过，形成从上到下贯穿的整体感。
   用背景模糊而不是直接透明：滚动时正文从底下经过，导航文字仍然读得清。
   这条写在 site.css 而不是 styles.css——后者是 blog 的逐字节副本，不能动。 */
.topbar {
  background: transparent;
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom-color: transparent;
}
/* 不支持背景模糊的浏览器退回不透明底，避免导航压在正文上看不清 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--bg); }
}

[data-theme="dark"] .ribbon-clip {
  opacity: 0.42;
  filter: saturate(0.85);
}

/* —— 窄屏：容器按比例缩，保持「只占右侧一块」的构图 —— */
/* —— 窄屏 ——
   桌面端靠「左文字 / 右飘带」分区，窄屏没有这个空间，浓色会直接压在正文上。
   改成：把最浓的一块推到右上角（标题之上、顶栏之后），整体压淡，
   让它退成氛围而不是背景板。同样不碰任何布局属性。 */
@media (max-width: 900px) {
  .ribbon-clip { height: 72vh; opacity: 0.62; }
  .ribbon-clip::after { height: 46vh; }   /* 渐隐拉长，避免在卡片处硬切 */

  .ribbon-stage { left: 52%; width: 150vw; }
  .ribbon-stage .bg-1 { width: 70vw; left: -6vw; top: -40px; }
  .ribbon-stage .bg-2 { width: 84vw; left: -14vw; top: 0; }
  .ribbon-stage .bg-t { width: 150vw; left: -12vw; top: -240px; }
  .ribbon-stage .bg-b { width: 158vw; left: -4vw;  top: -300px; }
}

/* 更窄的手机进一步收敛：文字占满整宽，飘带只留右上一角 */
@media (max-width: 560px) {
  .ribbon-clip { height: 62vh; opacity: 0.5; }
  .ribbon-stage { left: 58%; width: 170vw; }
  .ribbon-stage .bg-t { width: 170vw; top: -260px; }
  .ribbon-stage .bg-b { width: 180vw; top: -320px; }
}

/* 系统要求减少动态效果：停在起始帧，保留画面、去掉运动 */
@media (prefers-reduced-motion: reduce) {
  .ribbon-stage img { animation: none; }
}

/* —— 页面容器：落地页比文章页更宽，且不需要侧栏 —— */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 20px 64px;
  /* 飘带层绝对定位在这里面，需要定位上下文 */
  position: relative;
}

/* 内页的标题区需要和吸顶导航拉开距离。首页不受影响——它用的是 .hero，
   自带上留白，没有 .page-header。 */
.page-header { padding-top: 48px; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding: 88px 0 72px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 64px;
}

.hero-name {
  font-size: 3em;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  line-height: 1.1;
}

.hero-tagline {
  font-size: 1.25em;
  color: var(--text);
  margin: 0 0 14px;
  font-weight: 500;
}

/* 理念一行：用分隔点串起来，克制，不喧宾夺主 */
.hero-creed {
  font-size: 0.98em;
  color: var(--text-muted);
  margin: 0 0 32px;
  letter-spacing: 0.04em;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.92em;
  color: var(--text);
  background: var(--bg-elevated);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; background: var(--bg-hover); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent); opacity: 0.9; color: #fff; }

/* ==========================================================================
   区块骨架
   ========================================================================== */

.section { margin-bottom: 64px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

/* 小字眉标，沿用参考站 "All Experienced Solution" 那种英文眉题的做法 */
.section-eyebrow {
  font-size: 0.72em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 6px;
}

.section-title {
  font-size: 1.5em;
  font-weight: 700;
  margin: 0;
}

.section-more {
  font-size: 0.9em;
  color: var(--accent);
  white-space: nowrap;
}

.section-intro {
  color: var(--text-muted);
  margin: -8px 0 28px;
  max-width: 44em;
  line-height: 1.8;
}

/* ==========================================================================
   图标：统一线性风格，描边取 currentColor，随主题自动反色
   ========================================================================== */

.icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
/* 暗色下 --accent-soft 是浅蓝，衬在深底上太跳，换成中性底 */
[data-theme="dark"] .icon-box { background: var(--bg-hover); }

.icon-box svg { display: block; }

/* ==========================================================================
   能力方向：首页用紧凑卡片，内页用带要点的详情卡
   ========================================================================== */

.feature-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.feature-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: 22px 20px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.feature-card .icon-box { margin-bottom: 14px; }

.feature-title {
  font-size: 1.02em;
  font-weight: 600;
  margin: 0 0 10px;
}

.feature-desc {
  font-size: 0.92em;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

/* —— 详情卡（能力方向内页） ——
   左右分栏：左边是「这是什么」（编号 / 图标 / 标题 / 一句定位），
   右边是「具体做什么」（术语 + 短说明的对照表）。
   这样三块之间有了纵向节奏，右边的对照表也逼着文案写短——
   之前那种整段大白话，读者只会一眼扫过去。 */
/* 纵向堆叠容器，并为子项提供自动编号。能力方向与项目故事共用。 */
.stack {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: item;
  display: grid;
  gap: 18px;
}

.cap-item {
  counter-increment: item;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: 26px 24px;
}

.cap-aside { min-width: 0; }

.cap-no {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* 序号用等宽数字，和图标并排，作为这一块的视觉锚点 */
.cap-no::after {
  content: counter(item, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--text-faint);
  letter-spacing: 0.08em;
}

.cap-title {
  font-size: 1.15em;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.4;
}

/* 一句定位，克制；正文段落已经取消，信息量交给右边的对照表 */
.cap-lede {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9em;
  line-height: 1.7;
}

/* 术语对照表：左列术语、右列一句说明，靠横线分隔形成条理。
   能力方向与项目故事两页共用——名字取中性的 spec，不绑某一页。
   左列是 max-content，写不进四个字的术语说明这条本身没想清楚，
   版式在替我们做取舍。 */
.spec-table {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 20px;
  row-gap: 0;
}

.spec-table dt,
.spec-table dd {
  padding: 11px 0;
  font-size: 0.92em;
  line-height: 1.7;
}

.spec-table dt {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.spec-table dd {
  margin: 0;
  color: var(--text-muted);
}

/* 从第二行起加分隔线。dt/dd 交替排列，所以第 3 个网格子元素开始就是第二行 */
.spec-table > :nth-child(n+3) {
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   项目故事
   ========================================================================== */

.story-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.story-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
  background: var(--bg);
}

.story-title {
  font-size: 1.05em;
  font-weight: 600;
  margin: 0 0 12px;
}

/* 故事里的那句话用引文排版：它们是原站最有人味的部分，值得被看见 */
.story-quote {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  color: var(--text-muted);
  line-height: 1.8;
  font-size: 0.95em;
}

/* —— 详情版（项目故事内页） ——
   骨架与能力方向的 .cap-item 一致（见下方共用的分栏规则）：
   左边是这件事本身（编号 / 标题 / 原话），右边是问题与做法的对照表。 */
.story-detail {
  counter-increment: item;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: 26px 24px;
}

.story-aside { min-width: 0; }

/* 故事没有图标，只用序号做视觉锚点，和能力方向那边的编号保持同一形态 */
.story-no {
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}
.story-no::after { content: counter(item, decimal-leading-zero); }

.story-detail .story-title {
  font-size: 1.15em;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.4;
}

.story-detail .story-quote {
  font-size: 0.92em;
  margin: 0;
}

/* ==========================================================================
   能力方向与项目故事共用的左右分栏骨架
   ========================================================================== */

.cap-item,
.story-detail {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 820px) {
  /* 分栏在中等宽度就该收掉：右列被压窄后，术语列会把说明挤成一字一行 */
  .cap-item,
  .story-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* ==========================================================================
   关于团队
   ========================================================================== */

.about-grid {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.about-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  background: var(--bg-elevated);
}

.about-card .icon-box { margin-bottom: 14px; }

/* 用类而不是绑 h3：首页里它在 h2 区块标题之下所以是 h3，关于页里它在 h1
   之下所以是 h2，标题级别本就该随上下文变。绑标签会漏掉其中一种。 */
.about-title {
  font-size: 1.05em;
  font-weight: 600;
  margin: 0 0 10px;
}

/* 四字短语拆成一组胶囊：原来挤在一行里读起来是一串没有断句的字，
   拆开之后每个词都能被单独看见，卡片也有了一点视觉纹理。 */
.motto-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.motto-tag {
  font-size: 0.82em;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.creed-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  background: var(--accent-soft);
  text-align: center;
  margin-bottom: 40px;
}
.creed-block p {
  margin: 0;
  font-size: 1.15em;
  letter-spacing: 0.1em;
  color: var(--text);
}
.creed-block .creed-note {
  margin-top: 12px;
  font-size: 0.88em;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* 暗色下 --accent-soft 偏亮，换成中性底，避免刺眼 */
[data-theme="dark"] .creed-block { background: var(--bg-elevated); }

/* —— 工作原则：编号列表 —— */
.principle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: principle;
  display: grid;
  /* 固定两列：四条内容用 auto-fit 会在宽屏排成 3+1，最后一条孤零零挂在
     第二行。两列是 2×2，无论四条还是六条都排得整齐。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
}

@media (max-width: 720px) {
  .principle-list { grid-template-columns: minmax(0, 1fr); }
}

.principle-item {
  counter-increment: principle;
  position: relative;
  padding-left: 44px;
}

/* 序号用等宽数字，和正文拉开层次 */
.principle-item::before {
  content: counter(principle, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.principle-item h3 {
  font-size: 1em;
  font-weight: 600;
  margin: 5px 0 8px;
}

.principle-item p {
  margin: 0;
  font-size: 0.92em;
  line-height: 1.8;
  color: var(--text-muted);
}

/* ==========================================================================
   联系
   ========================================================================== */

.contact {
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.contact p { color: var(--text-muted); margin: 0 0 12px; }

/* ==========================================================================
   窄屏
   ========================================================================== */

@media (max-width: 600px) {
  .page { padding: 0 16px 40px; }
  .page-header { padding-top: 32px; }
  .hero { padding: 56px 0 44px; margin-bottom: 44px; }
  .hero-name { font-size: 2.1em; }
  .hero-tagline { font-size: 1.05em; }
  .section { margin-bottom: 44px; }
  .cap-item, .story-detail { padding: 22px 18px; }
  /* 标题与「查看全部」在窄屏堆叠，避免挤成两行还错位 */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* 系统要求减少动画时，卡片不再位移 */
@media (prefers-reduced-motion: reduce) {
  .feature-card:hover { transform: none; }
}