/* Behaviour on top of the static build: style.css is carried over from it
   unchanged, and what the scripts need lives here. */

/* Containers that script moves focus to (the footer links' targets) take it
   only so keyboard and screen reader users follow along. They are not
   controls, and draw no ring. */
.paper:focus,
.gear:focus { outline: none; }


/* ── the photographs can be handled ─────────────────────────────────────── */
/* collage.js moves the collage and the console print by --ox/--oy. `translate`
   composes ahead of style.css's transform, so the pinning and tilt there are
   left as they are.

   The collage moves in design pixels (--s), so a moved photograph keeps its
   place relative to the others as the window resizes. The print has no such
   unit — it belongs to the cream section, not the design frame — so it moves
   in hundredths of itself, which scales the same way.

   will-change gives each photograph its own compositing layer. Safari sizes
   the repaint of a moved element by its box, not by the drop-shadow spilling
   out of it, so without a layer a drag leaves a trail of stale shadow behind
   the photograph. With one, the painted photo and shadow move as a whole. */
.snap,
.plate--console {
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: scale 160ms ease;
}

.snap           { translate: calc(var(--ox, 0) * var(--s)) calc(var(--oy, 0) * var(--s)); }
.plate--console { translate: calc(var(--ox, 0) * 1%) calc(var(--oy, 0) * 1%); }

/* touch-action: none keeps a drag on a phone from scrolling the page instead;
   the green between the photographs still scrolls.

   The print is the exception: it sits in the middle of the reading flow,
   where a finger drawn up the page has to scroll it. So it takes sideways
   drags only, and mouse, trackpad and pen are unaffected. (Neither value
   leaves double-tap-to-zoom in the way of the double-tap reset — only `auto`
   and `manipulation` would.) */
.snap           { touch-action: none; }
.plate--console { touch-action: pan-y; }

/* picked up: lifted a touch off the page */
.snap.is-dragging,
.plate--console.is-dragging {
  cursor: grabbing;
  scale: 1.03;
}

/* double-clicked or double-tapped: eased back to the design's position. Only
   while homing — a transition on translate would make every drag lag behind
   the pointer. Timed with HOME_MS in collage.js. */
.snap.is-homing,
.plate--console.is-homing {
  transition: translate 260ms ease, scale 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .snap,
  .plate--console,
  .snap.is-homing,
  .plate--console.is-homing { transition: none; }
}

/* The plate spans the gate's middle; it lets the pointer through, so
   photographs dragged under the lockup can still be picked up again. */
.gate__plate { pointer-events: none; }