/**
 * rz-zoom-bg
 *
 * Slow zoom on an element's CSS background image. Put the class on a Section
 * (or anything with a background image); options come from data-rz-zoom*
 * attributes (Breakdance: Settings -> Attributes).
 */

.rz-zoom-bg,
.breakdance .rz-zoom-bg {
    position: relative;
    overflow: hidden;
}

/**
 * The image gets its own layer so it can be transformed. A CSS background
 * cannot be scaled smoothly - animating background-size re-rasterises the
 * image every frame, which visibly stutters at hero size, while a transform is
 * composited on the GPU.
 *
 * `inherit` picks up whatever Breakdance renders, so all of its background
 * controls (size, position, responsive, unset-at-breakpoint) keep working.
 *
 * Being the first box in the element, this layer paints above the element's own
 * background but below Breakdance's background overlay and below the content -
 * so the image scales while the gradient tint and the text stay put.
 */
.rz-zoom-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: inherit;
    transform: scale(var(--rz-zoom-from, 1.12));
    transform-origin: center center;
    pointer-events: none;
}

/* Applied a frame after the start scale has been painted, so the transition
   actually runs instead of the element appearing already settled. */
.rz-zoom-bg--ready::before {
    transition: transform var(--rz-zoom-duration, 1.8s) var(--rz-zoom-ease, cubic-bezier(.16, 1, .3, 1));
}

.rz-zoom-bg--zoomed::before {
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .rz-zoom-bg::before {
        transform: scale(1);
        transition: none;
    }
}