/**
 * Page-builder background utilities.
 *
 * Static CSS (always loaded), e.g.:
 *   blur-ball blur-ball--bc blur-ball--soft
 *   radial-rings radial-rings--bl radial-rings--strong
 *   radial-dots radial-dots--br radial-dots--soft
 *   glow-band glow-band--bc
 *
 * JS canvas backgrounds (boot loads effect modules on demand), e.g.:
 *   js-bg js-bg--dots js-bg--br bg-mask
 *   js-bg js-bg--hover-dots js-bg--bc bg-mask--lg
 *   js-bg js-bg--lattice js-bg--bc
 *   js-bg js-bg--sweep js-bg--br bg-mask--lg
 *
 * Shared masks (static ::before layers and js-bg canvases):
 *   bg-mask / bg-mask--lg
 *
 * Shared modifiers: --soft / --strong (subtle ↔ prominent for that effect),
 * --overflow, position: --tl/--tr/--bl/--br/--tc/--bc/--cl/--cr/--c
 */

/* -------------------------------------------------------------------------- */
/* Shared fade masks — static utilities (::before) + js-bg (.js-bg__canvas)    */
/* -------------------------------------------------------------------------- */

.bg-mask::before,
.bg-mask .js-bg__canvas {
    mask-image: linear-gradient(to top,
            var(--black) 0%,
            color-mix(in srgb, var(--black) 88%, transparent) 38%,
            color-mix(in srgb, var(--black) 35%, transparent) 72%,
            transparent 100%);
    -webkit-mask-image: linear-gradient(to top,
            var(--black) 0%,
            color-mix(in srgb, var(--black) 88%, transparent) 38%,
            color-mix(in srgb, var(--black) 35%, transparent) 72%,
            transparent 100%);
}

