/**
 * Webtron Motion Backgrounds — base styles.
 *
 * The JS appends a <canvas class="webtron-motion-canvas"> into any [data-webtron-motion] host.
 * The host must establish a positioning context; the canvas fills it and never intercepts clicks.
 */

/* :where() = ZERO specificity, so these are only DEFAULTS — any block that sets its own
   positioning on the host (e.g. the Video Banner's absolutely-positioned __motion layer)
   always wins. Without this, the attribute selector tied with the block's class rule and
   load order decided the winner, which split the banner into two columns. */
:where([data-webtron-motion]) {
    position: relative;
}

.webtron-motion-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    /* Sit behind the host's own content but above its background fill. */
    z-index: 0;
}

/* Anything the host renders as real content should sit above the canvas (default only). */
:where([data-webtron-motion]) > :not(.webtron-motion-canvas) {
    position: relative;
    z-index: 1;
}

/* Reduced motion: the JS already renders a single static frame and never animates;
   nothing extra needed here, but keep the canvas from hinting at motion. */
@media (prefers-reduced-motion: reduce) {
    .webtron-motion-canvas {
        /* static frame only */
    }
}