/* Sticker (F4): a collected stamp as a holographic foil sticker. The foil is one of the cut-out
   textures in images/stickers, chosen and turned by a multiple of 90° in the view (cards/_sticker);
   the mark is printed on it, upright, and a sheen crosses it. The sheen and the foil's hue move with
   the pointer over one sticker and with the scroll over all of them (holo_controller: --px and --sy),
   and an idle drift, each its own offset so none overrides another. Decoration: reduced motion holds
   it still. */
@property --drift { syntax: "<number>"; inherits: false; initial-value: 0; }

@layer components {
  /* Stickers want more room than the ring: the mark has to read. */
  .stamp-progress__stamps--stickers {
    --slot: 3.75rem;
    gap: calc(var(--slot) * 0.2);

    & .stamp-progress__stamp--filled::before { content: none; } /* the sticker replaces the ring and tick */

    /* A slot still to fill is the bowl of the logo's "g", barely there. */
    & li:not(.stamp-progress__stamp--filled) {
      border: 0;

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, currentColor 18%, transparent);
        mask: url("/assets/motifs/ring-e0d35887.svg") center / contain no-repeat;
      }
    }

    /* A wide mark's stickers are wide too (StickersHelper). */
    & .stamp-progress__stamp--wide { inline-size: calc(var(--slot) * 2); aspect-ratio: 2; }
  }

  .sticker {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    isolation: isolate;
    filter: drop-shadow(0 calc(var(--slot) * 0.05) calc(var(--slot) * 0.08) rgb(0 0 0 / 0.35)); /* follows the cut, not the box */

    --offset: calc(var(--px, 0) + var(--sy, 0) + var(--drift)); /* in % of travel, unitless */
  }

  /* The foil, turned; its own outline clips the sheen. */
  .sticker__foil {
    position: absolute;
    inset: 0;
    rotate: var(--turn);
    background: var(--foil) center / contain no-repeat;
    mask: var(--foil) center / contain no-repeat;
    filter: hue-rotate(calc(var(--offset) * 1.2deg));

    /* The sheen: one bright band across the foil, as light catches the film. */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      rotate: calc(var(--turn) * -1); /* the light comes from the same side whichever way the foil turned */
      background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.85) 48%, rgb(255 255 255 / 0.2) 54%, transparent 64%)
        calc(50% + var(--offset) * 1%) 50% / 300% 100% no-repeat;
      mix-blend-mode: screen;
    }
  }

  .sticker__mark {
    position: relative;
    inline-size: 55%;
    block-size: 55%;
    object-fit: contain;
    mix-blend-mode: multiply; /* printed on the foil, not pasted over it */
  }

  .sticker--rhombus .sticker__mark { block-size: 45%; }

  /* No mark of the business's own with a transparent background: the isotype, in ink. */
  .sticker__mark--isotype {
    background: var(--color-text-on-reward);
    mask: url("/assets/brand/isotype-primary-49e3bede.svg") center / contain no-repeat;
  }

  /* The stamp just credited lands like a rubber stamp (stamps.css), the sticker in place of the tick. */
  @media (prefers-reduced-motion: no-preference) {
    .stamp-progress__stamp--new .sticker { animation: stamp-in 450ms var(--ease-out-back) both; }

    .stamp-progress__stamps--stickers .stamp-progress__stamp--filled:not(.stamp-progress__stamp--new) .sticker {
      animation: sticker-drift 7s ease-in-out infinite alternate;
    }
  }

  @keyframes sticker-drift {
    from { --drift: -12; }
    to { --drift: 12; }
  }
}

/* One sticker on its own, on the campaign page beside what it prints and why. */
@layer components {
  .sticker-fact { display: flex; align-items: center; gap: calc(var(--inline-space) * 2); }

  .sticker-sample {
    --slot: 5.25rem;
    position: relative;
    flex: none;
    inline-size: var(--slot);
    aspect-ratio: 1;
  }

  .sticker-sample--wide { inline-size: calc(var(--slot) * 2); aspect-ratio: 2; }
}