.bg-mask--lg::before,
.bg-mask--lg .js-bg__canvas {
    mask-image:
        linear-gradient(to top,
            var(--black) 0%,
            color-mix(in srgb, var(--black) 90%, transparent) 42%,
            transparent 100%),
        radial-gradient(120% 90% at 72% 108%,
            var(--black) 0%,
            color-mix(in srgb, var(--black) 70%, transparent) 42%,
            transparent 78%);
    -webkit-mask-image:
        linear-gradient(to top,
            var(--black) 0%,
            color-mix(in srgb, var(--black) 90%, transparent) 42%,
            transparent 100%),
        radial-gradient(120% 90% at 72% 108%,
            var(--black) 0%,
            color-mix(in srgb, var(--black) 70%, transparent) 42%,
            transparent 78%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

/* -------------------------------------------------------------------------- */
/* JS canvas hosts                                                            */
/* -------------------------------------------------------------------------- */

.js-bg {
    position: relative;
    isolation: isolate;
    overflow: clip;

    &>* {
        position: relative;
        z-index: 1;
    }

    &>.js-bg__canvas {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    /* Oversized canvas pinned to an origin corner/edge so paint can bleed
       past the host (same idea as radial-dots' ::after). Origin classes still
       map to that pin point inside the canvas bitmap. */
    &.js-bg--overflow {
        overflow: visible;
        --js-bg-bleed: min(1400px, 165vw);

        &>.js-bg__canvas {
            inset: auto;
            width: max(100%, var(--js-bg-bleed));
            height: max(100%, var(--js-bg-bleed));
            /* Default pin: bottom-right (matches common presets) */
            right: 0;
            bottom: 0;
        }

        &.js-bg--tl>.js-bg__canvas {
            top: 0;
            right: auto;
            bottom: auto;
            left: 0;
        }

        &.js-bg--tr>.js-bg__canvas {
            top: 0;
            right: 0;
            bottom: auto;
            left: auto;
        }

        &.js-bg--bl>.js-bg__canvas {
            top: auto;
            right: auto;
            bottom: 0;
            left: 0;
        }

        &.js-bg--br>.js-bg__canvas {
            top: auto;
            right: 0;
            bottom: 0;
            left: auto;
        }

        &.js-bg--tc>.js-bg__canvas {
            top: 0;
            right: auto;
            bottom: auto;
            left: 50%;
            transform: translateX(-50%);
        }

        &.js-bg--bc>.js-bg__canvas {
            top: auto;
            right: auto;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        &.js-bg--cl>.js-bg__canvas {
            top: 50%;
            right: auto;
            bottom: auto;
            left: 0;
            transform: translateY(-50%);
        }

        &.js-bg--cr>.js-bg__canvas {
            top: 50%;
            right: 0;
            bottom: auto;
            left: auto;
            transform: translateY(-50%);
        }

        &.js-bg--c>.js-bg__canvas {
            top: 50%;
            right: auto;
            bottom: auto;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

.blur-ball {
    position: relative;
    isolation: isolate;
    overflow: clip;
    --ball-size: min(880px, 115vw);
    --ball-blur: 88px;
    --ball-core: 16%;
    --ball-mid: 5%;

    &>* {
        position: relative;
        z-index: 1;
    }

    &::before {
        content: '';
        position: absolute;
        z-index: 0;
        /* Default: top-right — pin ball box to the corner, nudge center outward */
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        width: var(--ball-size);
        height: var(--ball-size);
        border-radius: 50%;
        background: radial-gradient(circle,
                color-mix(in srgb, var(--teal) var(--ball-core), transparent) 0%,
                color-mix(in srgb, var(--teal) var(--ball-mid), transparent) 44%,
                transparent 72%);
        filter: blur(var(--ball-blur));
        pointer-events: none;
        transform: translate(35%, -40%);
    }

    &.blur-ball--overflow {
        overflow: visible;
    }

    &.blur-ball--soft {
        --ball-size: min(560px, 92vw);
        --ball-core: 11%;
        --ball-mid: 3.5%;
        --ball-blur: 96px;
    }

    &.blur-ball--strong {
        --ball-size: min(1120px, 135vw);
        --ball-core: 22%;
        --ball-mid: 8%;
        --ball-blur: 72px;
    }

    &.blur-ball--tl {
        &::before {
            top: 0;
            right: auto;
            bottom: auto;
            left: 0;
            transform: translate(-35%, -40%);
        }
    }

    &.blur-ball--tr {
        &::before {
            top: 0;
            right: 0;
            bottom: auto;
            left: auto;
            transform: translate(35%, -40%);
        }
    }

    &.blur-ball--bl {
        &::before {
            top: auto;
            right: auto;
            bottom: 0;
            left: 0;
            transform: translate(-35%, 40%);
        }
    }

    &.blur-ball--br {
        &::before {
            top: auto;
            right: 0;
            bottom: 0;
            left: auto;
            transform: translate(35%, 40%);
        }
    }

    &.blur-ball--tc {
        &::before {
            top: 0;
            right: auto;
            bottom: auto;
            left: 50%;
            transform: translate(-50%, -45%);
        }
    }

    &.blur-ball--bc {
        &::before {
            top: auto;
            right: auto;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 45%);
        }
    }

    &.blur-ball--cl {
        &::before {
            top: 50%;
            right: auto;
            bottom: auto;
            left: 0;
            transform: translate(-45%, -50%);
        }
    }

    &.blur-ball--cr {
        &::before {
            top: 50%;
            right: 0;
            bottom: auto;
            left: auto;
            transform: translate(45%, -50%);
        }
    }

    &.blur-ball--c {
        &::before {
            top: 50%;
            right: auto;
            bottom: auto;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

.radial-rings {
    position: relative;
    isolation: isolate;
    overflow: clip;
    --rr-x: 100%;
    --rr-y: 0%;
    --rr-spacing: 35px;
    --rr-ring: 1.5px;
    --rr-alpha: 40%;

    &>* {
        position: relative;
        z-index: 1;
    }

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: repeating-radial-gradient(circle at var(--rr-x) var(--rr-y),
                color-mix(in srgb, var(--teal) var(--rr-alpha), transparent) 0 var(--rr-ring),
                transparent var(--rr-ring) var(--rr-spacing));
        mask-image: radial-gradient(circle at var(--rr-x) var(--rr-y),
                var(--black) 0%,
                color-mix(in srgb, var(--black) 85%, transparent) 44%,
                transparent 78%);
        -webkit-mask-image: radial-gradient(circle at var(--rr-x) var(--rr-y),
                var(--black) 0%,
                color-mix(in srgb, var(--black) 85%, transparent) 44%,
                transparent 78%);
    }

    &.radial-rings--overflow {
        overflow: visible;
    }

    &.radial-rings--soft {
        --rr-alpha: 28%;
        --rr-spacing: 48px;
    }

    &.radial-rings--strong {
        --rr-alpha: 52%;
        --rr-spacing: 28px;
    }

    &.radial-rings--tl {
        --rr-x: 0%;
        --rr-y: 0%;
    }

    &.radial-rings--tr {
        --rr-x: 100%;
        --rr-y: 0%;
    }

    &.radial-rings--bl {
        --rr-x: 0%;
        --rr-y: 100%;
    }

    &.radial-rings--br {
        --rr-x: 100%;
        --rr-y: 100%;
    }

    &.radial-rings--tc {
        --rr-x: 50%;
        --rr-y: 0%;
    }

    &.radial-rings--bc {
        --rr-x: 50%;
        --rr-y: 100%;
    }

    &.radial-rings--cl {
        --rr-x: 0%;
        --rr-y: 50%;
    }

    &.radial-rings--cr {
        --rr-x: 100%;
        --rr-y: 50%;
    }

    &.radial-rings--c {
        --rr-x: 50%;
        --rr-y: 50%;
    }
}

.radial-dots {
    position: relative;
    isolation: isolate;
    /* Clip by default so the large SVG layer can't inflate section/page height */
    overflow: clip;
    /* Corner SVG originates at bottom-right; pin that corner and rotate into the section */
    --rd-x: 100%;
    --rd-y: 0%;
    --rd-rot: -90deg;
    --rd-size: min(1400px, 165vw);
    --rd-alpha: 40%;
    --rd-image: url('../img/radial-dots-corner.svg');
    --rd-ox: 100%;
    --rd-tx: -100%;

    &>* {
        position: relative;
        z-index: 1;
    }

    &::after {
        content: '';
        position: absolute;
        z-index: 0;
        width: var(--rd-size);
        height: var(--rd-size);
        left: var(--rd-x);
        top: var(--rd-y);
        transform: translate(var(--rd-tx), -100%) rotate(var(--rd-rot));
        transform-origin: var(--rd-ox) 100%;
        background: var(--rd-image) no-repeat var(--rd-ox) 100% / 100% 100%;
        opacity: calc(var(--rd-alpha) / 40%);
        pointer-events: none;
        mask-image: radial-gradient(circle at var(--rd-ox) 100%,
                var(--black) 0%,
                color-mix(in srgb, var(--black) 85%, transparent) 44%,
                transparent 78%);
        -webkit-mask-image: radial-gradient(circle at var(--rd-ox) 100%,
                var(--black) 0%,
                color-mix(in srgb, var(--black) 85%, transparent) 44%,
                transparent 78%);
    }

    &.radial-dots--overflow {
        overflow: visible;
    }

    &.radial-dots--soft {
        --rd-alpha: 28%;
    }

    &.radial-dots--strong {
        --rd-alpha: 52%;
    }

    &.radial-dots--tl {
        --rd-x: 0%;
        --rd-y: 0%;
        --rd-rot: 180deg;
    }

    &.radial-dots--tr {
        --rd-x: 100%;
        --rd-y: 0%;
        --rd-rot: -90deg;
    }

    &.radial-dots--bl {
        --rd-x: 0%;
        --rd-y: 100%;
        --rd-rot: 90deg;
    }

    &.radial-dots--br {
        --rd-x: 100%;
        --rd-y: 100%;
        --rd-rot: 0deg;
    }

    /* Centered SVG — origin on the bottom edge midpoint */
    &.radial-dots--tc,
    &.radial-dots--bc,
    &.radial-dots--cl,
    &.radial-dots--cr,
    &.radial-dots--c {
        --rd-image: url('../img/radial-dots-center.svg');
        --rd-ox: 50%;
        --rd-tx: -50%;

        &::after {
            height: auto;
            aspect-ratio: 2 / 1;
            background-size: 100% 100%;
        }
    }

    &.radial-dots--tc {
        --rd-x: 50%;
        --rd-y: 0%;
        --rd-rot: 180deg;
    }

    &.radial-dots--bc {
        --rd-x: 50%;
        --rd-y: 100%;
        --rd-rot: 0deg;
    }

    &.radial-dots--tc,
    &.radial-dots--bc {
        &::after {
            width: 100%;
            max-width: 1280px;
            height: auto;
            aspect-ratio: 2 / 1;
            mask-image:
                radial-gradient(circle at var(--rd-ox) 100%,
                    var(--black) 0%,
                    color-mix(in srgb, var(--black) 85%, transparent) 44%,
                    transparent 70%),
                linear-gradient(to right,
                    transparent 0%,
                    var(--black) 12%,
                    var(--black) 88%,
                    transparent 100%);
            -webkit-mask-image:
                radial-gradient(circle at var(--rd-ox) 100%,
                    var(--black) 0%,
                    color-mix(in srgb, var(--black) 85%, transparent) 44%,
                    transparent 70%),
                linear-gradient(to right,
                    transparent 0%,
                    var(--black) 12%,
                    var(--black) 88%,
                    transparent 100%);
            mask-composite: intersect;
            -webkit-mask-composite: source-in;
        }
    }

    &.radial-dots--cl {
        --rd-x: 0%;
        --rd-y: 50%;
        --rd-rot: 90deg;
    }

    &.radial-dots--cr {
        --rd-x: 100%;
        --rd-y: 50%;
        --rd-rot: -90deg;
    }

    &.radial-dots--c {
        --rd-x: 50%;
        --rd-y: 50%;
        --rd-rot: 0deg;
    }
}

.glow-band {
    position: relative;
    isolation: isolate;
    --gb-x: 50%;
    --gb-y: 135%;
    --gb-w: 110%;
    --gb-h: 170%;
    --gb-core: 32%;
    --gb-mid: 6%;

    &>* {
        position: relative;
        z-index: 1;
    }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(var(--gb-w) var(--gb-h) at var(--gb-x) var(--gb-y),
                color-mix(in srgb, var(--teal) var(--gb-core), transparent),
                color-mix(in srgb, var(--teal) var(--gb-mid), transparent) 52%,
                transparent 75%);
    }

    &.glow-band--soft {
        --gb-core: 18%;
        --gb-mid: 4%;
    }

    &.glow-band--strong {
        --gb-core: 42%;
        --gb-mid: 10%;
    }

    &.glow-band--bc {
        --gb-x: 50%;
        --gb-y: 135%;
    }

    &.glow-band--tc {
        --gb-x: 50%;
        --gb-y: -35%;
    }

    &.glow-band--bl {
        --gb-x: 0%;
        --gb-y: 110%;
        --gb-w: 130%;
        --gb-h: 150%;
    }

    &.glow-band--br {
        --gb-x: 100%;
        --gb-y: 110%;
        --gb-w: 130%;
        --gb-h: 150%;
    }

    &.glow-band--cl {
        --gb-x: -20%;
        --gb-y: 50%;
        --gb-w: 80%;
        --gb-h: 140%;
    }

    &.glow-band--cr {
        --gb-x: 120%;
        --gb-y: 50%;
        --gb-w: 80%;
        --gb-h: 140%;
    }
}