/*
 * Georing Mail theme
 */

:root {
    --login-accent: #1785ad;
    --login-accent-hover: #106f94;
    --login-focus-ring: rgba(23, 137, 182, 0.16);

    --login-background:
        radial-gradient(
            circle at 16% 22%,
            rgba(58, 162, 207, 0.20) 0,
            rgba(58, 162, 207, 0) 31%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(32, 104, 151, 0.16) 0,
            rgba(32, 104, 151, 0) 38%
        ),
        linear-gradient(
            145deg,
            #08131f 0%,
            #10283b 48%,
            #091724 100%
        );

    /*
     * Asset slot.
     *
     * Until bg-earth.png exists, the browser simply keeps
     * the gradient background above.
     */
    --login-artwork:
        url("/custom/login/georing/assets/bg-earth.webp");

    --login-artwork-size: auto 88vh;
    --login-artwork-position: right -7vw bottom -12vh;
    --login-artwork-opacity: 0.42;

    --login-artwork-mobile-size: auto 58vh;
    --login-artwork-mobile-position: 70% bottom -4vh;
    --login-artwork-mobile-opacity: 0.18;
}

/* Georing wordmark */

#modifiedLogin .logo::before {
    content: "GEORING";

    color: #157fa7;

    font-size: 30px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.14em;
}

#modifiedLogin .logo::after {
    content: "MAIL";

    margin-top: 7px;

    color: #566573;

    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.42em;
}

@media (max-width: 520px) {
    #modifiedLogin .logo::before {
        font-size: 26px;
    }
}

/* =========================================================
 * Georing Earth background - artwork v1
 * ========================================================= */

/*
 * This asset is a complete scene rather than a transparent
 * isolated planet, therefore render it as a full-page cover.
 */

:root {
    --login-artwork-size: cover;
    --login-artwork-position: center center;
    --login-artwork-opacity: 0.78;
}

/*
 * Keep the login region calm while preserving the Earth
 * and network details toward the right/lower side.
 */

#modifiedLogin.LoginScreen::after {
    background:
        radial-gradient(
            ellipse at 50% 17%,
            rgba(4, 12, 20, 0.02) 0%,
            rgba(4, 12, 20, 0.06) 30%,
            rgba(4, 12, 20, 0.20) 68%,
            rgba(4, 12, 20, 0.32) 100%
        ) !important;
}

/* =========================================================
 * Georing Earth composition - v2
 * ========================================================= */

/*
 * Preserve the complete height of the artwork and anchor it
 * to the right. The underlying Georing gradient fills the
 * unused space on wide displays.
 */

:root {
    --login-artwork-size: auto 100vh;
    --login-artwork-position: right center;
    --login-artwork-opacity: 0.82;
}

/*
 * Move the card slightly upward and leave the Earth its own
 * visual territory on the right.
 */

#modifiedLogin .modernCenter {
    padding-top: clamp(54px, 8vh, 88px) !important;
}

/*
 * Very subtle darkening immediately around the login area.
 */

#modifiedLogin.LoginScreen::after {
    background:
        radial-gradient(
            ellipse at 50% 18%,
            rgba(3, 10, 17, 0.02) 0%,
            rgba(3, 10, 17, 0.04) 24%,
            rgba(3, 10, 17, 0.12) 52%,
            rgba(3, 10, 17, 0.24) 100%
        ) !important;
}

/* =========================================================
 * Georing Earth composition - v3
 * Soft artwork blending
 * ========================================================= */

:root {
    /*
     * Slightly larger than viewport height:
     * fills more horizontal space without returning to
     * the oversized "cover" composition.
     */
    --login-artwork-size: auto 108vh;
    --login-artwork-position: right center;
    --login-artwork-opacity: 0.84;
}

/*
 * At 108vh the 3:2 artwork is 162vh wide. Only when a viewport exceeds that
 * ratio can its left edge become visible, so constrain the layer to the
 * rendered artwork and fade that edge rather than masking by viewport width.
 */
@media (min-width: 521px) and (min-aspect-ratio: 81 / 50) {
    #modifiedLogin.LoginScreen::before {
        inset: 0 0 0 auto;
        width: 162vh;

        -webkit-mask-image:
            linear-gradient(to right, transparent 0%, black 10%) !important;
        mask-image:
            linear-gradient(to right, transparent 0%, black 10%) !important;
    }
}

/* =========================================================
 * Georing finishing touches
 * ========================================================= */

#modifiedLogin #ZLoginNotice {
    color: rgba(255, 255, 255, 0.34) !important;
}