/* ─── Stacking-scroll for platform modules ─────────────────
   Used only on index-v2.html
   - Cards pin in a flat stack, chrome bar of each peeks out
   - Hover (cards behind the top one): side-tilt + small lift
   - Click any card: opens fully, pops to front
   ──────────────────────────────────────────────────────── */

.x-mod-stack .x-mod-panel {
  position: sticky;
  background: var(--canvas);
  box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, 0.10);
  cursor: default;
  transform-origin: center;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.4s ease;
}

/* Cards become interactive only once all five are stacked */
.x-mod-stack.is-stacked .x-mod-panel { cursor: pointer; }

/* 48px stagger — full chrome bar of each peeking card stays visible
   (chrome is 38px tall, so 10px breathing room) */
.x-mod-stack .x-mod-panel:nth-child(1) { top: 84px;  }
.x-mod-stack .x-mod-panel:nth-child(2) { top: 132px; }
.x-mod-stack .x-mod-panel:nth-child(3) { top: 180px; }
.x-mod-stack .x-mod-panel:nth-child(4) { top: 228px; }
.x-mod-stack .x-mod-panel:nth-child(5) { top: 276px; }

/* Hover on a peeking card (not the front card): side-tilt + small lift.
   Partial pick — no z-index change, the card just leans out from the deck.
   Alternating direction makes consecutive peeks feel natural. */
.x-mod-stack.is-stacked .x-mod-panel:not(:last-child):hover {
  transform: translateX(-14px) translateY(-4px) rotate(-1.6deg);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.20);
}
.x-mod-stack.is-stacked .x-mod-panel:nth-child(even):not(:last-child):hover {
  transform: translateX(14px) translateY(-4px) rotate(1.6deg);
}

/* Click → opens. Card pops fully to the front of the stack. */
.x-mod-stack .x-mod-panel.is-open {
  transform: translateY(-16px) rotate(0deg) translateX(0) !important;
  z-index: 100;
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.32);
}

/* Below 980px the row is single-column and panels get tall —
   disable sticky stack, fall back to normal vertical scrolling. */
@media (max-width: 980px) {
  .x-mod-stack .x-mod-panel {
    position: static;
    box-shadow: none;
    transform: none !important;
    cursor: default;
  }
  .x-mod-stack.x-mod-list { gap: var(--s32); }
}

@media (prefers-reduced-motion: reduce) {
  .x-mod-stack .x-mod-panel {
    transition: none;
    transform: none !important;
  }
}

.x-mod-stack.x-mod-list { gap: var(--s64); }

/* Sentinel sibling after the last panel — gives the last sticky card
   a real range to pin within (flex containers don't extend sticky
   bounds via padding-bottom). */
.x-mod-stack-sentinel {
  flex: 0 0 auto;
  height: 40vh;
}