/* ============================================================
   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;
  /* every card animates together so the stack moves as one body */
  transition:
    transform .62s var(--ease),
    opacity .62s var(--ease),
    filter .62s var(--ease),
    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-stage.is-dragging .ns-card{ transition:none; }

.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;
}
.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 ---- */
.ns-arrow{
  position:absolute;
  top:50%;
  z-index:40;
  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; }
.ns-arrow.at-end{ opacity:0; pointer-events:none; }

/* ---- 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; }