/* 过渡屏 #reach + 服务区 #services（2026-10-29，借 byziwei 的「地图 + 一句句宣言」和 SERVICES 两屏）。
   第一版（淡点阵地图、中号字、过程式文案）本人说意思对、叙事和视觉不行；第二版（特大字 + 乱码打字）又说字太大、文字交互不好；
   第三版照量出来的他那屏改了字号和逐字淡入，本人又指出三处：地图别放大要放全、两行小字排得不好、服务四项的排版和图标要更好。
   这版：完整世界剪影（不含南极）整张放进屏里，像他那样随滚动从下往上升到位；小字和宣言收成一组居中；
   服务区按四栏网格左对齐，图标统一画在 3×3 的细网格上；每项图标在上、「(1) 名字」同一行、下面两行说明。过渡屏整屏停住（js/services.js 加 .is-pin，手机也停），开了「减少动效」不停住、三句一起排。 */

/* ── 过渡屏 ── */
.reach {
  position: relative;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.reach__stage {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 60px;
  overflow: hidden;
}
/* 手机上地址栏会伸缩，用 svh 免得停住的那屏跟着跳 */
.reach.is-pin .reach__track { height: 300vh; height: 300svh; }
.reach.is-pin .reach__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; padding: 0 60px; }

/* 完整世界剪影：整张放进屏里（宽受屏高限制，不裁大陆）；--rise 由 js 从 0 推到 1，地图从下面升到正中 */
.reach__map {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 148vh);
  aspect-ratio: 2800 / 1783;
  translate: -50% calc(-50% + (1 - var(--rise, 1)) * 42vh);
  pointer-events: none;
}
.reach__map img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.1;
}
/* 杭州：一个小红点，一圈很淡的光晕 */
.reach__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
}
.reach__pin i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(255, 42, 42, 0.12), 0 0 18px rgba(255, 42, 42, 0.45);
}

/* 两行小字和宣言收成一组：上面一行题注，两头各一截短线；下面一行「往下看」。
   第三版一个贴着导航、一个贴着屏底，字距拉得太开又发灰，像散落的边角料 */
