/* ==========================================================================
   tunnel.css — the gallery page’s corridor.

   TWO THINGS MAKE THE TUNNEL, and only one of them is 3D.

   The WALLS are a picture: Figma 14550:10603 is a linear ramp on a skewed rect
   mirrored into four quadrants, which is how a diamond gradient is built, and
   the result is a box corridor seen down its axis — black at the far end,
   lifting to grey where the near walls pass the camera. It is a background
   image, not geometry, and it is exactly the file's own SVG.

   The IMAGES are 3D: CSS transforms in a perspective container, the same tool
   the wheel and the sphere already use here rather than a renderer this site
   does not carry. Each one is a plane at a depth, either lying on a wall or
   turned to face you, and the camera moves along z.

   Infinity is a modulo. There is no end to reach, so there is no end to build.
   ========================================================================== */

.tunnel{
  position: fixed; inset: 0;
  overflow: hidden;
  background: #000;
  perspective: var(--tun-persp, 900px);
  perspective-origin: 50% 50%;
}

/* ---------------- the corridor, as GEOMETRY -------------------------------
   Four planes, not a picture. It was a picture: Figma's gradient painted onto
   one flat element, which looks right until anything moves — a poster of a
   tunnel spun about its centre is a spinning poster, and the photographs inside
   it were rotating against a corridor that could not.

   These are real walls in the same 3D tree as the images, so they recede with
   the same perspective, turn with the same rotation and pass the camera at the
   same rate. The gradient in the design is not painted on them at all: it is
   what DISTANCE does to a lit surface, and with real geometry the fog produces
   it for free at every angle instead of only at the one the file was drawn at.

   Sized from tileZ so the wrap is invisible: the walls are three tiles long and
   the camera wraps every tile, which means the join is always the same distance
   away and always inside the fog. */
.tunnel__wall{
  position: absolute; left: 50%; top: 50%;
  transform-origin: 50% 50%;
  background: var(--tun-wallCol, #d9d9d9);
  backface-visibility: hidden;
}
/* The grid the reference rules onto its walls. Two repeating gradients rather
   than an image, so it scales with the wall and costs nothing. */
.tunnel__wall::after{
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,var(--tun-gridA,0)) 0 1px, transparent 1px var(--tun-grid,240px)),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,var(--tun-gridA,0)) 0 1px, transparent 1px var(--tun-grid,240px));
}

/* The camera. Everything that moves the viewer moves THIS, so the items only
   ever have to know where they are — js/tunnel.js writes the transform. */
.tunnel__cam{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* One image. Its own depth and wall are inline, written once when the tunnel is
   built and again when the arrangement changes; the per-frame work is the
   camera's alone. */
.tunnel__it{
  position: absolute; left: 50%; top: 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.tunnel__it img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  /* The site's own treatment: no colour on the photographs until they are close
     enough to be looked at. js/tunnel.js fades this with depth. */
  filter: grayscale(var(--tun-grey, 1)) contrast(var(--tun-contrast, 1));
}

/* The far end swallows things. A single overlay rather than a per-item opacity:
   depth fog is a property of the corridor, not of any photograph in it. */
.tunnel__fog{
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
      rgba(0,0,0,var(--tun-fog, .85)) 0%,
      rgba(0,0,0,0) var(--tun-fogEnd, 62%));
}

/* The title sits over the corridor, exactly as the page already had it. */
body[data-page="gallery"] .hero{ position: relative; z-index: 3; }
body[data-page="gallery"] .cols{ z-index: 41; }

/* The blob, on this page too. Inside .tunnel because a blend composites against
   its own stacking context's backdrop and .tunnel is what paints the corridor —
   the same rule the work page's .stage and the index page's .about follow.
   z-index 1: over the walls, under the photographs, so the corridor's ground is
   what it clears rather than the pictures. */