/*
 * Desktop-only background alignment and blending.
 * Loaded after the staging background boost so mobile/tablet behavior remains unchanged.
 */

@media (min-width: 961px) {
    body::before {
        background-position:
            center top,
            center top,
            50% 58px;
        background-size:
            cover,
            cover,
            min(82vw, 940px) auto;
        opacity: 0.46;
        filter: saturate(1.02) brightness(0.96) contrast(0.96);
        -webkit-mask-image:
            linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%),
            radial-gradient(
                ellipse at 50% 30%,
                #000 0%,
                rgba(0, 0, 0, 0.92) 30%,
                rgba(0, 0, 0, 0.58) 52%,
                rgba(0, 0, 0, 0.20) 68%,
                transparent 82%
            );
        mask-image:
            linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%),
            radial-gradient(
                ellipse at 50% 30%,
                #000 0%,
                rgba(0, 0, 0, 0.92) 30%,
                rgba(0, 0, 0, 0.58) 52%,
                rgba(0, 0, 0, 0.20) 68%,
                transparent 82%
            );
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }

    body::after {
        background:
            linear-gradient(180deg, rgba(6, 12, 19, 0.10), rgba(6, 12, 19, 0.58) 46%, rgba(6, 12, 19, 0.92)),
            radial-gradient(ellipse at 50% 8%, rgba(6, 12, 19, 0.04) 0%, rgba(6, 12, 19, 0.28) 56%, rgba(6, 12, 19, 0.82) 100%);
    }
}