/* ==========================================================================
   path-gallery.css — the curve gallery's shell.

   Almost nothing lives here: the whole scene is one matrix3d written by
   js/path-gallery.js every frame, and every plane's place in it is another.
   What CSS owns is the lens and the ground.
   ========================================================================== */

.pathg{
  position: fixed; inset: 0;
  overflow: hidden;
  /* THE SITE'S OWN WHITE, the ground this page has always had. The fog is an
     opacity fade rather than a black wash, so it resolves to whatever is
     behind — which means the same code fades photographs INTO the paper here
     and would fade them into black on a dark page, with nothing to change. */
  background: var(--c-white, #fff);
  perspective: var(--pg-persp, 900px);
  perspective-origin: 50% 50%;
}

/* THE SCENE. Its transform is the VIEW MATRIX — the inverse of where the camera
   is — so moving the camera forward moves this backward, which is what a camera
   is in a compositor that has none. preserve-3d on both this and the planes, or
   the depth is flattened one level down and everything lands on one sheet. */
.pathg__world{
  position: absolute; left: 50%; top: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

.pathg__it{
  position: absolute; left: 0; top: 0;
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform, opacity;
}
/* The filter lives on the ITEM now, not here: it is a function of how far away
   the photograph is, and js/path-gallery.js writes it per plane per frame.

   The CLIP lives on the item too, and that is what makes the parallax possible:
   the shape belongs to the window, so the photograph can move underneath it
   without dragging its own outline along. Put the shape on the picture and a
   circular frame becomes a circle wandering about inside a square. */
.pathg__it img{
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  /* ROUNDED WHILE SCROLLING. js/path-gallery.js writes one percentage on the
     root for the whole field; the same variable name the work page uses for the
     same idea, on its own root. On the IMAGE rather than on the plane because
     the plane also carries the shape clip-path — the two then compose, a
     rounded photograph inside whatever silhouette the shape gives it, instead
     of one silently winning. */
  border-radius: var(--card-radius, 0%);
  /* Drawn LARGER than its window — js/path-gallery.js scales it — and the
     surplus is the room it has to travel. transform-origin stays central so the
     surplus is even on all four sides and the clamp is one number per axis. */
  will-change: transform;
}

/* THE BLOB, the same one the home page's white block runs — js/work-cursor.js,
   unchanged, hosted here because a blend composites against its own stacking
   context's backdrop and .pathg is what paints this page's paper.

   z-index 0 puts it under the photographs: it is the ground the gallery floats
   over, which is the arrangement it has on the index page too. */
body[data-page="gallery"] .work-blobs{ z-index: 0; }
.pathg__world{ z-index: 1; }