/* ─────────────────────────────────────────────────────────────────────────────
   wall.css — photos hung down a long wall.
   Loads after home.css (masthead, footer, loading dot come from there);
   this file only styles the wall itself and the closer view.
───────────────────────────────────────────────────────────────────────────── */

/* The wall is a corridor — as long as the walk needs; wall.js sets its
   width and height. The page scrolls sideways, never down. */
.wall {
  position: relative;
}

body {
  overflow-y: hidden;
}

.wall .home-loading {
  position: absolute;
  top: 45vh;
  left: 50%;
  transform: translateX(-50%);
}

/* One print. A button so it's keyboard/tap friendly, stripped of chrome —
   the photo is the whole object, flat on the wall, no effects. */
.wall-photo {
  position: absolute;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.wall-photo img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Closer view ────────────────────────────────────────────────────────── */

/* Stepping closer to the print — not a lightbox. The backdrop is the same
   wall the site lives on (paper + dust texture, fully opaque), so nothing
   changes except the print filling your view. */
.wall-closer {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background-color: var(--paper);
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('/icons/dust.webp');
  background-size: 400px 300px;
  cursor: pointer;
}

.wall-closer[hidden] {
  display: none;
}

/* Both layers share the cell: the wall print underneath, the sharp file
   fading in over it as it arrives. Backgrounds, not images — no save-as. */
.wall-closer > div {
  grid-area: 1 / 1;
  background-size: cover;
  background-position: center;
}

#wall-closer-sharp {
  opacity: 0;
  transition: opacity 0.18s ease;
}

#wall-closer-sharp.is-loaded {
  opacity: 1;
}

/* The prints resist casual grabbing: no drag ghost, no long-press sheet. */
.wall-photo img,
.wall-closer {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}