/* ============================================================
   NEXT-STOP DECK  —  layered, overlapping, stacked cards
   Architecture
   ------------
   .ns-stage is a fixed-size "slot" (the active-card footprint).
   Every .ns-card is absolutely positioned inside it. Each card's
   inset (top/right/bottom/left offset) becomes its transform-origin
   and is multiplied per depth-layer, so cards shrink TOWARD their
   own corner and stack in a real 3D z-space instead of sliding
   along a flat rail.

   The JS slider is purely a state machine: it reports `p` (page
   position, fractional) and the CSS transition does the tweening.
   Dragging (pointer + inertia) and autoplay both drive the same `p`.
   ============================================================ */

.sec-nextstop{
  position:relative;
  z-index:8;
  margin-top:-74px;      /* deck overlaps the hero photograph */
  padding:0;

  /* --- deck geometry (mobile defaults) --------------------------
     Declared on the section so both the deck itself and the
     section's own overlap offset can resolve against them. */
  --ns-card-h: 246px;    /* height of the active card            */
  --ns-top:    26px;     /* stage offset from the viewport top   */
  /* Room reserved to the RIGHT of the active card for the fan of
     deeper cards to open into. The layer table fans out to 1.13x,
     so this must be >= 0.13 x (card width). Without it the active
     card's right edge coincides with the clipping edge and the
     whole stack collapses behind it. */
  --ns-gutter: 52px;
  /* 整块高度，用来把它自己上提去压住上一屏。
     卡片底边平齐后，最底就是 stage 的底边，不再有额外的下坠。 */
  --ns-total:  calc(var(--ns-top) + var(--ns-card-h) + 18px);
}

/* the clipping window: cards may never bleed past the screen edge.
   Width/height are pinned by JS; this is just the overflow context.
   deck.js reads every geometry var above at render time, so a media
   query can retune the whole deck with zero JS branching. */
.ns-viewport{
  position:relative;
  padding-left:var(--pad);
  width:100vw;
  max-width:100%;
  overflow:hidden;
  touch-action:pan-y;    /* vertical scroll still belongs to the page */
}

/* the slot == one active card; JS drives width/top/height */
.ns-stage{
  position:absolute;
  left:var(--pad);
  top:26px;
  height:var(--ns-card-h);
  /* deck.js 会写入精确像素宽度。这里给一个 CSS 兜底值，
     这样即使脚本没跑起来，卡片也还有正常的宽度，而不是塌成 0。 */
  width:calc(100% - var(--pad) - var(--ns-gutter));
  border-radius:26px;
}

/* --- base card: photo bleeds to the right, light face on the left --- */
.ns-card{
  position:absolute;
  left:0; top:0;
  height:var(--ns-card-h);
  border-radius:26px;
  overflow:hidden;
  background:#17171C;
  cursor:pointer;
  /* ⚠ 这里不要再挂 transform / opacity / filter 的过渡。
     位置由 deck.js 逐帧写入，而 p 要沿「环形 + 交接走廊」那条折线走；
     CSS 的过渡只会在起点与终点之间插直线，那会让要绕回后排的那张
     横穿整个扇形 —— 正确的走法是先从左边退出去、再从右侧后排淡入。
     只保留 box-shadow：它不归脚本管，用过渡才有「焦点递过去」的柔和感。 */
  transition:box-shadow .62s var(--ease);
  will-change:transform, opacity;
  /* 兜底值：底边。脚本运行时会按同样的锚点写入内联样式。 */
  transform-origin:var(--ox,0%) var(--oy,100%);
  backface-visibility:hidden;
  width:100%;
  /* 默认可见。只有确认脚本可用（html.gq-js）时才交给 JS 控制透明度，
     避免脚本异常时整摞卡片停在 opacity:0，变成一片空白。 */
  opacity:1;
}
html.gq-js .ns-card{ opacity:0; }   /* JS paints the real value on first frame */

.ns-card.is-active{
  box-shadow:
    0 34px 68px -26px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.07);
}

