/*
 * Shared login scene / artwork layout.
 *
 * Themes provide:
 *   --login-background
 *   --login-artwork
 *   --login-artwork-size
 *   --login-artwork-position
 *   --login-artwork-opacity
 */

body {
    background:
        var(
            --login-background,
            linear-gradient(145deg, #09131f, #102538 50%, #0b1825)
        ) !important;

    background-attachment: fixed !important;
}

/*
 * Background artwork lives in a separate layer.
 * It never receives mouse events and never covers the login card.
 */
#modifiedLogin.LoginScreen::before {
    content: "";

    position: fixed;
    z-index: 0;

    inset: 0;

    background-image:
        var(--login-artwork, none);

    background-repeat: no-repeat !important;

    background-position:
        var(--login-artwork-position, right bottom) !important;

    background-size:
        var(--login-artwork-size, auto 82vh) !important;

    opacity:
        var(--login-artwork-opacity, 0.35) !important;

    pointer-events: none !important;
}

/*
 * Soft vignette so artwork can become quite detailed
 * without fighting the login form.
 */
#modifiedLogin.LoginScreen::after {
    content: "";

    position: fixed;
    z-index: 1;

    inset: 0;

    background:
        radial-gradient(
            ellipse at 50% 18%,
            rgba(4, 12, 20, 0.04) 0%,
            rgba(4, 12, 20, 0.08) 38%,
            rgba(4, 12, 20, 0.30) 100%
        );

    pointer-events: none !important;
}

/*
 * Card lives in the upper portion of the screen.
 * The lower/right area remains free for theme artwork.
 */
#modifiedLogin .modernCenter {
    position: relative !important;
    z-index: 2;

    flex: 1 0 auto !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;

    padding:
        clamp(64px, 10vh, 112px)
        20px
        36px !important;
}

#modifiedLogin .Footer {
    position: relative !important;
    z-index: 2;
}

@media (max-width: 520px) {
    #modifiedLogin .modernCenter {
        padding: 24px 12px 24px !important;
    }

    /*
     * Artwork is deliberately quieter on phones.
     */
    #modifiedLogin.LoginScreen::before {
        background-size:
            var(--login-artwork-mobile-size, auto 62vh) !important;

        background-position:
            var(
                --login-artwork-mobile-position,
                72% bottom
            ) !important;

        opacity:
            var(--login-artwork-mobile-opacity, 0.20) !important;
    }
}