/* Vimeo background video extension for core/cover */

.wp-block-cover.has-lg-vimeo-bg {
    overflow: hidden;
    padding: 0;
}

/*
 * No explicit z-index — WordPress's cover z-index rules only apply when
 * .wp-block-cover__background and __inner-container are non-adjacent. Our
 * wrapper as first child keeps them adjacent, so all elements stack in DOM order
 * with the wrapper naturally at the bottom, overlay and content on top.
 */
.lg-cover-vimeo-bg__wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

/*
 * aspect-ratio + min-width/min-height implements object-fit: cover for iframes,
 * container-relative so the crop matches the cover image at any viewport size.
 * Focal point mirrors the cover block's own focalPoint via CSS custom properties.
 */
.lg-cover-vimeo-bg__wrapper iframe {
    position: absolute;
    left: var(--vimeo-focal-x, 50%);
    top: var(--vimeo-focal-y, 50%);
    transform: translate(
        calc(-1 * var(--vimeo-focal-x, 50%)),
        calc(-1 * var(--vimeo-focal-y, 50%))
    );
    aspect-ratio: 16 / 9;
    min-width: 100%;
    min-height: 100%;
    border: 0;
}

/* Poster sits above the iframe (later DOM sibling). Fades out once the video
   plays; stays visible as a fallback if the video never loads.
   transition is on the loaded rule only — CSS uses the after-change state's
   transition property, so the fade fires on class add but not on page load. */
.wp-block-cover.has-lg-vimeo-bg.lg-vimeo-bg-loaded .wp-block-cover__image-background {
    opacity: 0;
    transition: opacity 1s ease;
}