/* Animated Background For Login Page */
.animated-bg {
    z-index: -1;
    top: 0;
    left: 0;
    background: radial-gradient(circle at 50% 50%, #0a0f2c 0%, #000510 100%);
}

.polygon-shape {
    position: absolute;
    background: rgba(80, 90, 255, 0.15);
    clip-path: polygon(50% 0%, 95% 25%, 100% 70%, 60% 100%, 20% 80%, 0% 40%);
    filter: blur(8px);
    animation: moveShape 60s infinite ease-in-out alternate;
    mix-blend-mode: screen;
}

/* Multiple layers */
.polygon-shape:nth-child(1) {
    width: 280px;
    height: 280px;
    top: 10%;
    left: 20%;
    background: rgba(130, 90, 255, 0.15);
    animation-delay: 0s;
}
.polygon-shape:nth-child(2) {
    width: 400px;
    height: 400px;
    top: 60%;
    left: 70%;
    background: rgba(100, 60, 255, 0.1);
    animation-delay: 10s;
}
.polygon-shape:nth-child(3) {
    width: 350px;
    height: 350px;
    top: 30%;
    left: 80%;
    background: rgba(40, 130, 255, 0.15);
    animation-delay: 20s;
}
.polygon-shape:nth-child(4) {
    width: 500px;
    height: 500px;
    top: 70%;
    left: 30%;
    background: rgba(80, 50, 200, 0.12);
    animation-delay: 15s;
}
.polygon-shape:nth-child(5) {
    width: 600px;
    height: 600px;
    top: -10%;
    left: 50%;
    background: rgba(60, 100, 255, 0.1);
    animation-delay: 5s;
}
.polygon-shape:nth-child(6) {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 10%;
    background: rgba(150, 80, 255, 0.18);
    animation-delay: 25s;
}

@keyframes moveShape {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(-150px, 100px) rotate(180deg) scale(1.1);
        opacity: 0.25;
    }
    100% {
        transform: translate(100px, -120px) rotate(360deg) scale(1);
        opacity: 0.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .polygon-shape {
        animation: none;
    }
}