:root {
  --bg: #e3e3e3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.viewport.is-dragging { cursor: grabbing; }

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  opacity: 0;
  transition: opacity 400ms ease;
}
.canvas.is-ready { opacity: 1; }

.item {
  position: absolute;
  /* left/top/width/height/rotation set from script.js */
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
}

/* Shuffle / layout changes glide stickers to their new spots. */
.canvas.is-animating .item {
  transition:
    left 650ms cubic-bezier(.2, .8, .2, 1),
    top 650ms cubic-bezier(.2, .8, .2, 1),
    transform 650ms cubic-bezier(.2, .8, .2, 1);
}

/* Sticker art + outline, drawn in script.js. Bleeds past the item box by
   the outline thickness (positioned inline). */
.item canvas {
  position: absolute;
  pointer-events: none;
}

.item__live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url(#sticker-live);
  pointer-events: none;
  -webkit-user-drag: none;
}

@media (hover: hover) {
  .viewport:not(.is-dragging) .item:hover {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.04);
  }
}