.login-background {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--mud-palette-background);
}

.auth-bg-animation {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.auth-grid {
    position: absolute;
    inset: -20% -10%;
    opacity: 0.08;
    background-image:
        linear-gradient(var(--mud-palette-lines-default) 1px, transparent 1px),
        linear-gradient(90deg, var(--mud-palette-lines-default) 1px, transparent 1px);
    background-size: 48px 48px;
    transform: perspective(720px) rotateX(58deg) translateY(18%);
    animation: auth-grid-shift 16s linear infinite;
}

.auth-gradient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.24;
    transform: translate3d(0, 0, 0);
    animation: auth-glow-float 12s ease-in-out infinite;
}

.auth-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 36%, transparent);
    opacity: 0.2;
    animation: auth-ring-spin 14s linear infinite;
}

.auth-ring-1 {
    width: 520px;
    height: 520px;
    left: -180px;
    top: 48%;
}

.auth-ring-2 {
    width: 420px;
    height: 420px;
    right: -120px;
    top: -80px;
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 38%, transparent);
    animation-direction: reverse;
    animation-duration: 10s;
}

.auth-gradient-glow-1 {
    width: 480px;
    height: 480px;
    top: -120px;
    left: -100px;
    background: color-mix(in srgb, var(--mud-palette-primary) 78%, transparent);
}

.auth-gradient-glow-2 {
    width: 420px;
    height: 420px;
    right: -120px;
    top: 18%;
    background: color-mix(in srgb, var(--mud-palette-secondary) 74%, transparent);
    animation-delay: -6s;
}

.auth-gradient-glow-3 {
    width: 460px;
    height: 460px;
    left: 32%;
    bottom: -180px;
    background: color-mix(in srgb, var(--mud-palette-tertiary) 68%, transparent);
    animation-delay: -10s;
}

.auth-beam {
    position: absolute;
    width: 2px;
    height: 40vh;
    background: linear-gradient(
        to bottom,
        transparent,
        color-mix(in srgb, var(--mud-palette-primary) 85%, transparent),
        transparent);
    opacity: 0.25;
    filter: blur(0.2px);
    animation: auth-beam-rise 4.8s linear infinite;
}

.auth-beam-1 {
    left: 18%;
    top: -50vh;
    animation-delay: -1.2s;
}

.auth-beam-2 {
    right: 24%;
    top: -60vh;
    background: linear-gradient(
        to bottom,
        transparent,
        color-mix(in srgb, var(--mud-palette-secondary) 85%, transparent),
        transparent);
    animation-delay: -4.4s;
}

.auth-beam-3 {
    left: 32%;
    top: -55vh;
    height: 35vh;
    animation-delay: -2.6s;
}

.auth-beam-4 {
    right: 38%;
    top: -52vh;
    height: 44vh;
    animation-delay: -3.4s;
    background: linear-gradient(
        to bottom,
        transparent,
        color-mix(in srgb, var(--mud-palette-tertiary) 84%, transparent),
        transparent);
}

.auth-beam-5 {
    left: 58%;
    top: -60vh;
    height: 30vh;
    width: 1px;
    animation-delay: -0.8s;
}

.auth-beam-6 {
    right: 10%;
    top: -64vh;
    height: 38vh;
    width: 1px;
    animation-delay: -5.2s;
}

.auth-particle {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 82%, white 18%);
    box-shadow: 0 0 18px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent);
    opacity: 0.45;
    animation: auth-particle-float 7.5s ease-in-out infinite;
}

.auth-particle-1 {
    left: 12%;
    top: 68%;
    animation-delay: -1s;
}

.auth-particle-2 {
    right: 14%;
    top: 24%;
    background: color-mix(in srgb, var(--mud-palette-secondary) 82%, white 18%);
    box-shadow: 0 0 18px color-mix(in srgb, var(--mud-palette-secondary) 70%, transparent);
    animation-delay: -3s;
}

