/* What the card looks like (site/_cards), after bfolio's work grid. Everywhere: a big title,
   then pairs of a card and its business's photo, flat. On a wide screen with motion allowed
   and scroll-driven animations: each pair comes up tilted, the card turned one way and pushed
   left, the photo the other way and pushed right, lies flat across the middle and keeps turning
   the same way on its way out. */
@layer components {
  /* Wider than the text column, as in the reference: up to 76rem, a gutter on a small screen. */
  .cards-showcase {
    margin-block-start: calc(var(--block-space) * 4);
    margin-inline: calc(50% - min(50vw - var(--inline-space-double), 38rem));
    overflow-x: clip; /* the tilted, spread pairs reach past the page */
  }

  .cards-showcase__head {
    margin-block-end: var(--block-space-double);
    text-align: center;

    .cards-showcase & h2 { /* beats .site-page h2 (site.css loads later): the section's word, set huge */
      font-size: clamp(3.5rem, 1rem + 10vw, 9rem);
      font-weight: 800;
      line-height: 0.95;
      letter-spacing: -0.05em;
    }

    & p { margin: var(--block-space) auto 0; font-size: var(--text-large); }
  }

  .cards-showcase__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--inline-space-double);
    margin-block-start: var(--block-space-double);

    @media (max-width: 40rem) { grid-template-columns: minmax(0, 1fr); }
  }

  /* The card in its business's colour, its name and prize in white, its stamps. */
  .cards-showcase__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--block-space-half);
    aspect-ratio: 4 / 3;
    padding: calc(var(--block-space) * 1.5);
    color: #fff;
    background: var(--card-color, #6448e8); /* the business's colour (adr/0022) */
    border-radius: var(--radius-x-large);

    & p { margin: 0; }
    & .headline__facts { color: rgb(255 255 255 / 0.75); margin: 0; }
    & .stamp-progress__label { display: none; } /* the facts say the goal; the prize says the rest */
  }

  .cards-showcase__business {
    position: absolute;
    inset: calc(var(--block-space) * 1.5) auto auto calc(var(--block-space) * 1.5);
    font-weight: 700;
  }

  /* The corner mark: the logo's ring in a white disc, where the reference has its arrow. */
  .cards-showcase__mark {
    position: absolute;
    inset: var(--block-space) var(--block-space) auto auto;
    display: grid;
    place-items: center;
    inline-size: 3rem;
    aspect-ratio: 1;
    color: var(--card-color, #6448e8);
    background: #fff;
    border-radius: 50%;
  }

  .cards-showcase__reward {
    font-size: clamp(1.5rem, 0.75rem + 2.5vw, 2.75rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    text-wrap: balance;
  }

  /* The photo, framed in violet like the reference's coloured edge. */
  .cards-showcase__photo .site-image {
    block-size: 100%;
    aspect-ratio: 4 / 3 !important;
    border: 0.375rem solid var(--card-color, #6448e8);
    border-radius: var(--radius-x-large);
  }

  /* Desktop: edge to edge, cards against the left of the screen and photos against the right. */
  @media (min-width: 52rem) {
    .cards-showcase { margin-inline: var(--bleed); }
    .cards-showcase__pair { gap: var(--block-space-double); }
  }

  @media (min-width: 52rem) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .cards-showcase__card, .cards-showcase__photo {
        animation: cards-settle linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }

      .cards-showcase__card { --tilt: 18deg; --spread: -18%; }
      .cards-showcase__photo { --tilt: -18deg; --spread: 18%; }
    }
  }

  /* One continuous turn: tilted and spread coming up, flat across the middle of the screen, then
     on past flat to the opposite tilt going out, like a wheel, never back the way it came. */
  @keyframes cards-settle {
    from { rotate: var(--tilt); translate: var(--spread) 22%; }
    40%, 60% { rotate: 0deg; translate: 0 0; }
    to { rotate: calc(-1 * var(--tilt)); translate: calc(-1 * var(--spread)) -22%; }
  }
}