Card Stack

`<pura-card-stack>` lays its slotted children out as a pile: each depth steps down by `offset` px and loses `scale` per level, with the resting layout painted by static nth-child CSS so SSR shows the finished pile. The top card can be dragged (Pointer Events): past `threshold` px of projected travel it flies out with inertia and tucks behind the pile while the rest FLIP into their new depth with the chosen `spring` preset; below the threshold it springs back. `autoplay` cycles the stack every `interval` ms and pauses on hover and drag. The stack is focusable; ArrowLeft / ArrowRight swipe the top card. It fires `swipe` (detail `{ direction, index }`) when a swipe is committed and `change` (detail `{ index }`) when a new card reaches the top. Tokens: `--pura-card-stack-offset`, `--pura-card-stack-scale`, `--pura-card-stack-radius`. Reduced motion: no autoplay, no WAAPI; swipes and cycles reorder instantly. Each instance registers in `window.__puraCardStacks` by `data-pura-id` with `{ next, swipe, el }`; `data-pura-stack-top` / `-count` / `-dragging` / `-autoplay` mirror state.

Preview

<!-- testimonial stack that cycles on its own -->
<pura-card-stack autoplay interval="5000">
  <blockquote class="card">"Best tool we adopted this year." <cite>Ana</cite></blockquote>
  <blockquote class="card">"Setup took five minutes." <cite>Bruno</cite></blockquote>
  <blockquote class="card">"Support is outstanding." <cite>Carla</cite></blockquote>
</pura-card-stack>

<!-- deeper pile, tighter steps, wobblier return spring -->
<pura-card-stack visible="5" offset="10" scale="0.03" threshold="120" spring="wobbly">
  <img src="/photos/one.jpg" alt="One" />
  <img src="/photos/two.jpg" alt="Two" />
  <img src="/photos/three.jpg" alt="Three" />
  <img src="/photos/four.jpg" alt="Four" />
  <img src="/photos/five.jpg" alt="Five" />
</pura-card-stack>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/card-stack.js"></script>

import "./pura/lib/card-stack.js";