.auth-particle-3 {
    left: 44%;
    top: 82%;
    background: color-mix(in srgb, var(--mud-palette-tertiary) 82%, white 18%);
    box-shadow: 0 0 18px color-mix(in srgb, var(--mud-palette-tertiary) 70%, transparent);
    animation-delay: -5s;
}

.auth-particle-4 {
    right: 34%;
    top: 72%;
    animation-delay: -7.4s;
}

.auth-particle-5 {
    left: 22%;
    top: 36%;
    animation-delay: -2.2s;
}

.auth-particle-6 {
    right: 28%;
    top: 54%;
    background: color-mix(in srgb, var(--mud-palette-secondary) 78%, white 22%);
    box-shadow: 0 0 16px color-mix(in srgb, var(--mud-palette-secondary) 68%, transparent);
    animation-delay: -4.6s;
}

.auth-particle-7 {
    left: 64%;
    top: 86%;
    width: 7px;
    height: 7px;
    animation-delay: -6.6s;
}

.auth-particle-8 {
    right: 44%;
    top: 14%;
    width: 6px;
    height: 6px;
    background: color-mix(in srgb, var(--mud-palette-tertiary) 78%, white 22%);
    box-shadow: 0 0 14px color-mix(in srgb, var(--mud-palette-tertiary) 66%, transparent);
    animation-delay: -5.8s;
}

.auth-star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.95;
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.95),
        0 0 16px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    animation: auth-star-twinkle 1.8s ease-in-out infinite;
}

.auth-star::before,
.auth-star::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -50%);
}

.auth-star::before {
    width: 1px;
    height: 11px;
}

.auth-star::after {
    width: 11px;
    height: 1px;
}

.auth-star-1 {
    left: 9%;
    top: 16%;
    animation-delay: -0.2s;
}

.auth-star-2 {
    left: 26%;
    top: 10%;
    animation-delay: -1.1s;
}

.auth-star-3 {
    left: 42%;
    top: 22%;
    animation-delay: -0.7s;
}

.auth-star-4 {
    right: 22%;
    top: 12%;
    animation-delay: -1.5s;
}

.auth-star-5 {
    right: 8%;
    top: 28%;
    animation-delay: -0.9s;
}

.auth-star-6 {
    left: 18%;
    top: 54%;
    animation-delay: -1.7s;
}

.auth-star-7 {
    right: 36%;
    top: 66%;
    animation-delay: -0.4s;
}

.auth-star-8 {
    right: 14%;
    top: 78%;
    animation-delay: -1.3s;
}

.login-background > *:not(.auth-bg-animation) {
    position: relative;
    z-index: 1;
}

.login-background > .mud-popover-provider,
.login-background > .mud-dialog-provider,
.login-background > .mud-snackbar-provider {
    z-index: 1300 !important;
}

@keyframes auth-star-twinkle {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.35);
    }
}

@keyframes auth-ring-spin {
    from {
        transform: rotate(0deg) scale(1);
    }

    to {
        transform: rotate(360deg) scale(1.03);
    }
}

@keyframes auth-grid-shift {
    0% {
        transform: perspective(720px) rotateX(58deg) translate3d(0, 18%, 0);
    }

    100% {
        transform: perspective(720px) rotateX(58deg) translate3d(0, 26%, 0);
    }
}

@keyframes auth-glow-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -22px, 0) scale(1.07);
    }
}

@keyframes auth-beam-rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    20% {
        opacity: 0.3;
    }

    80% {
        opacity: 0.25;
    }

    100% {
        transform: translateY(150vh);
        opacity: 0;
    }
}

@keyframes auth-particle-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    35% {
        transform: translate3d(10px, -18px, 0) scale(1.2);
    }

    70% {
        transform: translate3d(-8px, -26px, 0) scale(0.9);
    }
}

@media (max-width: 959.98px) {
    .auth-gradient-glow {
        opacity: 0.18;
        filter: blur(64px);
    }

    .auth-grid {
        opacity: 0.05;
    }

    .auth-ring {
        display: none;
    }

    .auth-star {
        opacity: 0.7;
    }
}