/* Iridescent "sticker" accents: thick ink outline, holographic fill, pale sticker edge.
   Used only on calls to action. */
:root {
  --holo: linear-gradient(
    115deg,
    #ffd6f3 0%,
    #d9c6ff 18%,
    #b5e8ff 36%,
    #c9ffe3 52%,
    #fff5b8 66%,
    #ffc9e6 82%,
    #cdbaff 100%
  );
  --holo-sheen: radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 55%);
  --sticker-edge: #FFFFFF;
}

.sticker-btn {
  position: relative;
  height: 56px;
  padding: 0 30px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background-image: var(--holo-sheen), var(--holo);
  background-origin: border-box;
  background-clip: border-box;
  background-repeat: no-repeat;
  background-size: 100% 100%, 260% 260%;
  background-position: 0 0, 0% 50%;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 0 0 4px var(--sticker-edge), 0 0 0 5px rgba(20, 33, 61, 0.12), 0 2px 0 5px rgba(20, 33, 61, 0.06);
  transition: background-position 700ms ease, transform 150ms ease;
}
.sticker-btn:hover { background-position: 0 0, 100% 50%; }
.sticker-btn:active { transform: translateY(1px); }
.sticker-btn:disabled { opacity: 0.75; cursor: default; }
.sticker-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 7px; }

.sticker-pill {
  display: inline-block;
  padding: 6px 14px;
  line-height: 1.3;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background-image: var(--holo-sheen), var(--holo);
  background-origin: border-box;
  background-clip: border-box;
  background-repeat: no-repeat;
  background-size: 100% 100%, 260% 260%;
  background-position: 0 0, 0% 50%;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 0 0 3px var(--sticker-edge), 0 0 0 4px rgba(20, 33, 61, 0.12);
  transition: background-position 700ms ease;
}
.sticker-pill:hover { color: var(--ink); background-position: 0 0, 100% 50%; }

.sticker-icon { display: block; width: 112px; height: 112px; flex: none; }
@media (max-width: 720px) { .sticker-icon { width: 88px; height: 88px; } }

@media (prefers-reduced-motion: reduce) {
  .sticker-btn, .sticker-pill { transition: none; }
}