/* GENERATED — run pnpm build:components. Source: packages/registry/card-stack/card-stack.css */

/**
 * Card Stack
 *
 * Reads tokens, never defines them. No global rules — every selector is scoped
 * under .vc-card-stack. Nothing here paints: no background, no border, no
 * radius. A card looks like the buyer's card, and the stack only decides where
 * it sits and how far back it is.
 *
 * The pinning is declared here but switched on from JavaScript, which adds
 * .vc-card-stack__card once it has written that card's offset. A page whose
 * script never ran is then a plain readable column of cards rather than a pile
 * with no depth to it.
 */

/**
 * transform-origin is load-bearing twice over. It makes the card recede toward
 * the sliver of itself still on show, which is what reads as depth — and it
 * leaves the top edge exactly where it was, so the factory can measure a
 * scaled card without measuring its own output.
 *
 * z-index is explicit rather than left to source order. `position: sticky`
 * makes every card a stacking context whatever the value, so this costs
 * nothing and stops a stray z-index inside a card reordering the deck.
 *
 * scroll-margin-top keeps an anchor link — #work, #project-3 — from landing
 * under the pinned card above it.
 */
.vc-card-stack__card {
  position: sticky;
  top: var(--vc-cs-pin, 0px);
  z-index: var(--vc-cs-index, auto);
  transform: scale(var(--vc-cs-scale, 1));
  transform-origin: top center;
  opacity: var(--vc-cs-fade, 1);
  scroll-margin-top: var(--vc-cs-pin, 0px);
}

/**
 * Belt and braces. The factory already declines to pin anything under reduced
 * motion; this covers a preference that flips after a frame is scheduled and
 * before it runs.
 *
 * `relative`, not `static`: both lay out identically in flow, but a card that
 * was relying on being a containing block for something absolutely positioned
 * inside it keeps that either way. Which is the same reason the pinned state
 * can be dropped without the card's own contents moving.
 */
@media (prefers-reduced-motion: reduce) {
  .vc-card-stack__card {
    position: relative;
    top: auto;
    transform: none;
    opacity: 1;
    scroll-margin-top: 0;
  }
}