/* ═══ SERVICES · SECTION 4 — PROJECT WALL ═══ */
.wall{position:relative;overflow:hidden;background:#080808;
  --tilt:-8deg;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:clamp(64px,11vh,120px) 0 clamp(64px,11vh,120px)}

.wall-head{position:relative;z-index:5;padding:0 var(--gut) clamp(40px,7vh,80px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.wall-head h2{margin-top:20px;font-size:clamp(1.7rem,4.4vw,3.5rem);line-height:1;max-width:16ch}
.wall-head .aside{font-size:12.5px;line-height:1.6;color:var(--dim);max-width:24ch;
  text-align:right;flex-shrink:0}
@media(max-width:760px){.wall-head{flex-direction:column;align-items:flex-start}
  .wall-head .aside{text-align:left}}

/* the tilted stage — oversized and rotated so no edges show */
.wall-stage{position:relative;
  width:148%;left:-24%;
  transform:rotate(var(--tilt));
  display:flex;flex-direction:column;gap:clamp(18px,2.2vw,34px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}

/* each row repeats its set twice; -50% completes one seamless loop */
.wall-row{display:flex;width:max-content;gap:clamp(18px,2.2vw,34px);will-change:transform}
.wall-row.a{animation:drift-l 78s linear infinite}
.wall-row.b{animation:drift-r 92s linear infinite}
@keyframes drift-l{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes drift-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
/* pause only the row whose card is actually hovered */
.wall-row:has(.tile:hover){animation-play-state:paused}
.wall-row.is-paused{animation-play-state:paused}   /* JS fallback for browsers without :has() */

.tile{position:relative;flex-shrink:0;overflow:hidden;background:var(--surface-alt);
  width:clamp(300px,38vw,620px);aspect-ratio:16/10;
  border-radius:clamp(10px,1.1vw,18px);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease}
.tile img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.38) brightness(.78);
  transition:filter .5s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.tile:hover{transform:scale(1.035);z-index:4;box-shadow:0 30px 80px rgba(0,0,0,.62)}
.tile:hover img{filter:grayscale(0) brightness(1);transform:scale(1.06)}

.tile .ph{position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(36.5deg,#161616 0 12px,#111 12px 24px)}
.tile .ph span{font-size:10px;letter-spacing:.14em;font-weight:600;color:var(--dim)}

/* label appears on hover */
.tile .lbl{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:38px 18px 16px;
  background:linear-gradient(to top,rgba(8,8,8,.9),transparent);
  font-size:11px;letter-spacing:.14em;font-weight:600;color:var(--text);
  opacity:0;transform:translateY(8px);
  transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.tile:hover .lbl{opacity:1;transform:none}

.wall-foot{position:relative;z-index:5;padding:clamp(44px,8vh,90px) var(--gut) 0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.wall-foot .count{font-size:clamp(1rem,1.4vw,1.26rem);font-weight:600;letter-spacing:-.012em;
  max-width:34ch}
.wall-foot .count b{color:var(--cut)}

.wall-head,.wall-foot{opacity:0;transform:translateY(18px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.wall-head.is-in,.wall-foot.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .wall-head,.wall-foot{opacity:1;transform:none}
  .wall-stage{transform:none;width:100%;left:0;padding:0 var(--gut);
    mask-image:none;-webkit-mask-image:none}
  .wall-row{width:100%;flex-wrap:wrap;justify-content:center}
  .tile{transform:none;width:clamp(260px,44vw,420px);box-shadow:none}
  .tile .lbl{opacity:1;transform:none}
}