/*
==========================================================================

 PROJECT     : SIGNATURE SPREADS AND TREATS BY DI
 VERSION     : 1.0.0
 AUTHOR      : JB

===========================================================================
*/

/* STACKED PHOTO INTERACTIONS */

.gallery-page .gallery-photo {
    transition:
        transform var(--motion-duration-normal)
            var(--motion-ease-emphasized);
}

.gallery-page .gallery-photo-frame,
.gallery-page .gallery-photo-back {
    transition:
        transform var(--motion-duration-normal)
            var(--motion-ease-emphasized),
        box-shadow var(--motion-duration-normal)
            var(--motion-ease-standard);
}

.gallery-page .gallery-photo-frame img {
    transition:
        transform 900ms
            var(--motion-ease-emphasized);
}

.gallery-page .gallery-photo-expand {
    transition:
        opacity var(--motion-duration-fast)
            var(--motion-ease-standard),
        transform var(--motion-duration-fast)
            var(--motion-ease-standard),
        background-color var(--motion-duration-fast)
            var(--motion-ease-standard),
        color var(--motion-duration-fast)
            var(--motion-ease-standard);
}

@media (hover: hover) {

    .gallery-page .gallery-photo:hover,
    .gallery-page .gallery-photo:focus-visible {
        transform:
            translateY(-5px)
            rotate(0deg);
    }

    .gallery-page .gallery-photo:hover .gallery-photo-frame,
    .gallery-page .gallery-photo:focus-visible .gallery-photo-frame {
        box-shadow:
            0 26px 54px rgba(75, 46, 30, 0.19);
    }

    .gallery-page .gallery-photo:hover .gallery-photo-frame img,
    .gallery-page .gallery-photo:focus-visible .gallery-photo-frame img {
        transform: scale(1.025);
    }

    .gallery-page .gallery-photo:hover .gallery-photo-back-one,
    .gallery-page .gallery-photo:focus-visible .gallery-photo-back-one {
        transform:
            rotate(-4.4deg)
            translate(-7px, 8px);
    }

    .gallery-page .gallery-photo:hover .gallery-photo-back-two,
    .gallery-page .gallery-photo:focus-visible .gallery-photo-back-two {
        transform:
            rotate(3.6deg)
            translate(7px, 5px);
    }

    .gallery-page .gallery-photo:hover .gallery-photo-expand,
    .gallery-page .gallery-photo:focus-visible .gallery-photo-expand {
        opacity: 1;

        transform: translateY(0);
    }

    .gallery-page .gallery-photo-expand:hover {
        background-color: var(--color-primary);
        color: #ffffff;
    }

}

/* LIGHTBOX */

.gallery-page .gallery-lightbox {
    transition:
        opacity var(--motion-duration-normal)
            var(--motion-ease-standard),
        visibility var(--motion-duration-normal)
            var(--motion-ease-standard);
}

.gallery-page .gallery-lightbox-stage img {
    opacity: 0;
    transform: scale(0.98);
    transition:
        opacity var(--motion-duration-normal)
            var(--motion-ease-standard),
        transform var(--motion-duration-normal)
            var(--motion-ease-emphasized);
}

.gallery-page .gallery-lightbox.is-open
.gallery-lightbox-stage img {
    opacity: 1;
    transform: scale(1);
}

.gallery-page .gallery-lightbox-close,
.gallery-page .gallery-lightbox-nav {
    transition:
        background-color var(--motion-duration-fast)
            var(--motion-ease-standard),
        color var(--motion-duration-fast)
            var(--motion-ease-standard),
        border-color var(--motion-duration-fast)
            var(--motion-ease-standard);
}

.gallery-page .gallery-lightbox-close:hover,
.gallery-page .gallery-lightbox-close:focus-visible {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: #ffffff;
}

.gallery-page .gallery-lightbox-nav:hover,
.gallery-page .gallery-lightbox-nav:focus-visible {
    border-color: rgba(252, 250, 246, 0.65);
    background-color: var(--color-background);
    color: var(--color-text);
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .gallery-page .gallery-photo,
    .gallery-page .gallery-photo-frame,
    .gallery-page .gallery-photo-back,
    .gallery-page .gallery-photo-frame img,
    .gallery-page .gallery-photo-expand,
    .gallery-page .gallery-lightbox,
    .gallery-page .gallery-lightbox-stage img,
    .gallery-page .gallery-lightbox-close,
    .gallery-page .gallery-lightbox-nav {
        transition: none;
    }

    .gallery-page .gallery-photo:hover,
    .gallery-page .gallery-photo:focus-visible,
    .gallery-page .gallery-photo:hover .gallery-photo-back-one,
    .gallery-page .gallery-photo:hover .gallery-photo-back-two,
    .gallery-page .gallery-photo:hover .gallery-photo-frame img,
    .gallery-page .gallery-lightbox-stage img {
        transform: none;
    }
}