/* ════════════════════════════════════════════════════════════
   WALL OF WORK — horizontal photo wall
   Baseline (no JS / phones / reduced motion): a swipeable, snap-aligned
   strip. js/gallery.js upgrades desktop to a sticky stage that fades in
   over the section above and scrubs sideways.
   Revert: remove this <link>, js/gallery.js, and the #wall-of-work
   section from index.html.
   ════════════════════════════════════════════════════════════ */

.wow {
  position: relative;
  z-index: 3;
  background: var(--near-black);
  color: var(--bone);
  padding: var(--section-pad) 0 calc(var(--section-pad) * 0.7);
  overflow: hidden;
}

.wow__stage {
  position: relative;
  background: var(--near-black);
}

/* Depth backdrop: a soft wash so the track reads as a foreground layer
   rather than a strip pasted onto a flat panel. */
.wow__bg {
  position: absolute;
  inset: -10% -5%;
  background:
    radial-gradient(60% 50% at 15% 20%, rgba(92, 138, 46, 0.18), transparent 70%),
    radial-gradient(50% 45% at 85% 75%, rgba(245, 241, 234, 0.07), transparent 70%);
  pointer-events: none;
}

.wow__intro {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.wow__intro .eyebrow { color: rgba(245, 241, 234, 0.55); }
.wow__intro h2 { color: var(--bone); }
.wow__intro p {
  color: rgba(245, 241, 234, 0.7);
  max-width: 60ch;
  margin: 14px auto 0;
}

/* ── The track ────────────────────────────────────────────── */

.wow__viewport {
  position: relative;
  margin-top: clamp(32px, 4vw, 56px);
  /* Native horizontal scroll is the baseline; the sticky mode below turns it
     off and drives the track by transform instead. */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wow__viewport::-webkit-scrollbar { display: none; }

.wow__track {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  padding: 0 max(24px, calc((100vw - var(--container)) / 2));
  width: max-content;
}

.wow__card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(260px, 32vw, 440px);
  margin: 0;
  scroll-snap-align: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #14140f;
  /* Kept tight on purpose: a wide, soft shadow on twelve cards is expensive to
     repaint while the wall is moving. */
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.wow__card img {
  display: block;
  width: 100%;
  height: clamp(320px, 50vh, 520px);
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.wow__card:hover img { transform: scale(1.04); }

.wow__card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 20px 18px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--bone);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.35) 55%, transparent);
}
.wow__card figcaption span {
  display: block;
  margin-top: 3px;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.6);
}

/* Lanes give the wall depth through size and vertical offset only. Drifting
   cards sideways at different rates looked like depth for about a second and
   then collided with their neighbours.
   Offset via `top`, never `transform` — gallery.js animates the cards' scale,
   and a GSAP transform would wipe a CSS translate. */
.wow__card[data-lane="back"] {
  width: clamp(220px, 25vw, 340px);
  top: 34px;
}
.wow__card[data-lane="back"] img { height: clamp(260px, 39vh, 400px); opacity: 0.86; }
.wow__card[data-lane="front"] {
  width: clamp(290px, 36vw, 500px);
  top: -30px;
}

.wow__hint {
  position: relative;
  max-width: var(--container);
  margin: 26px auto 0;
  padding: 0 24px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.45);
  text-align: center;
}
.wow__hint-touch { display: none; }

/* ── JS-driven desktop mode ───────────────────────────────── */

.wow--sticky {
  /* Height is set by gallery.js. The overlap is deliberately large: at -55vh the
     sticky stage is already covering the viewport before this section's own
     scroll range begins, so the wall is never seen travelling into place — it
     just dissolves in where it already is. A small overlap (-16vh was here) puts
     the dissolve and the arrival in the same moment, which reads as "it scrolled
     in and faded at the same time". */
  /* -80vh, deepened from -55vh: the dim starts while the section above still
     fills most of the screen, so there is no gap of plain page between the two
     — the wall darkens in over the outgoing section rather than after it. */
  margin-top: -80vh;
  padding: 0;
  /* overflow:hidden here would make this element a scroll container and
     position:sticky inside it would stop working. The stage clips instead. */
  overflow: visible;

  /* THE SECTION ITSELF MUST NOT PAINT.
     .wow carries `background: var(--near-black)` for the no-JS/mobile layout.
     In sticky mode the section box is pulled 720px up over the section above
     it, so that solid dark background sat on top of the bottom of "Real work.
     Real properties." from the moment the boxes overlapped — regardless of what
     the stage's opacity was doing. The stage is the only thing that should ever
     be visible, and its opacity is animated. */
  background: transparent;
  /* The invisible top of the stage must not swallow clicks meant for the
     section above; the cards opt back in below. */
  pointer-events: none;
}
.wow--sticky .wow__stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  opacity: 0; /* gallery.js fades this in with scroll progress */
}
.wow--sticky .wow__viewport {
  overflow: hidden;
  scroll-snap-type: none;
  pointer-events: auto;
}
.wow--sticky .wow__track {
  will-change: transform;
}
.wow--sticky .wow__card {
  /* gallery.js writes rotateY/scale here every frame. */
  will-change: transform;
  transform-origin: 50% 50%;
}
/* The hover zoom lives on the image because the card's own transform is
   scroll-driven and would fight a hover transition. */

@media (max-width: 767px) {
  /* Extra bottom room so the sticky call bar doesn't sit on the hint. */
  .wow { padding-top: calc(var(--section-pad) * 0.8); padding-bottom: 96px; }
  .wow__hint-desk { display: none; }
  .wow__hint-touch { display: inline; }
  /* Bold on mobile — a near-full-width card, not a thumbnail strip. */
  .wow__card,
  .wow__card[data-lane="back"],
  .wow__card[data-lane="front"] { width: 82vw; top: 0; }
  .wow__card img,
  .wow__card[data-lane="back"] img { height: 60vh; opacity: 1; }
  .wow__track { padding: 0 9vw; }
}