/* ============================================================
   SKETCH -> PAGE
   Thumbnail: a round window follows the cursor, peeking at the
   finished art through it. Click: opens a larger module with a
   drag-to-compare before/after slider.
   Loaded only by process.html.  (@keyframes polaroid-pull is in style.css.)
   ============================================================ */

.peek-section { background: var(--cream-deep); }
.peek-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 40px 28px;
  margin-top: 8px;
}
.peek { margin: 0; }

/* ---------- thumbnail: the circle "peek" lens ---------- */
.peek-stage {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 10px;
  font: inherit;
  text-align: left;
  position: relative;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 5px 5px 0 rgba(23, 11, 17, 0.15);
  cursor: pointer;
  touch-action: none;                 /* let a finger drag the peek lens instead of scrolling */
  -webkit-touch-callout: none;        /* no long-press "save image" menu while peeking */
  -webkit-user-select: none;
  user-select: none;
  --peek-r: 78px;
  --peek-x: 50%;
  --peek-y: 50%;
}
.peek-stage:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.peek-stage .peek-sketch,
.peek-stage .peek-final { display: block; width: 100%; height: auto; }
/* finished art sits on top of the sketch, shown only through the round mask */
.peek-stage .peek-final {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.16s ease;
  -webkit-mask-image: radial-gradient(circle var(--peek-r) at var(--peek-x) var(--peek-y), #000 92%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(circle var(--peek-r) at var(--peek-x) var(--peek-y), #000 92%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.peek-stage.is-peeking .peek-final { opacity: 1; }

.peek-ring {
  position: absolute;
  top: var(--peek-y);
  left: var(--peek-x);
  width: calc(var(--peek-r) * 2);
  height: calc(var(--peek-r) * 2);
  border: 2px solid rgba(23, 11, 17, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 10px rgba(23, 11, 17, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}
.peek-stage.is-peeking .peek-ring { opacity: 1; }

.peek-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-family: var(--font-marker);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cream);
  background: rgba(23, 11, 17, 0.75);
  border-radius: 999px;
  padding: 4px 12px;
  pointer-events: none;
  transition: opacity 0.16s ease;
}
.peek-stage.is-peeking .peek-hint { opacity: 0; }

.peek figcaption {
  font-family: var(--font-marker);
  font-size: 0.95rem;
  text-align: center;
  margin-top: 12px;
  color: var(--ink);
}

/* ---------- module: before/after slider ---------- */
.peek-viewer {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(23, 11, 17, 0.78);
  perspective: 1100px;
  cursor: zoom-out;
}
.peek-viewer[hidden] { display: none; }

.peek-big {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 96vw;
  transform-origin: center bottom;   /* hinge at the bottom edge — the "pick up" */
  animation: polaroid-pull 0.55s cubic-bezier(0.2, 0.8, 0.25, 1) both;
  cursor: default;
}

.peek-compare {
  position: relative;
  overflow: hidden;
  border: 12px solid var(--cream);
  border-radius: 10px;
  background: var(--cream);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55);
  touch-action: none;               /* dragging moves the handle, doesn't scroll */
  user-select: none;
  cursor: ew-resize;
  --pos: 50%;
}
.peek-compare img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 82vh;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}
/* base = finished art; sketch overlays it, clipped to the LEFT of the handle */
.peek-compare .peek-sketch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.peek-tag {
  position: absolute;
  top: 12px;
  font-family: var(--font-marker);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cream);
  background: rgba(23, 11, 17, 0.72);
  padding: 3px 10px;
  border-radius: 999px;
  pointer-events: none;
}
.peek-tag--sketch { left: 12px; }
.peek-tag--final  { right: 12px; }

.peek-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  background: var(--cream);
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(23, 11, 17, 0.4);
  pointer-events: none;
}
.peek-knob {
  position: absolute;
  top: 50%;
  left: var(--pos);
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 0 3px 10px rgba(23, 11, 17, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
}
.peek-knob:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.peek-knob::before,
.peek-knob::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.peek-knob::before { border-right: 7px solid var(--ink); margin-right: 3px; }
.peek-knob::after  { border-left: 7px solid var(--ink);  margin-left: 3px; }

.peek-big figcaption {
  font-family: var(--font-marker);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--cream);
  padding: 3px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

@media (max-width: 560px) { .peek-grid { gap: 32px 20px; } }