/* Scroll zoom / Scroll drift / Mouse follow: the frame is driven by
 * web/js/website/scroll-motion.js through --wb-sm-scale, --wb-sm-y and
 * --wb-sm-mx/--wb-sm-my. Without JS (or in the builder preview, reduced
 * motion) it rests at the static values below. Drift needs a taller frame so
 * the slide never shows an empty edge. */
.website-section-image-anim-scroll_zoom .website-section-image-frame,
.website-section-image-anim-scroll_drift .website-section-image-frame {
    transform: translate3d(0, var(--wb-sm-y, 0), 0) scale(var(--wb-sm-scale, 1.05));
    will-change: transform;
}
.website-section-image-anim-scroll_drift .website-section-image-frame {
    --wb-sm-scale: 1.15;
}
.website-section-image-anim-mouse_follow .website-section-image-frame {
    transform: translate3d(var(--wb-sm-mx, 0), var(--wb-sm-my, 0), 0) scale(1.08);
    will-change: transform;
}

/* Image Divider: same three motions on its inner frame (ImageDividerWidget).
 * Doubled class so these beat the frame's own scale(1.05) / will-change rule
 * in website-theme.css whichever stylesheet loads last. */
.image-divider.image-divider--scroll-zoom .image-divider-frame,
.image-divider.image-divider--scroll-drift .image-divider-frame {
    transform: translate3d(0, var(--wb-sm-y, 0), 0) scale(var(--wb-sm-scale, 1.05));
    will-change: transform;
}
.image-divider.image-divider--scroll-drift .image-divider-frame {
    --wb-sm-scale: 1.15;
}
.image-divider.image-divider--mouse-follow .image-divider-frame {
    transform: translate3d(var(--wb-sm-mx, 0), var(--wb-sm-my, 0), 0) scale(1.08);
    will-change: transform;
}
/* Shapes inside a divider band: above the photo + scrim (z 0 / 1), below the
 * headline and button (.image-divider-content z 2) unless set in front. */
.image-divider .website-section-shapes {
    z-index: 1;
}
.image-divider .website-section-shapes--above {
    z-index: 3;
}

/* Floating shapes: decorative layer between the background and the content.
 * The layer covers the section; each .website-shape is positioned by its
 * centre (left/top/width inline), its inner span carries the motion. */
.website-section-shapes {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.website-section-shapes--above {
    z-index: 3;
}
.website-shape {
    position: absolute;
    display: block;
    transform: translate(-50%, -50%);
}
.website-shape__inner {
    display: block;
    transform: translate3d(var(--wb-sm-mx, 0), calc(var(--wb-sm-my, 0px) + var(--wb-sm-y, 0px)), 0) scale(var(--wb-sm-scale, 1));
    will-change: transform;
}
.website-shape__inner svg,
.website-shape__inner img {
    display: block;
    width: 100%;
    height: auto;
}
/* Float uses the individual `translate` property so it composes with the
 * transform above without a wrapper. */
.website-shape__inner--float {
    animation: wb-shape-float var(--wb-float-dur, 6s) ease-in-out infinite alternate;
}
@keyframes wb-shape-float {
    from { translate: 0 calc(var(--wb-float-amp, 10px) * -1); }
    to   { translate: 0 var(--wb-float-amp, 10px); }
}
@media (max-width: 767.98px) {
    /* Keep big shapes from swamping a phone screen. */
    .website-shape {
        max-width: 45%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .image-divider.image-divider--scroll-zoom .image-divider-frame,
    .image-divider.image-divider--scroll-drift .image-divider-frame {
        transform: scale(1.05);
        will-change: auto;
    }
    .image-divider.image-divider--mouse-follow .image-divider-frame {
        transform: scale(1.08);
        will-change: auto;
    }
    .website-section-image-anim-scroll_zoom .website-section-image-frame,
    .website-section-image-anim-scroll_drift .website-section-image-frame {
        transform: scale(1.05);
        will-change: auto;
    }
    .website-section-image-anim-mouse_follow .website-section-image-frame {
        transform: scale(1.08);
        will-change: auto;
    }
    .website-shape__inner {
        transform: none;
        will-change: auto;
    }
    .website-shape__inner--float {
        animation: none;
    }
}