/* ==========================================================================
   PAGEBUILDER: image
   shared section styles (.pb-section, .pb-content, .pb-headline, .pb-columns) are in style.css.
   ========================================================================== */

.pb-image {
    position: relative;
    height: 650px;
}

.pb-image-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pb-image-has-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / .3);
}


/* --------------------------------------------------------------------------
   progressive enhancement: parallax (like the live site: the image moves with 80% of the scroll speed).
   not on touch devices (like the live site) and not with reduced motion. without support the image is static.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
    @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
        .pb-image {
            /* the image moves 20% of the scroll distance, while the section passes the viewport. */
            --pb-image-parallax: calc(.2 * (100vh + 650px));

            view-timeline-name: --pb-image;
        }

        /* starts above the section (bottom aligned), ends top aligned. */
        .pb-image-image {
            top: calc(-1 * var(--pb-image-parallax));
            height: calc(100% + var(--pb-image-parallax));
            animation: pb-image-parallax linear both;
            animation-timeline: --pb-image;
        }
    }
}

@keyframes pb-image-parallax {
    to {
        transform: translateY(var(--pb-image-parallax));
    }
}