.ns-photo{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; }
.ns-photo img{
  object-position:76% 62%;
  transform:scale(1.10);
  transition:transform 1.4s var(--ease);
}
.ns-card.is-active .ns-photo img{ transform:scale(1); }

/* light face: warm off-white on the left fading into the photo */
.ns-scrim{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  background:
    linear-gradient(100deg,
      rgba(248,243,236,.99) 0%,
      rgba(248,243,236,.965) 42%,
      rgba(247,240,232,.68) 58%,
      rgba(30,26,30,.05) 79%,
      transparent 94%),
    linear-gradient(180deg,
      rgba(250,245,238,.45) 0%,
      transparent 34%,
      transparent 74%,
      rgba(24,20,26,.34) 100%);
}

.ns-body{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:22px 20px;
  max-width:66%;
}
.ns-cap{
  font-family:var(--font-disp);
  font-size:11.5px; font-weight:500;
  letter-spacing:.04em;
  color:#5C5348;
}
.ns-name{
  font-family:var(--font-disp);
  font-size:43px; font-weight:600;
  line-height:1;
  letter-spacing:-.02em;
  color:#181410;
  margin-top:12px;
}
/* 作品名是可点的链接（进案例详情）。display:block 是必须的 ——
   行内元素吃不到 margin-top；下划线也不要，用极轻的透明变化做反馈。 */
a.ns-name{
  display:block;
  text-decoration:none;
  transition:opacity .45s var(--ease);
}
a.ns-name:hover{ opacity:.72; }
.ns-cn{
  font-size:14.5px; font-weight:400;
  color:#3E362C;
  letter-spacing:.05em;
  margin-top:11px;
}
.ns-date{
  font-family:var(--font-disp);
  font-size:14.5px; font-weight:500;
  color:#4A4136;
  margin-top:12px;
}
.ns-badge{
  display:inline-flex; align-items:center; gap:5px;
  align-self:flex-start;
  margin-top:15px;
  padding:7px 13px 7px 11px;
  border-radius:999px;
  font-size:11px; font-weight:500;
  color:#F2EFE9;
  background:rgba(38,52,46,.88);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
}
.ns-badge svg{ width:13px; height:13px; flex:0 0 auto; }

/* ---- the round chevron, parked on the active card's right edge ----
   ⚠ z-index 必须高过卡片。卡片的 z 在 60–100 之间（deck.js 逐帧写），
     这里给 40 的话箭头会被最前那张整张盖住 —— 实测 elementFromPoint
     在箭头中心命中的是 .ns-scrim，也就是说这个「下一站」按钮
     既看不见、也点不着。120 把它压在所有卡片之上。 */
.ns-arrow{
  position:absolute;
  top:50%;
  z-index:120;
  width:36px; height:36px;
  margin-top:-18px;
  border-radius:50%;
  display:grid; place-items:center;
  background:rgba(22,20,20,.74);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.7);
  color:#fff;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.ns-arrow:active{ transform:scale(.88); }
.ns-arrow svg{ width:13px; height:13px; }
/* 卡片栈现在是环形的，没有「到头」这回事，箭头常驻。 */

/* ---- progress rail ---- */
.ns-progress{
  display:flex; align-items:center; justify-content:center; gap:5px;
  margin-top:16px;
}
.ns-progress i{
  height:3px; width:14px;
  border-radius:2px;
  background:rgba(255,255,255,.16);
  transition:all .55s var(--ease);
}
.ns-progress i.on{
  width:24px;
  background:var(--gold);
  box-shadow:0 0 10px rgba(201,164,106,.55);
}

/* ---- autoplay hairline on the active segment ---- */
.ns-progress i.on::after{
  content:"";
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:rgba(255,255,255,.75);
  animation:nsFill 5.2s linear forwards;
}
@keyframes nsFill{ from{ width:0 } to{ width:100% } }
.ns-progress.paused i.on::after{ animation-play-state:paused; }