/* Nine-photo hand collage: an intentionally irregular, stable mobile-first layout. */
.hand-collage {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(13, clamp(26px, 8.8vw, 48px));
  gap: 6px;
  width: min(100%, 560px);
  padding: 14px 12px;
}

.hand-photo {
  --final-rotate: 0deg;
  --from-x: 0;
  --from-y: 0;
  --assemble-delay: .45s;
  min-width: 0;
  aspect-ratio: auto;
  padding: 5px;
  transform: rotate(var(--final-rotate));
}

.hand-photo img,
.hand-photo-placeholder {
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}

.hand-photo:nth-child(1) { grid-column: 1 / span 3; grid-row: 1 / span 3; --final-rotate: -3.5deg; --from-x: -72vw; --from-y: -18vh; --assemble-delay: .42s; z-index: 2; }
.hand-photo:nth-child(2) { grid-column: 4 / span 3; grid-row: 1 / span 4; --final-rotate: 2.8deg; --from-x: 68vw; --from-y: -15vh; --assemble-delay: .52s; z-index: 1; }
.hand-photo:nth-child(3) { grid-column: 1 / span 2; grid-row: 4 / span 4; --final-rotate: 2deg; --from-x: -76vw; --from-y: 4vh; --assemble-delay: .64s; z-index: 3; }
.hand-photo:nth-child(4) { grid-column: 3 / span 2; grid-row: 4 / span 3; --final-rotate: -2deg; --from-x: 0; --from-y: -48vh; --assemble-delay: .74s; z-index: 4; }
.hand-photo:nth-child(5) { grid-column: 5 / span 2; grid-row: 5 / span 3; --final-rotate: 3.5deg; --from-x: 74vw; --from-y: 2vh; --assemble-delay: .84s; z-index: 3; }
.hand-photo:nth-child(6) { grid-column: 3 / span 3; grid-row: 7 / span 4; --final-rotate: -1.5deg; --from-x: 52vw; --from-y: 35vh; --assemble-delay: .94s; z-index: 2; }
.hand-photo:nth-child(7) { grid-column: 1 / span 2; grid-row: 8 / span 3; --final-rotate: -3deg; --from-x: -65vw; --from-y: 30vh; --assemble-delay: 1.04s; z-index: 1; }
.hand-photo:nth-child(8) { grid-column: 1 / span 2; grid-row: 11 / span 3; --final-rotate: 2.4deg; --from-x: -52vw; --from-y: 42vh; --assemble-delay: 1.14s; z-index: 2; }
.hand-photo:nth-child(9) { grid-column: 3 / span 4; grid-row: 11 / span 3; --final-rotate: -1.8deg; --from-x: 62vw; --from-y: 40vh; --assemble-delay: 1.24s; z-index: 1; }

.holding-hands.is-visible .hand-photo {
  animation: handCollageAssemble .9s cubic-bezier(.2,.72,.25,1) both;
  animation-delay: var(--assemble-delay) !important;
}

.holding-hands.is-visible .hands-reflection {
  animation-delay: 1.85s;
}

.holding-hands.is-visible .hands-choice {
  animation-delay: 2.35s;
  pointer-events: auto;
}

@keyframes handCollageAssemble {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translate(var(--from-x), var(--from-y)) rotate(var(--final-rotate)) scale(.88);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate(0, 0) rotate(var(--final-rotate)) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .holding-hands.is-visible .hand-photo {
    animation: none !important;
    opacity: 1;
    filter: none;
    transform: rotate(var(--final-rotate));
  }
}