/* Sticker peel stage. part.js lays one WebGL canvas over the stickers (under the centre copy) and hides the <img>s
   once every texture is ready; without WebGL, JS or with reduced motion the <img>s simply stay. */
.peel {
  position: relative;
  isolation: isolate;
  touch-action: pan-y;               /* part.js claims a touch only when it lands on a sticker */
}
.peel__sticker {
  position: absolute;
  height: auto;
  rotate: calc(var(--rot, 0) * 1deg);   /* --rot in deg, unitless; part.js reads the same value */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.peel__canvas {
  position: absolute;
  inset: calc(var(--peel-bleed, 0px) * -1);   /* overhang so curls near an edge aren't clipped (needs overflow-x: clip upstream) */
  z-index: 1;
  display: block;
  width: calc(100% + 2 * var(--peel-bleed, 0px));    /* a canvas doesn't stretch to its insets: size it */
  height: calc(100% + 2 * var(--peel-bleed, 0px));
  pointer-events: none;               /* the stage takes the pointer and hit-tests the print itself */
}
.peel__center {
  position: relative;
  z-index: 2;                         /* copy and buttons stay above the stickers and clickable */
}
.peel.is-peeling { cursor: grabbing !important; user-select: none; }