/**
 * Login Page - Animated Background
 * Polygon lines and wireframe animation
 */

.login-animation-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    overflow: hidden;
}

/* Polygon Lines */
.polygon-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.6), transparent);
    transform-origin: center;
}

.polygon-line-1 {
    width: 300px;
    height: 2px;
    top: 20%;
    left: -100px;
    animation: fly-horizontal 8s linear infinite;
}

.polygon-line-2 {
    width: 2px;
    height: 400px;
    top: -100px;
    left: 30%;
    animation: fly-vertical 10s linear infinite;
}

.polygon-line-3 {
    width: 250px;
    height: 2px;
    top: 60%;
    right: -100px;
    animation: fly-horizontal-reverse 7s linear infinite;
    animation-delay: -2s;
}

.polygon-line-4 {
    width: 2px;
    height: 350px;
    bottom: -100px;
    right: 25%;
    animation: fly-vertical-reverse 9s linear infinite;
    animation-delay: -4s;
}

.polygon-line-5 {
    width: 400px;
    height: 2px;
    top: 40%;
    left: -150px;
    animation: fly-horizontal 12s linear infinite;
    animation-delay: -6s;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), transparent);
}

.polygon-line-6 {
    width: 2px;
    height: 300px;
    top: -100px;
    right: 40%;
    animation: fly-vertical 11s linear infinite;
    animation-delay: -3s;
    background: linear-gradient(180deg, transparent, rgba(236, 72, 153, 0.6), transparent);
}

/* Diagonal Lines */
.polygon-line-7 {
    width: 500px;
    height: 2px;
    top: 30%;
    left: -200px;
    transform: rotate(45deg);
    animation: fly-diagonal 15s linear infinite;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
}

.polygon-line-8 {
    width: 450px;
    height: 2px;
    bottom: 20%;
    right: -200px;
    transform: rotate(-45deg);
    animation: fly-diagonal-reverse 13s linear infinite;
    animation-delay: -5s;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.5), transparent);
}

/* Flying Animations */
@keyframes fly-horizontal {
    from {
        transform: translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        transform: translateX(calc(100vw + 400px));
        opacity: 0;
    }
}

@keyframes fly-horizontal-reverse {
    from {
        transform: translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        transform: translateX(calc(-100vw - 400px));
        opacity: 0;
    }
}

@keyframes fly-vertical {
    from {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        transform: translateY(calc(100vh + 400px));
        opacity: 0;
    }
}

@keyframes fly-vertical-reverse {
    from {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        transform: translateY(calc(-100vh - 400px));
        opacity: 0;
    }
}

@keyframes fly-diagonal {
    from {
        transform: rotate(45deg) translate(0, 0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        transform: rotate(45deg) translate(calc(100vw + 500px), calc(100vh + 500px));
        opacity: 0;
    }
}

@keyframes fly-diagonal-reverse {
    from {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        transform: rotate(-45deg) translate(calc(-100vw - 500px), calc(-100vh - 500px));
        opacity: 0;
    }
}

/* Polygon Nodes - dots that float around */
.polygon-node {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(99, 102, 241, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
    animation: float-node 15s ease-in-out infinite;
}

.polygon-node:nth-child(1) {
    top: 15%;
    left: 20%;
    animation-duration: 18s;
}

.polygon-node:nth-child(2) {
    top: 45%;
    left: 60%;
    animation-duration: 22s;
    animation-delay: -5s;
    background: rgba(168, 85, 247, 0.8);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
}

.polygon-node:nth-child(3) {
    top: 70%;
    left: 30%;
    animation-duration: 20s;
    animation-delay: -8s;
    background: rgba(59, 130, 246, 0.8);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
}

.polygon-node:nth-child(4) {
    top: 25%;
    right: 25%;
    animation-duration: 25s;
    animation-delay: -12s;
    background: rgba(236, 72, 153, 0.8);
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.6);
}

.polygon-node:nth-child(5) {
    bottom: 20%;
    left: 50%;
    animation-duration: 19s;
    animation-delay: -3s;
    background: rgba(14, 165, 233, 0.8);
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.6);
}

@keyframes float-node {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(40px, -30px);
    }
    50% {
        transform: translate(-30px, 40px);
    }
    75% {
        transform: translate(50px, 20px);
    }
}

/* Tech grid pattern */
.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
    background-size: 100px 100px;
    opacity: 0.4;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .polygon-line {
        display: none;
    }
    
    .grid-overlay {
        background-size: 50px 50px;
    }
}