/* Deck: cards in a row that scrolls and snaps one at a time, tilted like AdHoc's pile. Where
   scroll-driven animations exist, a card straightens and grows as it reaches the centre. */
@layer components {
  .deck {
    display: grid;
    gap: var(--block-space-half);
  }

  .deck__items {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(100% - 2rem, 24rem); /* the neighbours peek in, so it reads as a deck */
    gap: var(--inline-space-double);
    margin: 0;
    padding: var(--block-space) 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    list-style: none;
    border-radius: var(--radius-large);
  }

  .deck__item {
    scroll-snap-align: center;
    rotate: 3deg;

    &:nth-child(even) { rotate: -3deg; }
  }

  /* Pile: one card lying on a stack, after AdHoc's swipe cards. The cards beneath are only drawn,
     a paler violet each, and tilted the other way from the one on top. */
  .pile {
    display: grid;
    isolation: isolate;
    padding: var(--block-space) var(--inline-space-double) var(--block-space-double);

    & > *, &::before, &::after { grid-area: 1 / 1; }
    & > * { rotate: -2deg; }

    &::before, &::after {
      content: "";
      z-index: -1;
      border-radius: var(--radius-large);
    }

    &::before { rotate: 3deg; translate: 0.375rem 0.25rem; background: color-mix(in srgb, var(--color-link) 55%, var(--color-bg)); }
    &::after { rotate: -6deg; translate: -0.375rem 0.625rem; background: color-mix(in srgb, var(--color-link) 25%, var(--color-bg)); z-index: -2; }
  }

  /* The top card lies straight: it carries a QR staff scan (loyalty_card.css). */
  .pile--flat > * { rotate: none; }

  .deck__controls {
    display: flex;
    justify-content: center;
    gap: var(--inline-space-double);
    font-size: var(--text-large);
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .deck__item {
        animation: deck-depth linear both;
        animation-timeline: view(inline);
      }
    }
  }

  @keyframes deck-depth {
    0% { rotate: 4deg; scale: 0.88; }
    50% { rotate: 0deg; scale: 1; }
    100% { rotate: -4deg; scale: 0.88; }
  }
}