/*
 * ============================================================
 * VOXLY LOGIN EXPERIENCE
 * Web 0.18.18.15
 * ============================================================
 *
 * Optional artwork:
 *   /assets/images/voxly-login-bg.png
 *
 * The layered gradients remain as a fallback if the image
 * does not exist.
 */

#loginView {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        max(24px, env(safe-area-inset-top))
        max(24px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom))
        max(24px, env(safe-area-inset-left));

    background: #080d17;
}


/*
 * BACKGROUND ART
 *
 * Layer order:
 *   1. subtle blue glow
 *   2. dark directional shading
 *   3. optional user-supplied artwork
 */

#loginView::before {
    content: "";

    position: absolute;
    inset: -2px;

    z-index: -2;

    background-image:
        radial-gradient(
            circle at 18% 18%,
            rgba(42, 96, 170, 0.32) 0,
            rgba(28, 58, 104, 0.16) 25%,
            transparent 52%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(46, 72, 128, 0.22) 0,
            transparent 45%
        ),
        linear-gradient(
            125deg,
            rgba(4, 8, 16, 0.55) 0%,
            rgba(7, 13, 24, 0.72) 48%,
            rgba(3, 7, 14, 0.84) 100%
        ),
        url("/assets/images/voxly-login-bg.png");

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;

    background-position:
        center,
        center,
        center,
        center center;

    background-size:
        cover,
        cover,
        cover,
        cover;

    transform: scale(1.01);
}


/*
 * DARK OVERLAY
 *
 * Keeps login controls readable regardless of the image used.
 */

#loginView::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(2, 6, 12, 0.18) 0%,
            rgba(3, 8, 16, 0.30) 45%,
            rgba(2, 5, 11, 0.48) 100%
        );
}


/*
 * LOGIN CARD
 */

#loginView .login-card {
    position: relative;

    width: min(100%, 430px);

    padding: 34px 32px 30px;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 27, 42, 0.86),
            rgba(10, 17, 29, 0.79)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.48),
        0 8px 30px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    backdrop-filter:
        blur(18px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(125%);
}


/*
 * VOXLY BRAND
 */

#loginView .brand {
    margin-bottom: 5px;

    text-align: center;

    font-size: clamp(34px, 5vw, 46px);
    font-weight: 800;

    letter-spacing: -1.5px;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.40);
}


/*
 * TAGLINE
 */

#loginView .tagline {
    margin-bottom: 28px;

    text-align: center;

    font-size: 14px;
    font-weight: 500;

    letter-spacing: 0.12em;

    opacity: 0.74;
}


/*
 * FORM CONTROLS
 */

#loginView .field input {
    background:
        rgba(5, 10, 19, 0.58);

    border-color:
        rgba(255, 255, 255, 0.10);

    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        background 140ms ease;
}

#loginView .field input:focus {
    background:
        rgba(6, 12, 22, 0.78);

    border-color:
        rgba(91, 146, 224, 0.70);

    box-shadow:
        0 0 0 3px
        rgba(66, 121, 194, 0.14);
}


/*
 * SMALL SCREENS
 */

@media (max-width: 600px) {

    #loginView {
        align-items: center;
        padding: 18px;
    }

    #loginView .login-card {
        width: 100%;

        padding:
            28px
            22px
            24px;

        border-radius: 17px;
    }

    #loginView .brand {
        font-size: 36px;
    }

    #loginView .tagline {
        margin-bottom: 24px;

        font-size: 12px;

        letter-spacing: 0.09em;
    }
}


/*
 * SHORT WINDOWS / SMALL LAPTOPS
 */

@media (max-height: 650px) {

    #loginView {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    #loginView .login-card {
        padding-top: 24px;
        padding-bottom: 22px;
    }

    #loginView .tagline {
        margin-bottom: 18px;
    }
}


/*
 * REDUCED MOTION
 */

@media (prefers-reduced-motion: reduce) {

    #loginView .field input {
        transition: none;
    }
}