/* A dense photo cluster ends in a few smaller, slightly offset scenes. */
.global-buyers-scene h3.ui-icon-label { display: flex; gap: 9px; }
.global-buyers-scene h3 .ui-icon { color: var(--forest); }

.global-buyers .scene-wall {
  display: grid;
  gap: 8px;
  margin-top: 24px;
  min-width: 0;
}

.scene-wall-row {
  display: grid;
  grid-template-columns: repeat(var(--scene-columns), minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.scene-wall-image {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  background: var(--tint);
}

/* The stage stays in document flow. All rotated photo corners fit inside it,
   so the irregular edge does not intrude on the following sourcing section. */
.scene-wall-tail {
  position: relative;
  min-width: 0;
  aspect-ratio: 4.8;
}

.scene-wall-tail .scene-wall-row {
  display: contents;
}

.scene-wall-tail .scene-wall-image {
  position: absolute;
  left: var(--scene-x);
  top: var(--scene-y);
  width: var(--scene-width);
  transform: rotate(var(--scene-angle));
}

.scene-wall-crop {
  position: absolute;
  inset: 0;
  transition: transform 280ms cubic-bezier(.16, 1, .3, 1);
}

.scene-wall-crop img {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
}

@media (hover: hover) and (pointer: fine) {
  .scene-wall-image:hover .scene-wall-crop {
    transform: scale(1.045);
  }
}

@media (max-width: 767px) {
  .global-buyers .scene-wall {
    gap: 8px;
    margin-top: 20px;
  }

  .scene-wall-row {
    grid-template-columns: repeat(var(--scene-columns-compact), minmax(0, 1fr));
    gap: 6px;
  }

  .scene-wall-image {
    border-radius: 4px;
  }

  /* Flow-based rows keep every scene readable on phones. Insets contain the
     small rotations; varied top margins and widths leave an uneven outline. */
  .scene-wall-tail {
    display: grid;
    gap: 8px;
    aspect-ratio: auto;
    padding: 3px 3px 6px;
  }

  .scene-wall-tail .scene-wall-row {
    display: grid;
    align-items: start;
    gap: 8px 6px;
  }

  .scene-wall-tail .scene-wall-image {
    position: relative;
    left: auto;
    top: auto;
    justify-self: center;
    width: 98%;
    margin-top: 4px;
    transform: rotate(-2deg);
  }

  .scene-wall-tail .scene-wall-image:nth-child(3n + 2) {
    width: 94%;
    margin-top: 8px;
    transform: rotate(3deg);
  }

  .scene-wall-tail .scene-wall-image:nth-child(3n) {
    width: 96%;
    margin-top: 0;
    transform: rotate(-2deg);
  }

  .scene-wall-tail .scene-wall-row:last-child .scene-wall-image:nth-child(2n) {
    margin-top: 12px;
    transform: rotate(4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-wall-crop {
    transition: none;
  }

  .scene-wall-image:hover .scene-wall-crop {
    transform: none;
  }
}