.reach__cap,
.reach__hint {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #e8e8e3;
}
.reach__cap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 44px;
  opacity: 0.72;
}
.reach__cap::before,
.reach__cap::after {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.reach__hint { margin-top: 64px; opacity: 0.5; }
body[data-lang="en"] .reach__cap,
body[data-lang="en"] .reach__hint { text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; }
.reach:not(.is-pin) .reach__hint { display: none; }

.reach__lines { position: relative; z-index: 1; display: grid; justify-items: center; }
.reach__say {
  margin: 0;
  font-family: 'Baskerville', 'Songti SC', 'STSongti-SC', 'DW Serif SC', 'Noto Serif SC', 'SimSun', Georgia, serif;
  font-weight: 900;
  font-size: clamp(28px, 2.9vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  text-align: center;
  color: #e8e8e3;
}
body[data-lang="en"] .reach__say { font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.02; font-size: clamp(26px, 2.8vw, 42px); }
/* 停住时三句叠在同一格里，一次只亮一句；亮着的那句里，字的透明度由 js 按滚动一个个写 */
.reach.is-pin .reach__say { grid-area: 1 / 1; visibility: hidden; }
.reach.is-pin .reach__say.is-on { visibility: visible; }
.reach.is-pin .reach__say .ch { opacity: 0; }
.reach:not(.is-pin) .reach__say + .reach__say { margin-top: 28px; }

/* ── 服务区 ──
   五栏网格铺满整行：题签在第一栏，大标题从第二栏起左对齐（和 byziwei 一样落在栏线上），五项各占一栏。
   右下角的 3D / 联系浮窗会压住最后一项：滚到重叠那段，js 给 body 加 .is-svc-clear，两张浮窗淡出让开
   （第四版在右侧留空给浮窗，本人说「这边空着干嘛」） */
.services__defs { position: absolute; width: 0; height: 0; }
.section--services {
  --gap: 32px;
  --cols: 5;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(96px, 10vw, 140px);
  padding-bottom: clamp(110px, 13vh, 170px);
}
.services__top,
.services__list {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
}
.services__top { align-items: start; }
.services__top .section__kicker { margin: 0; padding-top: 0.5em; }
.services__title {
  grid-column: 2 / -1;
  margin: 0;
  font-family: 'Baskerville', 'Songti SC', 'STSongti-SC', 'DW Serif SC', 'Noto Serif SC', 'SimSun', Georgia, serif;
  font-weight: 900;
  font-size: clamp(28px, 2.9vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: #e8e8e3;
}
body[data-lang="en"] .services__title { font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.02; font-size: clamp(26px, 2.8vw, 42px); }
.services__hint {
  position: absolute;
  top: clamp(96px, 10vw, 140px);
  right: 60px;
  padding-top: 0.6em;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
body[data-lang="en"] .services__hint { text-transform: uppercase; }

.services__list {
  margin: clamp(64px, 8vw, 104px) 0 0;
  padding: 0;
  list-style: none;
}
.service { margin: 0; min-width: 0; }
.service__icon {
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 28px;
  overflow: visible;
}
.service__icon .g { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; }
.service__icon .f { fill: var(--accent); }
.service__icon .h { fill: url(#svcHatch); stroke: var(--accent); stroke-width: 1.4; }
.service__icon .s { fill: none; stroke: var(--accent); stroke-width: 1.4; }
/* 编号和名字排在同一行（第五版改成「编号 + 细线」一行、名字另起，本人说还不如这样） */
.service__no {
  display: inline;
  margin-right: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.service__name {
  display: inline;
  margin: 0;
  font-family: 'Baskerville', 'Songti SC', 'STSongti-SC', 'DW Serif SC', 'Noto Serif SC', Georgia, serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.3;
  color: #e8e8e3;
}
body[data-lang="en"] .service__name { font-weight: 700; text-transform: uppercase; font-size: 16px; letter-spacing: 0.01em; }
/* 两行：上行做什么（灰），下行能得到什么（亮）；中文只在标点处断行 */
.service__desc {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-dim);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.service__get { color: #d8d8d2; }

.services__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 56px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--accent-line, rgba(255, 42, 42, 0.5));
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text);
  text-decoration: none;
  transition: color 0.25s, border-color 0.25s;
}
.services__cta i { font-style: normal; color: var(--accent); transition: transform 0.3s var(--ease-inout, ease); }
.services__cta:hover { color: var(--accent); border-color: var(--accent); }
.services__cta:hover i { transform: translateX(4px); }

/* 进场：标题先出，四项依次上浮，图标从小弹到原大 */
.section--services .services__top,
.section--services .service,
.section--services .services__cta { opacity: 0; translate: 0 18px; transition: opacity 0.8s ease, translate 0.8s var(--ease-inout, ease); }
.section--services .service__icon { scale: 0.6; transition: scale 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); transform-origin: 0 100%; }
.section--services.is-in .services__top,
.section--services.is-in .service,
.section--services.is-in .services__cta { opacity: 1; translate: 0 0; }
.section--services.is-in .service__icon { scale: 1; }
.section--services.is-in .service:nth-child(1), .section--services.is-in .service:nth-child(1) .service__icon { transition-delay: 0.25s; }
.section--services.is-in .service:nth-child(2), .section--services.is-in .service:nth-child(2) .service__icon { transition-delay: 0.35s; }
.section--services.is-in .service:nth-child(3), .section--services.is-in .service:nth-child(3) .service__icon { transition-delay: 0.45s; }
.section--services.is-in .service:nth-child(4), .section--services.is-in .service:nth-child(4) .service__icon { transition-delay: 0.55s; }
.section--services.is-in .service:nth-child(5), .section--services.is-in .service:nth-child(5) .service__icon { transition-delay: 0.65s; }
.section--services.is-in .services__cta { transition-delay: 0.8s; }

body.is-svc-clear .floating-3d-btn,
body.is-svc-clear .contact-dock.is-shown { opacity: 0; transform: translateY(12px); pointer-events: none; }
/* 左下角那行邮箱在手机上也压着说明文字，一起让开 */
.live-feed { transition: opacity 0.45s ease; }
body.is-svc-clear .live-feed { opacity: 0; pointer-events: none; }

@media (max-width: 1279px) {
  .section--services { --cols: 3; }
  .services__list { row-gap: 56px; }
}
@media (max-width: 900px) {
  .section--services { --cols: 2; }
}
@media (max-width: 1100px) {
  .services__top { grid-template-columns: 1fr; row-gap: 24px; }
  .services__title { grid-column: auto; }
  .services__hint { display: none; }
}
@media (max-width: 720px) {
  /* 手机也整屏停住、逐字淡入（和 byziwei 手机版一样）；地图比屏幕略宽，杭州那个红点留在屏内 */
  .reach__stage { padding: 96px 20px; min-height: 0; }
  .reach.is-pin .reach__stage { padding: 0 20px; }
  .reach__map { width: 130vw; }
  .reach__say { font-size: clamp(26px, 7.4vw, 32px); }
  body[data-lang="en"] .reach__say { font-size: clamp(20px, 5.6vw, 24px); }
  .reach__cap { gap: 10px; margin-bottom: 32px; font-size: 11px; letter-spacing: 0.06em; }
  .reach__cap::before, .reach__cap::after { width: 18px; }
  body[data-lang="en"] .reach__cap { font-size: 9.5px; letter-spacing: 0.08em; }
  /* 英文题注长，手机上去掉两头短线才放得进一行 */
  body[data-lang="en"] .reach__cap::before, body[data-lang="en"] .reach__cap::after { display: none; }
  .reach__hint { margin-top: 48px; }
  .section--services { min-height: 0; }
  /* 手机上五项排成一张清单：图标在左，「(1) 名字」和两行说明在右，项与项之间一道细线。
     原来照宽屏一项一块往下排（图标单独一行、上下留白大），五项要滑两屏多，本人看真机说「这里处理的不好」 */
  .services__list { grid-template-columns: 1fr; row-gap: 0; margin-top: 44px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .service {
    display: grid;
    grid-template-columns: 58px auto minmax(0, 1fr);
    align-items: baseline;
    padding: 22px 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .service__icon { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 40px; height: 40px; margin: 0; }
  .service__no { grid-column: 2; grid-row: 1; }
  .service__name { grid-column: 3; grid-row: 1; font-size: 18px; }
  body[data-lang="en"] .service__name { font-size: 15px; }
  .service__desc { grid-column: 2 / -1; grid-row: 2; margin-top: 8px; font-size: 13.5px; line-height: 1.75; }
  .services__cta { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .section--services .services__top, .section--services .service, .section--services .services__cta { opacity: 1; translate: 0 0; transition: none; }
  .section--services .service__icon { scale: 1; transition: none; }
}