/*--------------------------------------------

    # Effects

----------------------------------------------*/
.has-modal-open [class*="has-effect-"] {
    backdrop-filter: none !important;
}
[class*="has-effect-"] { 
    position: relative; 
}
figure[class*="has-effect-"] {
    width: fit-content;
}
figure[class*="has-effect-"] figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: var(--wp--preset--color--white, white);
    text-shadow: 1px 1px 2px var(--wp--preset--color--black, black);
    max-height: 100%;
    padding: 0.5em 5%;
    pointer-events: none;
}
figure[class*="has-effect-"] figcaption a {
    color: inherit;
    pointer-events: all;
}
figure[class*="has-effect-"] figcaption a:hover,
figure[class*="has-effect-"] figcaption a:focus {
    color: var(--wp--preset--color--white);
}

/* Zoom */
.has-effect-zoom {
    overflow: hidden;
    box-shadow: none;
    transition-property: transform, opacity, box-shadow, background-color;
    transition-duration: var(--wp--custom--transition--duration);
    transition-timing-function: linear;
    transition-delay: var(--wp--custom--transition--delay);
}
.has-effect-zoom [class*="__background"],
.has-effect-zoom [class*="__gradient-background"],
.has-effect-zoom [class*="__inner-container"],
.has-effect-zoom::after {
    pointer-events: none;
}
.has-effect-zoom [class*="__inner-container"] a {
    pointer-events: all;
}
.has-effect-zoom .has-background-dim {
    pointer-events: none;
}
.has-effect-zoom > img,
.has-effect-zoom > a > img {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /*object-fit: none;
    object-position: center;*/
    transform: translate3d(0, 0, 0) scale3d(1.0, 1.0, 1.0);
    transition-property: transform, object-position;
    transition-duration: var(--wp--custom--transition--duration);
    transition-timing-function: linear;
    will-change: transform;
}
.has-effect-zoom.has-processing > img,
.has-effect-zoom.has-processing > a > img {
    transition-delay: 0ms;
}
.has-effect-zoom.has-processing:hover > img,
.has-effect-zoom.has-processing:hover > a > img,
.has-effect-zoom.has-processing:focus > img,
.has-effect-zoom.has-processing:focus > a > img {
    /*object-position: calc(var(--wp--custom--cursor-position-x) * 0.1%) calc(var(--wp--custom--cursor-position-y) * 0.1%);*/
    transform: 
        translate3d(
            calc(var(--wp--custom--cursor-position-x) / var(--wp--custom--effect--zoom--scale) * (var(--wp--custom--effect--zoom--scale) - 1) * 1px), 
            calc(var(--wp--custom--cursor-position-y) / var(--wp--custom--effect--zoom--scale) * (var(--wp--custom--effect--zoom--scale) - 1) * 1px), 
            0px
        ) 
        scale3d(
            var(--wp--custom--effect--zoom--scale), 
            var(--wp--custom--effect--zoom--scale), 
            var(--wp--custom--effect--zoom--scale)
        );
}

/* Parallax */
.has-effect-parallax > img,
.has-effect-parallax > a > img {
    visibility: hidden;
    object-fit: cover;
    /*object-position: calc(var(--wp--custom--effect--scroll-x, 50) * 1%) calc(var(--wp--custom--effect--scroll-y, 50) * 1%);*/
    transition-property: all;
    transition-delay: 0ms;
    transition-duration: 0ms;
    transition-timing-function: linear;
    will-change: object-position;
}
.has-effect-parallax.is-visible > img,
.has-effect-parallax.is-visible > a > img {
    visibility: visible;
}
.has-effect-parallax.has-processing > img,
.has-effect-parallax.has-processing > a > img {
    transition-duration: var(--wp--custom--transition--duration); 
}

/** Tilt */
.has-effect-tilt:not(figure),
figure.has-effect-tilt > img,
figure.has-effect-tilt > a > img {
    transform-style: preserve-3d;
    transform: perspective(var(--wp--style--global--content-size, 1000px)) rotateX(0deg) rotateY(0deg);
    will-change: transform;
    transition: transform 200ms ease-out;
}
.has-effect-tilt.has-processing:not(figure),
figure.has-effect-tilt.has-processing > img,
figure.has-effect-tilt.has-processing > a > img {
    transform: 
        perspective(var(--wp--style--global--content-size, 1000px)) 
        rotateX(calc(var(--wp--custom--cursor-position-y, 0) * var(--wp--custom--effect--tilt--depth-x, 0) * -0.01deg)) 
        rotateY(calc(var(--wp--custom--cursor-position-x, 0) * var(--wp--custom--effect--tilt--depth-y, 0) * 0.01deg)) 
        scale3d(
            var(--wp--custom--effect--tilt--scale, 1),
            var(--wp--custom--effect--tilt--scale, 1),
            var(--wp--custom--effect--tilt--scale, 1)
        );
}
/*---------------- End interactivity ----------------*/