.hc-living-image {
    --hc-living-surface-color: #E89A86;
    --hc-living-surface-offset-x: 18px;
    --hc-living-surface-offset-y: 18px;
    --hc-living-surface-scale: 1;
    --hc-living-surface-drift: 6;
    --hc-living-surface-opacity: 0.45;
    --hc-living-surface-hover-color: #6A8F8A;
    --hc-living-surface-hover-opacity: 0.35;
    --hc-living-surface-hover-duration: 450ms;
    --hc-living-surface-hover-ease: cubic-bezier(.2,.8,.2,1);
    --hc-living-surface-blur: 0px;
    --hc-living-surface-radius: 0px;
    --hc-living-surface-x: 0px;
    --hc-living-surface-y: 0px;
    --hc-living-image-width: 0px;
    --hc-living-image-height: 0px;
    display: inline-block;
    isolation: isolate;
    line-height: 0;
    max-width: 100%;
    overflow: visible;
    position: relative;
    vertical-align: middle;
    z-index: 0;
}

.hc-living-image__surface {
    background: var(--hc-living-surface-color);
    border-radius: var(--hc-living-surface-radius);
    filter: blur(var(--hc-living-surface-blur));
    height: var(--hc-living-image-height);
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translate(
        calc(var(--hc-living-surface-offset-x) + var(--hc-living-surface-x)),
        calc(var(--hc-living-surface-offset-y) + var(--hc-living-surface-y))
    ) scale(var(--hc-living-surface-scale));
    transform-origin: center;
    transition:
        background-color var(--hc-living-surface-hover-duration) var(--hc-living-surface-hover-ease),
        opacity var(--hc-living-surface-hover-duration) var(--hc-living-surface-hover-ease);
    width: var(--hc-living-image-width);
    will-change: transform;
    z-index: 0;
}

.hc-living-image.is-living-ready > .hc-living-image__surface,
.hanly-living-ready .hc-living-image.is-living-ready > .hc-living-image__surface {
    opacity: var(--hc-living-surface-opacity) !important;
}

@media (hover: hover) and (pointer: fine) {
    .hc-living-image.is-living-ready:hover > .hc-living-image__surface,
    .hc-living-image.is-living-ready:focus-within > .hc-living-image__surface {
        background: var(--hc-living-surface-hover-color);
        opacity: var(--hc-living-surface-hover-opacity) !important;
    }
}

.hc-living-image > img,
.hc-living-image > a,
.hc-living-image > picture {
    display: block;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.hc-living-image > a,
.hc-living-image > picture {
    line-height: 0;
}

.hc-living-image img {
    display: block;
    height: auto;
    max-width: 100%;
}

.elementor-editor-active .hc-living-image,
.elementor-editor-preview .hc-living-image {
    pointer-events: none;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .hc-living-image {
        --hc-living-surface-x: 0px !important;
        --hc-living-surface-y: 0px !important;
    }

    .hc-living-image__surface {
        transition: none;
        will-change: auto;
    }
}
