/* StickerPeel (React Bits) – vanilla port */
.sticker-stage {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: calc(var(--sticker-w, 340px) * 1.3);
  margin: 24px auto 0;
}
.sticker-stage::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: calc(var(--sticker-w, 340px) * 1.1);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 14px 0 rgba(76,0,22,.35);
}
.sticker-hint {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 12px;
  text-align: center;
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: clamp(22px, 5.4vw, 28px);
  line-height: 1.15;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(76,0,22,.45);
  pointer-events: none;
}
.sticker-hint .h-hover { display: none; }
@media (hover: hover) and (pointer: fine) { .sticker-hint .h-hover { display: inline; } }
.sticker-stage:not(.sticker-stage--flat) { margin-bottom: 56px; }
.sticker-draggable {
  --sticker-rotate: 30deg;
  --sticker-p: 10px;
  --sticker-peelback-hover: 30%;
  --sticker-peelback-active: 40%;
  --sticker-start: calc(-1 * var(--sticker-p));
  --sticker-end: calc(100% + var(--sticker-p));
  --peel-direction: 0deg;
  position: absolute; left: 0; top: 0; z-index: 1;
  cursor: grab;
  transform: translateZ(0);
}
.sticker-draggable:active { cursor: grabbing; }
.sticker-container { position: relative; transform: rotate(var(--peel-direction)); transform-origin: center; }
.sticker-container * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.sticker-main {
  clip-path: polygon(var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-end), var(--sticker-start) var(--sticker-end));
  transition: clip-path .6s ease-out;
  filter: url(#dropShadow);
}
.sticker-main > * { transform: rotate(calc(-1 * var(--peel-direction))); }
.sticker-lighting { filter: url(#pointLight); }
.sticker-container:hover .sticker-main,
.sticker-container.touch-active .sticker-main {
  clip-path: polygon(var(--sticker-start) var(--sticker-peelback-hover), var(--sticker-end) var(--sticker-peelback-hover), var(--sticker-end) var(--sticker-end), var(--sticker-start) var(--sticker-end));
}
.sticker-container:active .sticker-main {
  clip-path: polygon(var(--sticker-start) var(--sticker-peelback-active), var(--sticker-end) var(--sticker-peelback-active), var(--sticker-end) var(--sticker-end), var(--sticker-start) var(--sticker-end));
}
.sticker-image { transform: rotate(var(--sticker-rotate)); }
.flap {
  position: absolute; width: 100%; height: 100%; left: 0;
  top: calc(-100% - var(--sticker-p) - var(--sticker-p));
  clip-path: polygon(var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-start) var(--sticker-start));
  transform: scaleY(-1);
  transition: all .6s ease-out;
}
.flap > * { transform: rotate(calc(-1 * var(--peel-direction))); }
.sticker-container:hover .flap,
.sticker-container.touch-active .flap {
  clip-path: polygon(var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-peelback-hover), var(--sticker-start) var(--sticker-peelback-hover));
  top: calc(-100% + 2 * var(--sticker-peelback-hover) - 1px);
}
.sticker-container:active .flap {
  clip-path: polygon(var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-peelback-active), var(--sticker-start) var(--sticker-peelback-active));
  top: calc(-100% + 2 * var(--sticker-peelback-active) - 1px);
}
.flap-lighting { filter: url(#pointLightFlipped); }
.flap-image { transform: rotate(var(--sticker-rotate)); filter: url(#expandAndFill); }
.sticker-image, .flap-image { display: block; width: var(--sticker-width, 200px); }
.sticker-main, .flap { will-change: clip-path, transform; }
@media (hover: none) and (pointer: coarse) {
  .sticker-draggable { cursor: default; }
  .sticker-container { touch-action: none; }
}

/* scroll "glue-on": sticker starts peeled, flattens as you scroll */
.sticker-container.scroll-peeling .sticker-main {
  transition: none;
  clip-path: polygon(var(--sticker-start) var(--scroll-peel), var(--sticker-end) var(--scroll-peel), var(--sticker-end) var(--sticker-end), var(--sticker-start) var(--sticker-end));
}
.sticker-container.scroll-peeling .flap {
  transition: none;
  clip-path: polygon(var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--scroll-peel), var(--sticker-start) var(--scroll-peel));
  top: calc(-100% + 2 * var(--scroll-peel) - 1px);
}

/* variant without circle (sticker resting on a box) */
.sticker-stage--flat {
  height: clamp(230px, 50vw, 290px);
  margin: 0 auto -34px;
  position: relative;
  z-index: 2;
}
.sticker-stage--flat::before { display: none; }