@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: fade-in 700ms ease both; }
.animate-fade-in-up { animation: fade-in-up 700ms ease both; }

@keyframes letter-cascade {
    from { opacity: 0; transform: translateY(0.55em); }
    to { opacity: 1; transform: translateY(0); }
}

.welcome-letter {
    display: inline-block;
    opacity: 0;
    animation: letter-cascade 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake { animation: shake 0.5s ease-in-out; }

.error-outline {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.brand-bg { background-color: #271C91; color: #fff; }
.brand-bg:hover { background-color: #3F32B8; }

.login-brand {
    background: #fff;
}

.login-cover {
    transition: opacity 1100ms cubic-bezier(0.4, 0, 0.2, 1);
}

.login-cover.is-frozen {
    position: fixed;
    right: auto;
    bottom: auto;
    max-width: none;
}

.login-shell.is-exiting .login-cover,
html.login-from-sidebar .login-cover {
    opacity: 0;
}

.login-shell {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.login-panel {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: #fff;
}

.login-content { transition: opacity 240ms ease; }

.login-brand-lockup {
    --brand-zoom: 2.5;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: calc(0.55rem * var(--brand-zoom));
    width: max-content;
    max-width: none;
    transform-origin: top left;
}
.login-logo {
    width: calc(2.25rem * var(--brand-zoom));
    height: calc(2.25rem * var(--brand-zoom));
    flex: 0 0 auto;
    object-fit: contain;
}
.login-brand-name {
    font-family: Outfit, "Noto Sans", sans-serif;
    color: #271C91;
    font-size: calc(0.98rem * var(--brand-zoom));
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
}

.login-brand-lockup.is-docking {
    position: fixed;
    z-index: 40;
    margin: 0;
    width: max-content;
    max-width: none;
    pointer-events: none;
    transition:
        left 600ms cubic-bezier(0.4, 0, 0.2, 1),
        top 600ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
    .login-panel {
        flex: 0 0 50%;
        width: 50%;
        transition:
            flex-basis 600ms cubic-bezier(0.4, 0, 0.2, 1),
            width 600ms cubic-bezier(0.4, 0, 0.2, 1),
            border-color 600ms ease;
        border-right: 1px solid transparent;
    }

    .login-brand {
        flex: 1 1 auto;
        min-width: 0;
        transition: background 600ms ease;
    }

    .login-shell.is-exiting .login-panel {
        flex-basis: 16rem;
        width: 16rem;
        border-right-color: #e5e5e5;
    }

    .login-shell.is-exiting .login-content { opacity: 0; }

    html.login-from-sidebar .login-content {
        opacity: 0;
        transition: none;
    }

    html.login-from-sidebar .login-cover {
        opacity: 0;
        transition: none;
    }

    html.login-from-sidebar body { background: #f5f5f5; }

    .login-shell.is-entering:not(.is-exiting) .login-content {
        transition-delay: 260ms;
    }

    html.login-entered .welcome-letter,
    html.login-entered .animate-fade-in,
    html.login-entered .animate-fade-in-up {
        opacity: 1;
        animation: none;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .welcome-letter {
        opacity: 1;
        animation: none;
        transform: none;
    }

    .login-panel,
    .login-content,
    .login-brand,
    .login-cover,
    .login-brand-lockup.is-docking {
        transition: none;
    }
}