/* Grid-anchored artwork stays on the seams as cards grow with their content. */
.sticker-anchor {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.3));
}

.sticker-anchor--mood {
  --sticker-tilt: -12deg;
  --sticker-art: url("../assets/stickers/GoodMood-optimized.webp");
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  top: 0;
  right: 0;
  width: clamp(108px, 10vw, 145px);
  translate: 50% -50%;
}

.sticker-anchor--bold {
  --sticker-tilt: 10deg;
  --sticker-art: url("../assets/stickers/FeelingBoldToday-optimized.webp");
  grid-column: 1 / 5;
  grid-row: 4 / 5;
  left: 30%;
  bottom: 0;
  width: clamp(120px, 12vw, 170px);
  translate: -50% 50%;
}

.sticker-anchor--volume {
  --sticker-tilt: -8deg;
  --sticker-art: url("../assets/stickers/TurnItUp-optimized.webp");
  grid-column: 4 / 6;
  grid-row: 6 / 7;
  top: 0;
  left: 30%;
  width: clamp(120px, 10vw, 145px);
  translate: -50% -50%;
}

.foil-sticker {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  pointer-events: auto;
  cursor: pointer;
  transform: rotate(var(--sticker-tilt));
}

.foil-sticker img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.foil-sticker:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 5px;
}

/* Alpha in the scanned-style paper reveals the card through fibers and glue. */
.sticker-anchor::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: rotate(var(--sticker-tilt));
  /* Match each supplied design's transparent die-cut silhouette. */
  -webkit-mask: var(--sticker-art) center / 100% 100% no-repeat;
  mask: var(--sticker-art) center / 100% 100% no-repeat;
  /* Fit the visible alpha bounds, excluding the PNG's transparent margins. */
  background: url("../assets/textures/sticker-residue-oval-optimized.webp") 52.778% 51.695% / 108.108% 152.444% no-repeat;
}

.sticker-anchor--bold::after {
  background-image: url("../assets/textures/sticker-residue-strip-optimized.webp");
  background-size: 105.960% 147.465%;
  background-position: 48.148% 49.515%;
}

.sticker-anchor.is-scraping::after,
.sticker-anchor.is-scraped::after {
  opacity: 0.4;
}

.sticker-anchor.is-scraping .foil-sticker {
  pointer-events: none;
  animation: sticker-scrape 720ms linear forwards;
}

.sticker-anchor.is-scraping,
.sticker-anchor.is-scraped {
  filter: none;
}

.sticker-anchor.is-scraped .foil-sticker {
  /* Preserve the anchor's size, so the residue never jumps or collapses. */
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

@keyframes sticker-scrape {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 8%, 100% 17%, 100% 26%, 100% 35%, 100% 44%, 100% 53%, 100% 62%, 100% 71%, 100% 80%, 100% 90%, 100% 100%, 0 100%);
  }
  28%, 35% {
    clip-path: polygon(0 0, 69% 0, 73% 8%, 67% 17%, 71% 26%, 63% 35%, 66% 44%, 59% 53%, 65% 62%, 60% 71%, 66% 80%, 61% 90%, 64% 100%, 0 100%);
    filter: blur(0.25px);
  }
  62%, 68% {
    clip-path: polygon(0 0, 28% 0, 33% 8%, 27% 17%, 30% 26%, 23% 35%, 27% 44%, 19% 53%, 24% 62%, 18% 71%, 25% 80%, 20% 90%, 22% 100%, 0 100%);
    filter: blur(0.25px);
  }
  100% {
    clip-path: polygon(0 0, 0 0, 0 8%, 0 17%, 0 26%, 0 35%, 0 44%, 0 53%, 0 62%, 0 71%, 0 80%, 0 90%, 0 100%, 0 100%);
  }
}

.sticker-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .sticker-anchor.is-scraping .foil-sticker {
    animation: none;
  }
}

/* Reserve the small areas under the overlapping edges for decoration. */
.bento-card--about {
  padding-top: max(var(--card-padding), 5rem);
}

.bento-card--service {
  padding-bottom: calc(var(--card-padding) + 1.5rem);
}

@media (max-width: 56.25rem) {
  .sticker-anchor--volume {
    display: none;
  }
}

@media (max-width: 37.5rem) {
  .sticker-anchor--mood {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    right: 18px;
    width: 100px;
    translate: 0 -50%;
  }

  .sticker-anchor--bold {
    display: none;
  }

  .bento-card--about {
    padding-top: var(--card-padding);
  }

  .bento-card--service {
    padding-bottom: var(--card-padding);
  }
}