/*
|--------------------------------------------------------------------------
| CyberDojo - Login Page
|--------------------------------------------------------------------------
|
| Login-specific styling only.
|
| Shared authentication styling lives in:
|
| /assets/css/auth/auth.css
|
*/


/*
|--------------------------------------------------------------------------
| Login Card
|--------------------------------------------------------------------------
*/

.login-card {
    max-width: 460px;
}


/*
|--------------------------------------------------------------------------
| Login Logo
|--------------------------------------------------------------------------
*/

.page-login .auth-logo {
    animation:
        login-logo-glow
        4s
        ease-in-out
        infinite;
}


@keyframes login-logo-glow {

    0%,
    100% {
        box-shadow:
            0 0 0 6px rgba(255, 215, 0, 0.02),
            0 0 26px rgba(255, 215, 0, 0.10);
    }

    50% {
        box-shadow:
            0 0 0 7px rgba(255, 215, 0, 0.035),
            0 0 42px rgba(255, 215, 0, 0.18);
    }

}


/*
|--------------------------------------------------------------------------
| Login Heading
|--------------------------------------------------------------------------
*/

.page-login .auth-heading {
    margin-bottom: 26px;
}


/*
|--------------------------------------------------------------------------
| Login Form
|--------------------------------------------------------------------------
*/

.page-login .auth-form {
    gap: 20px;
}


/*
|--------------------------------------------------------------------------
| Login Submit
|--------------------------------------------------------------------------
*/

.page-login .auth-submit {
    margin-top: 5px;
}


/*
|--------------------------------------------------------------------------
| Successful Ready State
|--------------------------------------------------------------------------
*/

.page-login
.auth-page.auth-page-ready
.login-card {
    animation:
        login-card-entry
        450ms
        ease
        both;
}


@keyframes login-card-entry {

    from {
        opacity: 0;

        transform:
            translateY(16px)
            scale(0.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/*
|--------------------------------------------------------------------------
| Desktop
|--------------------------------------------------------------------------
*/

@media (min-width: 769px) {

    .page-login .auth-container {
        padding-top: 48px;
        padding-bottom: 48px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {

    .login-card {
        max-width: 100%;
    }


    .page-login .auth-heading {
        margin-bottom: 22px;
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

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

    .page-login .auth-logo,
    .page-login
    .auth-page.auth-page-ready
    .login-card {
        animation: none !important;
    }

}