.login-motion-page {
    --motion-duration: 1550ms;
    position: relative;
    background:
        radial-gradient(circle at 50% 12%, rgba(200, 169, 106, 0.10), transparent 30%),
        var(--color-background);
}

.login-motion-brand {
    position: fixed;
    top: 115px;
    left: 50%;
    z-index: 4;
    transform: translate(-50%, -50%) scale(1.6);
    pointer-events: none;
}

.login-motion-green-logo {
    display: block;
    width: 280px;
    max-width: 80vw;
    height: auto;
    object-fit: contain;
}

.login-motion-shell {
    position: relative;
    z-index: 2;
    margin-top: 86px;
}

.login-motion-back {
    display: block;
    margin-top: 18px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 650;
    text-align: center;
    text-decoration: none;
}

.login-motion-back:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.login-motion-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 240px;
    z-index: 5;
    background: var(--color-primary);
    box-shadow: 8px 0 28px rgba(11, 29, 51, 0.08);
    transform: translateX(-102%);
    pointer-events: none;
}

.login-motion-target-logo {
    position: fixed;
    top: 28px;
    left: 32px;
    display: block;
    width: auto;
    height: 80px;
    z-index: 7;
    object-fit: contain;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.login-motion-flight-o {
    position: fixed;
    z-index: 8;
    display: grid;
    box-sizing: border-box;
    place-items: center;
    border: calc(var(--motion-mark-size) * 0.165) solid var(--color-primary);
    border-radius: 50%;
    color: var(--color-accent);
    transform-origin: center;
    pointer-events: none;
    animation: login-motion-o-flight var(--motion-duration)
        cubic-bezier(0.64, 0, 0.2, 1) forwards;
}

.login-motion-flight-o::before {
    content: "✦";
    font-size: calc(var(--motion-mark-size) * 0.46);
    line-height: 1;
    transform: translateY(-1px);
}

.login-motion-flight-o::after {
    content: "";
    position: absolute;
    top: calc(var(--motion-mark-size) * -0.22);
    right: calc(var(--motion-mark-size) * 0.07);
    width: calc(var(--motion-mark-size) * 0.18);
    height: calc(var(--motion-mark-size) * 0.47);
    border-radius: 2px;
    background: var(--color-background);
    transform: rotate(27deg);
}

.login-motion-leaving .login-motion-brand {
    animation: login-motion-wordmark-out 440ms ease-out forwards;
}

.login-motion-leaving .login-motion-shell {
    animation: login-motion-form-out 620ms ease-in forwards;
}

.login-motion-leaving .login-motion-sidebar {
    animation: login-motion-sidebar-in var(--motion-duration)
        cubic-bezier(0.64, 0, 0.2, 1) forwards;
}

.login-motion-leaving .login-motion-target-logo {
    animation: login-motion-target-in var(--motion-duration) linear forwards;
}

@keyframes login-motion-wordmark-out {
    0% { opacity: 1; filter: blur(0); }
    100% { opacity: 0; filter: blur(4px); }
}

@keyframes login-motion-form-out {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(18px) scale(0.985); }
}

@keyframes login-motion-sidebar-in {
    0%, 48% { transform: translateX(-102%); }
    82%, 100% { transform: translateX(0); }
}

@keyframes login-motion-o-flight {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
    30% {
        transform: rotate(155deg) scale(1.12);
        opacity: 1;
    }
    64% {
        left: var(--motion-end-left);
        top: var(--motion-end-top);
        transform: rotate(350deg) scale(var(--motion-end-scale));
        opacity: 1;
    }
    64.1%, 100% {
        left: var(--motion-end-left);
        top: var(--motion-end-top);
        transform: rotate(360deg) scale(var(--motion-end-scale));
        opacity: 0;
    }
}

@keyframes login-motion-target-in {
    0%, 64% {
        visibility: hidden;
        opacity: 0;
    }
    64.1%, 100% {
        visibility: visible;
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .login-motion-sidebar,
    .login-motion-target-logo {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-motion-flight-o,
    .login-motion-leaving .login-motion-brand,
    .login-motion-leaving .login-motion-shell,
    .login-motion-leaving .login-motion-sidebar,
    .login-motion-leaving .login-motion-target-logo {
        animation-duration: 1ms;
    }
}