/* Layer the album photographs like a wall of physical prints. */
body[data-photo-view=sheet] .photo-album[data-wall-ready] {
  position: relative;
  display: block;
  columns: auto;
  overflow: visible;
  isolation: isolate;
  scroll-snap-type: none;
}
body[data-photo-view=sheet] .photo-album[data-wall-ready] .photo-slide {
  position: absolute;
  margin: 0;
  padding: 0;
  transform: rotate(var(--print-angle, 0deg));
  transform-origin: center;
  transition: transform 1s ease, z-index 1s linear;
  z-index: var(--print-layer, 1);
}
body[data-photo-view=sheet] .photo-album[data-wall-ready] .photo-slide > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: var(--print-shadow, 5px 6px 20px rgba(0,0,0,.7));
  transition: box-shadow 500ms ease;
}
body[data-photo-view=sheet] .photo-album[data-wall-ready] .photo-slide:focus-within {
  z-index: 100;
}
body[data-photo-view=sheet] .photo-album[data-wall-ready] .photo-slide:focus-within {
  transform: translateY(-4px) rotate(var(--print-angle, 0deg));
}
body[data-photo-view=sheet] .photo-album[data-wall-ready] .photo-slide:focus-within > img {
  box-shadow: var(--print-shadow, 5px 6px 20px rgba(0,0,0,.7));
}
@media (hover: hover) and (pointer: fine) {
  body[data-photo-view=sheet] .photo-album[data-wall-ready] .photo-slide:hover {
    z-index: var(--print-top-layer, 37);
    transform: translateY(-3px) rotate(var(--print-angle, 0deg));
    transition: transform 1s ease, z-index 1s linear;
  }
  body[data-photo-view=sheet] .photo-album[data-wall-ready] .photo-slide:hover > img {
    box-shadow: var(--print-shadow, 5px 6px 20px rgba(0,0,0,.7));
    animation: print-float 3.6s ease-in-out infinite;
  }
}
@keyframes print-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(0.45deg); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-photo-view=sheet] .photo-album[data-wall-ready] .photo-slide,
  body[data-photo-view=sheet] .photo-album[data-wall-ready] .photo-slide > img {
    transition: none;
    animation: none;
  }
  body[data-photo-view=sheet] .photo-album[data-wall-ready] .photo-slide:hover,
  body[data-photo-view=sheet] .photo-album[data-wall-ready] .photo-slide:focus-within {
    transform: rotate(var(--print-angle, 0deg));
  }
}

/* Reduced motion uses an immediate layer change. */
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  body[data-photo-view=sheet] .photo-album[data-wall-ready] .photo-slide:hover {
    transition: none;
  }
}