.random-video-background-block {
    pointer-events: none;
}

.random-video-background-block__stage {
    overflow: hidden;
    transition: opacity 0.8s ease;
    /* Shows around and behind the clips whenever they are smaller than the stage.
       Overridden per block by the Background colour setting. */
    background: var(--random-video-background-color, #f2eee6);
}

/* Legacy: no inner blocks, so the video is a background for the whole page. */
.random-video-background-block:not(.random-video-background-block--scoped) {
    position: fixed;
    inset: 0;
    /* Behind the page content: sections are position:relative with z-index:auto. */
    z-index: -1;
    width: 100vw;
    height: 100vh;
    height: 100svh;
}

.random-video-background-block:not(.random-video-background-block--scoped) .random-video-background-block__stage {
    position: absolute;
    inset: 0;
}

html:has(.random-video-background-block:not(.random-video-background-block--scoped)),
body:has(.random-video-background-block:not(.random-video-background-block--scoped)) {
    background: transparent;
}

/* Scoped: the stage sticks to the viewport while the block is scrolled through and
   scrolls away with it, so the block's own height is what decides where the video
   plays. The content is pulled back up over the stage by the same height, so the
   stage costs no extra space in the flow. */
.random-video-background-block--scoped {
    position: relative;
}

.random-video-background-block--scoped .random-video-background-block__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    z-index: 0;
}

.random-video-background-block--scoped .random-video-background-block__content {
    position: relative;
    z-index: 1;
    margin-top: -100vh;
    margin-top: -100svh;
    /* The wrapper opts everything out of hit testing; the content has to opt back in. */
    pointer-events: auto;
}

.random-video-background-block__video {
    position: absolute;
    width: var(--random-video-background-desktop-size, 100%);
    height: var(--random-video-background-desktop-size, 100%);
    /* Whatever the size leaves free is the room the clip can move in. frontend.js sets
       the two offsets per clip as a 0-1 fraction of that room, so one pair of values
       works on both breakpoints even though the sizes differ. 0.5 keeps it centred. */
    left: calc((100% - var(--random-video-background-desktop-size, 100%)) * var(--random-video-background-offset-x, 0.5));
    top: calc((100% - var(--random-video-background-desktop-size, 100%)) * var(--random-video-background-offset-y, 0.5));
    object-fit: var(--random-video-background-desktop-fit, cover);
    /* "contain" letterboxes every clip dead centre inside its box, so frontend.js
       scatters that too. Left at 50% 50% for "cover", where moving the crop would
       just cut the subject out of frame. */
    object-position: var(--random-video-background-desktop-position, 50% 50%);
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Set by frontend.js as the end of the block approaches, so the video is gone by
   the time whatever follows it scrolls into view. */
.random-video-background-block__stage.is-hidden {
    opacity: 0;
}

.random-video-background-block__end {
    height: 1px;
}

.random-video-background-block__video.is-active {
    opacity: 1;
}

@media (max-width: 767px) {
    .random-video-background-block__video {
        width: var(--random-video-background-mobile-size, 100%);
        height: var(--random-video-background-mobile-size, 100%);
        left: calc((100% - var(--random-video-background-mobile-size, 100%)) * var(--random-video-background-offset-x, 0.5));
        top: calc((100% - var(--random-video-background-mobile-size, 100%)) * var(--random-video-background-offset-y, 0.5));
        object-fit: var(--random-video-background-mobile-fit, cover);
        object-position: var(--random-video-background-mobile-position, 50% 50%);
    }
}