Deck

`<pura-deck>` is the awwwards stacking-cards section: as you scroll, each card sticks near the top of the viewport and the next one slides up and over it, so the deck piles up card by card. The stacking is pure CSS, `position: sticky` on the slotted children, so there is no per-frame JS, no scroll listener doing layout, nothing to gate behind reduced motion (scrolling itself is the animation). The JS layer only numbers the children with `--pura-deck-i` / `--pura-deck-rev` custom properties: the index staggers each card's sticky `top` by `peek` px so earlier cards peek out above the pile, and the reverse index drives a small recede scale on covered cards so the pile reads as depth. Cards are whatever you slot, give them a background and a min-height and they behave. A `slotchange` listener renumbers when cards are added or removed. Each instance registers in `window.__puraDecks` by `data-pura-id` with `{ count }`, and `data-pura-deck-count` mirrors the card count.

Preview

<!-- the classic stacking-cards section -->
<pura-deck>
  <section class="card">Feature one</section>
  <section class="card">Feature two</section>
  <section class="card">Feature three</section>
</pura-deck>

<!-- tighter pile, no recede scale -->
<pura-deck top="64" peek="8" gap="120" no-depth>
  <div class="card">...</div>
  <div class="card">...</div>
</pura-deck>

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

import "./pura/lib/deck.js";