Card Stack.

Layout

• A deep ground (#1b1c3a) with nothing on it but a stack of cards in the centre of the viewport, a row of dots at the bottom and, on the first slide only, a hint at bottom right. Every slide is one card: width min(80vw, 131vh), aspect-ratio 16/10 (max-height 82vh), 28px radius, padding 5vh 4vw, shadow 0 30px 80px rgba(0,0,0,.35), overflow hidden, transform-origin top centre. The stage is position fixed, display grid with place-items center, and has perspective 1800px.
• Paper. each card sets its own colour inline (style="--paper:#ffd9c4") and paints background var(--paper), rotating through peach #ffd9c4, mint #d3f2e2, butter #fff1b8, lilac #e6dcff, sky #d6e9ff, blush #ffd6e3. The cover card is the accent (#ff4f5e) with on-accent ink: inside it override --fg:#ffffff and --muted / --card / --line to the on-accent colour at 78% / 18% / 30% (color-mix). The ink tokens (#181830, #5d5d78, rgba(255,255,255,.55), rgba(24,24,48,.12)) are card ink and must read on those papers; every card also sets --bg:var(--paper) so objects that paint with the ground (timeline dots) match the paper.
• Card face = a flex column with 2.2vh gaps: a top row (an outlined pill "02 / 07" in .78rem weight 700 letter-spacing .08em, 1.5px border at 32% ink, 999px radius; the deck name on the right in muted .85rem weight 600), the title at clamp(2.2rem,4.4vw,4.8rem) weight 800 letter-spacing -.03em line-height 1.02, the lede, then the object(s) in a body that fills the rest of the card and centres them vertically. The cover pushes its title (clamp(3rem,6.8vw,7.4rem), letter-spacing -.04em) and lede to the bottom of the card. Objects are scaled to the card: rings --size clamp(6.4rem,10vw,9.6rem), stat values clamp(2rem,3.6vw,3.6rem), carousel quotes full width at clamp(1.4rem,2.5vw,2.5rem). One or two objects per card, never more.
• Stack geometry, every card from the engine's --ad (distance to the active card) with transform-origin 50% 0: transform: translate(0, calc(var(--ad) * -2.4vh)) rotate(0) scale(calc(1 - var(--ad) * .05)); filter: brightness(calc(1 - var(--ad) * .08)); opacity: clamp(0, 4 - var(--ad), 1) so only three cards peek; z-index: calc(100 - var(--ad)). The active card (--ad 0) is at scale 1, full brightness, on top; every card still to come sits 2.4vh higher and 5% smaller, so only its coloured top edge shows above the active card, like cards in a wallet, and its face is hidden (opacity 0). Transition: transform .75s and filter .75s cubic-bezier(.3,.7,.2,1), opacity .4s.
• The throw. a past card gets transform: translate(-28vw, 120vh) rotate(-16deg) scale(1), opacity 0 and z-index 200 (it flies over the stack), with transition transform .7s cubic-bezier(.5,0,.9,.4) and opacity .45s delayed .25s; its face and reveal objects stay printed on it while it flies. Going back, the same card returns from bottom-left to the top of the stack with the stack easing (.75s) while the card it covers slides back down into the wallet. Keep the same transform function order in every state (translate, rotate, scale, rotateX, rotateY) so the two interpolate cleanly. Cards without a state yet (before the engine's first render) are display:none, so the stack appears in place.
• Cursor tilt. on mousemove set --mx and --my (-1..1) on the stage (mouse only, skipped on touch and under reduced motion, reset to 0 on mouseleave, throttled to one frame); the active card's transform ends with rotateX(calc(var(--my) * -4deg)) rotateY(calc(var(--mx) * 5deg)), so the .75s transition makes it lean lazily toward the pointer.
• Face. opacity 0 to 1 over .5s delayed .3s once a card is active; objects with class reveal stagger in from 600ms (body data-reveal-delay="600", data-animate-delay="800") so they land after the card does.
• HUD. bottom centre, a row of .55rem dots (buttons with data-goto) in the ground's contrast ink (white on a dark ground) at 35% opacity; the active dot stretches to 1.7rem at 95%. Bottom right, a hint "Press → to deal the next card" that fades out after the first slide. Peeking cards are clickable (data-goto on each slide, cursor pointer on future cards).
• Under 760px: card 92vw wide, aspect 4/5 with min-height 76vh, padding 3.5vh 6vw, title clamp(1.8rem,9vw,2.6rem); rings in a 3-column grid at 4.8rem; deck name and hint hidden.

Navigation. ← → ↑ ↓ Space PageUp/PageDown deal forward and back; Home/End; number keys 1-9; touch swipe. No wheel. Clicking a dot or a peeking card jumps to it.