/*
 * The studio's pictures behind the band of large type (studio-wall.js builds it).
 *
 * A wall of pictures eight columns wide, under a veil of the band's own
 * colour, so the band stays the colour it was and the type stays as easy to
 * read. The columns slide a little against each other as the band crosses the
 * window, by the browser's own view timeline.
 *
 * Nothing here takes a click or moves for somebody who asked for less motion.
 */
.value-statement.has-wall {
  padding-block: clamp(72px, 10vw, 156px) clamp(60px, 8.6vw, 136px);
}

.value-wall {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: absolute;
  inset: -18% 0;
  z-index: 0;
  pointer-events: none;
}

.value-wall-col {
  display: grid;
  flex: 1 1 0;
  gap: 10px;
  min-width: 0;
}

.value-wall-col:nth-child(even) {
  margin-top: -9%;
}

.value-wall img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.value-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--signature);
  opacity: 0.8;
}


@media (max-width: 1100px) {
  .value-wall-col:nth-child(n + 7) {
    display: none;
  }
}

@media (max-width: 767px) {
  .value-wall {
    gap: 8px;
  }

  .value-wall-col {
    gap: 8px;
  }

  .value-wall-col:nth-child(n + 5) {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    body[data-motion="full"] .value-wall-col:nth-child(odd) {
      animation: value-wall-up linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    body[data-motion="full"] .value-wall-col:nth-child(even) {
      animation: value-wall-down linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

@keyframes value-wall-up {
  from { transform: translateY(5%); }
  to { transform: translateY(-5%); }
}

@keyframes value-wall-down {
  from { transform: translateY(-5%); }
  to { transform: translateY(5%); }
}