/* The drifting wall of Ape portraits. Pair with shared/wall.js and:
   <div class="wall" id="wall" aria-hidden="true"></div><div class="veil" aria-hidden="true"></div>
   Tune the darkening per page with --veil-mid / --veil-edge. */
.wall{position:fixed;inset:-4vh -2vw;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:clamp(10px,1.4vw,22px);padding:0 clamp(10px,1.4vw,22px);
  --cols:7;transform:rotate(-4deg) scale(1.08);opacity:0;animation:wall-fade 2s .2s ease forwards}
.wall .col{overflow:hidden}
.wall .track{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,22px);animation:wall-up var(--dur,90s) linear infinite}
.wall .col:nth-child(even) .track{animation-name:wall-down}
@keyframes wall-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes wall-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes wall-fade{to{opacity:1}}
.wall .frame{position:relative;aspect-ratio:1;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55));opacity:0;transition:opacity .8s ease}
.wall .frame.in{opacity:1}
.wall .frame .ape,.wall .frame .mat{position:absolute;display:block;object-fit:cover;background:#2b2119}
.wall .frame .mat{background:radial-gradient(ellipse at 50% 40%,#2a1d16,#120c09 75%)}
.wall .frame .fr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.veil{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 65% at 50% 50%,rgba(22,18,12,var(--veil-mid,.35)),rgba(22,18,12,var(--veil-edge,.85)) 85%)}
@media (max-width:1100px){.wall{--cols:5}.wall .col:nth-child(n+6){display:none}}
@media (max-width:640px){.wall{--cols:3}.wall .col:nth-child(n+4){display:none}}
@media (prefers-reduced-motion:reduce){.wall .track{animation:none}.wall .frame{transition:none}.wall{animation-duration:.01ms;animation-delay:0s}}