/* cgou.shop — 首页「全球地图滚动叙事」样式
 *
 * 核心纪律：分屏布局只在 `html.gsap-ready` 下生效。
 * 那个类由 head 里的内联脚本添加，且仅当 JS 可用 + 用户未要求减弱动效时添加。
 * 因此：禁用 JS / 系统「减弱动效」/ 子主题停用 ⇒ 自动退化为纵向卡片流，内容完整可读。
 */

/* ============ 默认（无 JS / 减弱动效）：纵向卡片流 ============ */
.cgou-journey {
  background: #fbfaf7;
  padding: 24px 0 8px;
  /* 全出血：突破 Blocksy 内容区的宽度约束（Blocksy 的 .entry-content 是 is-layout-constrained） */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
/* 首页隐藏 Blocksy 的页面标题条 —— journey 自带 H1，避免"Home"这种占位标题条 */
body.home .hero-section { display: none; }

/* CTA 按钮 */
.cgou-journey__btn {
  display: inline-block;
  padding: 11px 18px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
}
.cgou-journey__btn--primary { background: #c0392b; color: #fff; }
.cgou-journey__btn--primary:hover { background: #a93226; color: #fff; }
.cgou-journey__btn--ghost { border: 1px solid rgba(63, 58, 52, 0.2); color: #2f2b26; }
.cgou-journey__btn--ghost:hover { border-color: rgba(63, 58, 52, 0.4); }
.cgou-journey__viewport { position: relative; }
.cgou-journey__map { display: block; width: 100%; height: auto; max-height: 46svh; }
.cgou-journey__panels { display: block; }
.cgou-journey__panel { max-width: 760px; margin: 0 auto; padding: 18px 22px; }
.cgou-journey__media-mobile { display: none; }

/* ============ JS 就绪：分屏叙事 ============ */
html.gsap-ready .cgou-journey {
  height: 400svh; /* 4 屏 */
  padding: 0;
  /* 上移到页面顶部：让地图真正铺满视口，header 浮在地图之上。
     --cgou-journey-offset = 由 cgou-journey.js 实测的"journey 距文档顶的距离"
     （用整个偏移量而不是 header 高度，因为 journey 前面还可能有容器的空白）。
     不做这一步的话，首屏卡片底部会被视口裁掉（实测踩过）。 */
  margin-top: calc(-1 * var(--cgou-journey-offset, 0px));
}
/* 首页：把 Blocksy header 抬到地图之上并让背景透出地图（"全屏地图 + 导航浮层"）。
   用 absolute 而不是 relative —— header 不占文档流，journey 天然从 y=0 开始，
   因此不需要 JS 事后设负 margin（那会造成 180px 的布局偏移：实测 Lighthouse CLS 0.138）。 */
body.home header#header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background-color: transparent;
}
html.gsap-ready .cgou-journey__viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
html.gsap-ready .cgou-journey__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  will-change: transform;
}
html.gsap-ready .cgou-journey__panels {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: end;
}
/* 统一靠右下：地图上的城市点全部集中在画面左侧与上半部
   （昆明 26%/36%、洛杉矶 70%/29%、纽约 83%/24%、新加坡 25%/53%、悉尼 41%/73%，
   投影坐标见 assets/map/cities.json），卡片放右下不会遮住任何关键元素。 */
html.gsap-ready .cgou-journey__panel {
  grid-area: 1 / 1;
  margin: 0; /* ★ 必须覆盖默认态的 "margin: 0 auto" —— grid item 的 auto margin 会把卡片居中 */
  justify-self: end; /* 水平靠右 */
  align-self: end; /* 垂直靠底 */
  max-width: none;
  padding: 0 6vw calc(6svh + 18px) 0;
  width: min(48ch, 46vw);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* 文案卡片：轻背景 + 轻微毛玻璃，压在地图上也可读 */
.cgou-journey__card {
  background: rgba(251, 250, 247, 0.84);
  border: 1px solid rgba(63, 58, 52, 0.08);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 8px 30px rgba(63, 58, 52, 0.06);
}
.cgou-journey__eyebrow {
  font: 600 12px/1.2 inherit;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a89f92;
  margin: 0 0 10px;
}
.cgou-journey__title {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.0vw, 44px);
  line-height: 1.1;
  color: #2f2b26;
}
.cgou-journey__lead {
  margin: 0 0 14px;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  color: #6f6862;
}
.cgou-journey__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cgou-journey__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ============ 地图本体 ============ */
.cgou-journey__land { fill: #f2efe9; stroke: #d8d2c8; stroke-width: 1; }
.cgou-journey__graticule { fill: none; stroke: #ded8ce; stroke-width: 0.6; }
.cgou-journey__route { fill: none; stroke: #c0392b; stroke-width: 3.2; stroke-linecap: round; }
.cgou-journey__guide { fill: none; stroke: none; }

.cgou-journey__city-dot { fill: #bfb8ac; }
.cgou-journey__city-label {
  font: 600 17px/1 inherit;
  fill: #3f3a34;
  paint-order: stroke;
  stroke: rgba(251, 250, 247, 0.9);
  stroke-width: 3px;
}
.cgou-journey__city-sub { font: 13px/1 inherit; fill: #8a8279; }
.cgou-journey__city[data-role="hub"] .cgou-journey__city-label,
.cgou-journey__city[data-role="hub"] .cgou-journey__city-sub { display: none; }
.cgou-journey__city[data-label="off"] .cgou-journey__city-label,
.cgou-journey__city[data-label="off"] .cgou-journey__city-sub { display: none; }
.cgou-journey__city[data-role="origin"] .cgou-journey__city-dot { fill: #c0392b; }
.cgou-journey__city[data-role="destination"] .cgou-journey__city-dot,
.cgou-journey__city[data-role="reach"] .cgou-journey__city-dot { fill: none; stroke: #c0392b; stroke-width: 2.4; }
.cgou-journey__city[data-role="reach"] .cgou-journey__city-label { font-size: 14px; }

/* 昆明脉冲点 */
.cgou-journey__city-pulse {
  fill: none;
  stroke: #c0392b;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: cgou-city-pulse 2.6s ease-out infinite;
}
@keyframes cgou-city-pulse {
  0%   { transform: scale(0.55); opacity: 0.55; }
  70%  { transform: scale(2.4);  opacity: 0; }
  100% { transform: scale(2.4);  opacity: 0; }
}

/* 纸飞机 */
.cgou-journey__plane { will-change: transform; }
.cgou-journey__plane-body { fill: #c0392b; }
.cgou-journey__plane-fold { stroke: #fff; stroke-width: 1.3; fill: none; opacity: 0.75; }

/* 屏 3：服务节点（点亮式）
   默认完整可见（无 JS 时也清晰可读）；JS 就绪后由 GSAP 压暗，再随滚动逐个点亮 */
.cgou-journey__step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
}
.cgou-journey__step b { color: #2f2b26; }
.cgou-journey__step-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  background: #cdc6ba;
}

/* ============ 手机端：也做分屏（用户决定），文案下移、地图收在上 2/3 ============ */
@media (max-width: 1023px) {
  html.gsap-ready .cgou-journey__map { height: 64svh; inset: 0 0 auto 0; }
  html.gsap-ready .cgou-journey__panels { align-items: end; }
  html.gsap-ready .cgou-journey__panel,
  html.gsap-ready .cgou-journey__panel[data-side="right"] {
    width: auto;
    justify-self: stretch;
    align-self: end;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
  }
  .cgou-journey__card {
    margin: 0 14px calc(6svh + env(safe-area-inset-bottom, 0px));
    padding: 18px 18px 20px;
    border-radius: 14px;
  }
  .cgou-journey__title { font-size: clamp(24px, 7vw, 32px); }
}

/* 用户要求减弱动效：一律退回纵向流 */
@media (prefers-reduced-motion: reduce) {
  html.gsap-ready .cgou-journey { height: auto !important; }
  html.gsap-ready .cgou-journey__viewport { position: static; height: auto; overflow: visible; }
  html.gsap-ready .cgou-journey__map { position: static; height: auto; max-height: 46svh; }
  html.gsap-ready .cgou-journey__panels { position: static; display: block; }
  html.gsap-ready .cgou-journey__panel { width: auto; max-width: 760px; margin: 0 auto; padding: 18px 22px; }
  .cgou-journey__city-pulse { animation: none; }
}