/*
 * Printo_HoverImage - category & search listing thumbnail hover.
 *
 * The stage holds two images: the normal listing picture in flow, and the
 * hover picture parked one full width to its right. Hovering slides both to
 * the left, so the listing picture leaves to the left and the hover picture
 * travels in from the right. Leaving the thumbnail reverses it rightward.
 *
 * Only rendered for products whose Hover Image differs from their Small
 * Image, so untouched products keep the original single-<img> markup.
 */

/*
 * inline-block, not block: the stage must shrink-wrap the picture so that a
 * 100% slide moves exactly one stage width. The theme widens .product-image
 * while the tile is hovered, and a full-width stage would leave a sliver of
 * the outgoing image showing at the edge.
 */
.ph-stage {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    line-height: 0;
    overflow: hidden;
}

.ph-stage img.ph-base,
.ph-stage img.ph-alt {
    -webkit-transition: -webkit-transform 400ms cubic-bezier(.4, 0, .2, 1);
    transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
    -webkit-transition-duration: var(--ph-speed, 400ms);
    transition-duration: var(--ph-speed, 400ms);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

.ph-stage img.ph-base {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Parked one full width to the right of the stage, clipped out of sight. */
.ph-stage img.ph-alt {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

a.product-image:hover .ph-stage img.ph-base,
.ph-stage.ph-on img.ph-base {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

a.product-image:hover .ph-stage img.ph-alt,
.ph-stage.ph-on img.ph-alt {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Touch devices never leave the hover state cleanly - keep the listing image. */
@media (hover: none) {
    .ph-stage img.ph-alt {
        display: none;
    }
    .ph-stage img.ph-base,
    .ph-stage img.ph-alt {
        -webkit-transition: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ph-stage img.ph-base,
    .ph-stage img.ph-alt {
        -webkit-transition: none;
        transition: none;
    }
}