.login-gradient {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    background: #020817 !important;
}

.login-gradient::before {
    position: fixed;
    z-index: -1;
    inset: -28%;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 24%, rgba(56, 189, 248, .34), transparent 38%),
        radial-gradient(ellipse at 78% 22%, rgba(79, 70, 229, .34), transparent 42%),
        radial-gradient(ellipse at 62% 82%, rgba(34, 197, 94, .2), transparent 38%),
        linear-gradient(135deg, #020817 8%, #0f172a 52%, #111827 92%);
    background-size: 150% 150%;
    animation: portal-gradient-drift 26s ease-in-out infinite alternate;
    will-change: transform, background-position;
}

@keyframes portal-gradient-drift {
    0% {
        transform: translate3d(-2%, -1%, 0) scale(1);
        background-position: 0% 45%;
    }

    100% {
        transform: translate3d(2%, 1%, 0) scale(1.04);
        background-position: 100% 55%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-gradient::before {
        animation: none;
        transform: none;
    }
}