/* Full, text-free visual composition. Kept separate to override the original
   login art without changing the form or security behavior. */
.auth-visual {
    display: block;
}

.auth-visual .orbit-a {
    width: min(68%, 590px);
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    animation-name: loginOrbitA;
}

.auth-visual .orbit-b {
    width: min(44%, 380px);
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    animation-name: loginOrbitB;
}

.auth-visual .shield {
    top: 50%;
    left: 50%;
}

@keyframes loginOrbitA {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes loginOrbitB {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@media (max-width: 850px) {
    .auth-visual {
        height: 300px;
        min-height: 300px;
        overflow: hidden;
        padding: 0;
    }

    .auth-visual .orbit-a {
        width: 220px;
        height: 220px;
        top: 50%;
        left: 50%;
        margin: 0;
    }

    .auth-visual .orbit-b {
        width: 150px;
        height: 150px;
        top: 50%;
        left: 50%;
        margin: 0;
    }

    .auth-visual .shield {
        top: 50%;
        left: 50%;
    }
}

@media (max-width: 390px) {
    .auth-visual {
        height: 270px;
        min-height: 270px;
    }

    .auth-visual .orbit-a {
        width: 205px;
        height: 205px;
    }

    .auth-visual .orbit-b {
        width: 138px;
        height: 138px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-visual .orbit-a,
    .auth-visual .orbit-b {
        animation: none;
        transform: translate(-50%, -50%);
    }
}