/* StampProgress: one slot per stamp of the goal; the count beyond it lives in the label. */
@layer components {
  .stamp-progress { position: relative; } /* holds the next slot's tooltip (tooltips.css) */

  .stamp-progress__stamps {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--slot) * 0.3); /* room for a collected stamp's tick */
    margin: 0;
    padding: 0;
    list-style: none;

    --slot: 1.75rem;

    /* An empty slot is the logo's ring, at the logo's thickness. */
    & li {
      position: relative;
      inline-size: var(--slot);
      aspect-ratio: 1;
      border: calc(var(--slot) * var(--ring-ratio)) solid color-mix(in srgb, currentColor 45%, transparent);
      border-radius: 50%;
    }

    /* A collected stamp is the ring with its tick, the logo's own check mark. The glyph's box is
       1.43 times the ring, so the pseudo-element overhangs the slot to keep the ring the same size. */
    & .stamp-progress__stamp--filled {
      border: 0;

      &::before {
        content: "";
        position: absolute;
        inset: calc(var(--slot) * -0.215);
        background: var(--color-reward);
        mask: url("/assets/motifs/ring-e0d35887.svg") center / contain no-repeat;
      }
    }
  }

  .stamp-progress__label { font-weight: 700; }

  /* The stamp just credited lands like a rubber stamp: big and turned, then pressed into its slot.
     Feedback that it registered, so the counter keeps it (design-system.md, Motion). */
  @media (prefers-reduced-motion: no-preference) {
    .stamp-progress__stamp--new::before { animation: stamp-in 450ms var(--ease-out-back) both; }
  }

  @keyframes stamp-in {
    from { scale: 2; rotate: -30deg; opacity: 0; }
    60% { opacity: 1; }
  }
}