/**
 * rz-reveal-bg
 *
 * Blind reveal for a CSS background image. Put the class on any element that
 * has a background image - a Breakdance Section, Div, Column, anything - and
 * the script builds the blinds inside it. Options come from data-rz-* attributes
 * (Breakdance: Settings -> Attributes).
 *
 * The colour can also be set straight from the element's custom CSS with
 * --rz-reveal-color, which avoids the one-frame flash the data attribute has.
 */

.rz-reveal-bg,
.breakdance .rz-reveal-bg {
    position: relative;
}

/* Covers the background until the script has built the blinds, so the image is
   never briefly visible before the reveal starts. */
.rz-reveal-bg:not(.rz-reveal-bg--ready)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--rz-reveal-color, #ffffff);
}

.rz-reveal-bg__blinds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    overflow: hidden;
    pointer-events: none;
}

.rz-reveal-bg[data-rz-direction="vertical"] .rz-reveal-bg__blinds {
    flex-direction: column;
}

.rz-reveal-bg__blind {
    position: relative;
}

/* The cover is pinned to the edge OPPOSITE the one the reveal starts from, so
   shrinking it to zero retracts it away from that edge. The script points the
   stagger order at the same edge. */
.rz-reveal-bg__blind-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--rz-reveal-color, #ffffff);
}

.rz-reveal-bg[data-rz-from="left"] .rz-reveal-bg__blind-bg {
    left: auto;
    right: 0;
}

.rz-reveal-bg[data-rz-from="right"] .rz-reveal-bg__blind-bg {
    right: auto;
    left: 0;
}

.rz-reveal-bg[data-rz-from="top"] .rz-reveal-bg__blind-bg {
    top: auto;
    bottom: 0;
}

.rz-reveal-bg[data-rz-from="bottom"] .rz-reveal-bg__blind-bg {
    bottom: auto;
    top: 0;
}

/* Revealed state. Duration, easing and per-blind delay are set inline by the
   script, so the stagger reads from the chosen edge. */
.rz-reveal-bg--revealed:not([data-rz-direction="vertical"]) .rz-reveal-bg__blind-bg {
    width: 0;
}

.rz-reveal-bg--revealed[data-rz-direction="vertical"] .rz-reveal-bg__blind-bg {
    height: 0;
}

@media (prefers-reduced-motion: reduce) {
    .rz-reveal-bg__blind-bg {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}