/* ─────────────────────────────────────────────────────────────
   Photo wall / "gallery marquee"
   Driven by /assets/gallery/manifest.json so growing to 100+ photos
   is a data change, not a code change.

   Design notes
   - Two rows drifting in opposite directions = perceived depth,
     reads as "a lot is happening here" without a wall of static tiles.
   - Pure CSS transforms on a duplicated track: zero layout thrash,
     no JS per frame, works fine on a mid-range phone.
   - Pauses on hover/focus and respects prefers-reduced-motion.
   - Images are lazy-loaded and decode async so the hero stays fast.
   ───────────────────────────────────────────────────────────── */

.wall {
  position: relative;
  padding: 8px 0 0;
  overflow: hidden;
  /* fade the edges so the loop seam is invisible */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.wall-row {
  display: flex;
  width: max-content;
  gap: 14px;
  padding: 7px 0;
  will-change: transform;
}
.wall-row[data-dir='left'] { animation: wall-left var(--wall-dur, 90s) linear infinite; }
.wall-row[data-dir='right'] { animation: wall-right var(--wall-dur, 90s) linear infinite; }

.wall:hover .wall-row,
.wall:focus-within .wall-row { animation-play-state: paused; }

@keyframes wall-left  { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes wall-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

.wall-card {
  position: relative;
  flex: 0 0 auto;
  width: var(--wall-card-w, 210px);
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cream-2);
  border: 1px solid rgba(0, 0, 0, .05);
  box-shadow: 0 1px 2px rgba(51, 41, 31, .05), 0 10px 22px -16px rgba(51, 41, 31, .3);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}
.wall-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wall-card:hover {
  transform: scale(1.045) translateY(-3px);
  box-shadow: 0 2px 4px rgba(51, 41, 31, .07), 0 18px 34px -16px rgba(51, 41, 31, .42);
  z-index: 3;
}

/* subtle caption revealed on hover — no caption clutter at rest */
.wall-card figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px 12px 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(to top, rgba(24, 18, 12, .72), rgba(24, 18, 12, 0));
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.wall-card:hover figcaption { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .wall-card { width: 130px; border-radius: 11px; }
  .wall-row { gap: 10px; animation-duration: calc(var(--wall-dur, 90s) * .72); }
}

/* accessibility: stop the motion, keep the pictures */
@media (prefers-reduced-motion: reduce) {
  .wall-row { animation: none !important; }
  .wall-card:hover { transform: none; }
}

/* When reduced motion is on we do not want a 20-photo horizontal overflow,
   so wall.js adds .wall-static and this turns it into a calm wrapped grid. */
.wall-static {
  -webkit-mask-image: none;
  mask-image: none;
  overflow: visible;
}
.wall-static .wall-row {
  flex-wrap: wrap;
  width: auto;
  justify-content: center;
  transform: none !important;
}
.wall-static .wall-row [aria-hidden="true"] { display: none; }

/* while the manifest is loading, avoid a flash of empty space */
.wall-skeleton { height: 275px; }
@media (max-width: 640px) { .wall-skeleton { height: 175px; } }