/* Home: the wall of site screenshots. Four columns drift (one and three up, two and four down); two on phones.
   Only transform is animated. Motion stops under .is-paused, .is-offscreen and prefers-reduced-motion. */
.wall{--wall-gap:16px;--wall-fade:var(--ink);position:relative;overflow:clip;padding-bottom:clamp(48px,6vw,84px)}
.wall-top{display:grid;gap:22px;margin-bottom:clamp(30px,3.6vw,52px)}
.wall-head{margin-bottom:0;max-width:760px}
.wall-side{display:grid;gap:22px;align-content:end}
.wall-side .section-lede{margin-top:0;max-width:46ch}
.wall-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.wall-pause{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px 0 16px;border-radius:999px;border:1px solid var(--line-light,rgba(255,255,255,.18));background:none;color:rgba(255,255,255,.8);font:600 14px/1 var(--sans);letter-spacing:.02em;cursor:pointer;transition:color .2s,border-color .2s}
.wall-pause::before{content:"";flex:none;width:9px;height:11px;border-inline:3px solid currentColor;box-sizing:border-box}
.wall-pause[data-paused]::before{width:0;height:0;border:6px solid transparent;border-left:10px solid currentColor;border-right:0}
.wall-pause:hover{color:#fff;border-color:rgba(255,255,255,.5)}

/* ---------- the band ---------- */
.wall-band{position:relative;width:92%;height:60vh;min-height:380px;max-height:620px;margin-inline:auto;overflow:hidden}
.wall-band::before,.wall-band::after{content:"";position:absolute;z-index:2;pointer-events:none}
/* soft fade at the top and bottom */
.wall-band::before{inset:0;background:linear-gradient(to bottom,var(--wall-fade) 0,rgba(11,13,20,.6) 5%,rgba(11,13,20,0) 15%,rgba(11,13,20,0) 85%,rgba(11,13,20,.6) 95%,var(--wall-fade) 100%)}
/* left and right edges fade out */
.wall-band::after{inset:0;background:linear-gradient(to right,var(--wall-fade) 0,rgba(11,13,20,0) var(--wall-edge,6%),rgba(11,13,20,0) calc(100% - var(--wall-edge,6%)),var(--wall-fade) 100%)}
.wall-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wall-gap);align-items:start}
.wall-col{display:flex;flex-direction:column;gap:var(--wall-gap);min-width:0;will-change:transform;animation:wall-drift var(--wall-t,40s) linear infinite;animation-delay:var(--wall-d,0s)}
.wall-col--1{--wall-t:40s}
.wall-col--2{--wall-t:46s;--wall-d:-7s;animation-direction:reverse}
.wall-col--3{--wall-t:36s;--wall-d:-13s}
.wall-col--4{--wall-t:48s;--wall-d:-21s;animation-direction:reverse}
.wall-col--3,.wall-col--4{display:none}
/* one full set of tiles is half the column plus half a gap, so the loop seam is exact */
@keyframes wall-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - var(--wall-gap)/2),0)}}
.wall-tile{position:relative;flex:none;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#161A26}
.wall-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.12);pointer-events:none}
.wall-tile img{display:block;width:100%;height:100%;object-fit:cover}
.wall-tile .tag{position:absolute;left:8px;top:8px;z-index:1;margin:0;padding:4px 8px;font-size:9.5px;letter-spacing:.09em;line-height:1.2;box-shadow:0 2px 10px rgba(11,13,20,.35)}
.wall-col--1 .tag{left:auto;right:8px}
.wall-caption{margin-top:clamp(20px,2.4vw,30px);text-align:center;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.66)}

/* hold a column still while the pointer is on it */
@media (hover:hover){.wall-col:hover{animation-play-state:paused}}
.wall-band.is-paused .wall-col,.wall-band.is-offscreen .wall-col{animation-play-state:paused}

@media (min-width:700px){
  .wall-band{height:min(78vh,760px);min-height:460px;max-height:none}
  .wall-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wall-col--3,.wall-col--4{display:flex}
  .wall-band{--wall-edge:10%}
  .wall-tile .tag{left:10px;top:10px;padding:5px 10px;font-size:10.5px}
  .wall-col--1 .tag{left:auto;right:10px}
}
@media (min-width:900px){
  .wall-top{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:end}
  .wall-side{justify-items:start}
}
@media (min-width:1100px){
  .wall-band{width:min(82%,1340px)}
  .wall-tile .tag{font-size:11px}
}

/* reduced motion: a still, staggered wall with everything visible */
@media (prefers-reduced-motion:reduce){
  .wall-col{animation:none;will-change:auto}
  .wall-col--2,.wall-col--4{transform:translateY(-64px)}
  .wall-pause{display:none}
}
html:not(.js) .wall-pause{display:none}