/* A definite width keeps percentage-height / auto-width mockups from collapsing
   inside a grid button. Preserve each source artwork's supplied aspect ratio. */
.mockup-poster .mockup-object,
.mockup-cards .mockup-object,
.mockup-sheets .mockup-object,
.mockup-stand .mockup-object {
  height: auto !important;
  aspect-ratio: var(--art-ratio);
  max-height: 82%;
  max-width: 82%;
}
.mockup-poster .mockup-object { width: 56%; }
.mockup-cards .mockup-object { width: 49%; }
.mockup-sheets .mockup-object { width: 62%; }
.mockup-stand .mockup-object { width: 50%; }

.mockup-poster .object-front img,
.mockup-cards .object-front img,
.mockup-sheets .object-front img,
.mockup-stand .object-front img {
  object-fit: contain;
}

/* Keep clipping and filters off the 3D parent. A 2D artwork leaf can reveal
   without flattening the translated faces, sidewalls or stand base. */
html[data-motion=on] .product-art.pixel-revealed .mockup-object {
  animation: none !important;
  clip-path: none !important;
  filter: none !important;
  transform-style: preserve-3d;
}
html[data-motion=on] .product-art.pixel-revealed .object-front img,
html[data-motion=on] .product-art.pixel-revealed .mockup-object > img {
  animation: artwork-pixel-arrive .7s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes artwork-pixel-arrive {
  0% {
    filter: blur(5px);
    clip-path: polygon(0 0,100% 0,100% 30%,75% 30%,75% 65%,40% 65%,40% 100%,0 100%);
  }
  55% {
    filter: blur(0);
    clip-path: polygon(0 0,100% 0,100% 80%,84% 80%,84% 100%,0 100%);
  }
  100% {
    filter: none;
    clip-path: none;
  }
}
html[data-motion=off] .product-art .object-front img,
html[data-motion=off] .product-art .mockup-object > img {
  animation: none !important;
  filter: none !important;
  clip-path: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .product-art .mockup-object,
  .product-art .object-front img,
  .product-art .mockup-object > img {
    animation: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}