.login-page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.login-page {
    height: 100vh;
    background: #131a43;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
}

.background-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 80%, #1a2051 0%, #131a43 50%, #0f1538 100%);
    overflow: hidden;
    z-index: 1;
}

/* Ondas dinâmicas */
.wave {
    position: absolute;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(65, 105, 225, 0.1), transparent);
    border-radius: 40%;
    animation: waveRotate 200s linear infinite;
}

.wave:nth-child(1) {
    top: -50%;
    left: -50%;
    animation-delay: 0s;
}

.wave:nth-child(2) {
    top: -60%;
    right: -50%;
    animation-delay: -8s;
    animation-direction: reverse;
}

.wave:nth-child(3) {
    bottom: -50%;
    left: -50%;
    animation-delay: -16s;
}

/* Formas geométricas mais dinâmicas */
.floating-shape {
    position: absolute;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(100,149,237,0.2));
    border-radius: 50%;
    animation: floatComplex 60s ease-in-out infinite;
    backdrop-filter: blur(2px);
}

.shape-1 {
    width: 80px;
    height: 80px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 120px;
    height: 120px;
    top: 60%;
    right: 15%;
    animation-delay: -3s;
}

.shape-3 {
    width: 60px;
    height: 60px;
    bottom: 25%;
    left: 70%;
    animation-delay: -6s;
}

.shape-4 {
    width: 100px;
    height: 100px;
    top: 40%;
    left: 80%;
    animation-delay: -9s;
}

.shape-5 {
    width: 140px;
    height: 140px;
    bottom: 40%;
    left: 20%;
    animation-delay: -12s;
}

/* Partículas */
.particle-system {
    position: absolute;
    width: 100%;
    height: 100%;
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: particleDance 40s ease-in-out infinite;
}

.particle-small { width: 3px; height: 3px; }
.particle-medium { width: 5px; height: 5px; }
.particle-large { width: 8px; height: 8px; }

/* Grid dinâmico */
.dynamic-grid {
    position: absolute;
    width: 120%;
    height: 120%;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridFlow 20s linear infinite;
    transform: rotate(15deg);
}

/* Linhas conectoras */
.connection-lines {
    position: absolute;
    width: 100%;
    height: 100%;
}

.line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: lineMove 10s ease-in-out infinite;
}

.line-1 {
    width: 300px;
    top: 30%;
    left: 0;
    animation-delay: 0s;
}

.line-2 {
    width: 250px;
    top: 70%;
    right: 0;
    animation-delay: -3s;
    animation-direction: reverse;
}

.line-3 {
    width: 200px;
    top: 50%;
    left: 30%;
    animation-delay: -6s;
}

/* Pulsos luminosos */
.pulse-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    animation: pulseBeat 4s ease-in-out infinite;
}

.orb-1 {
    width: 150px;
    height: 150px;
    top: 15%;
    right: 20%;
    animation-delay: 0s;
}

.orb-2 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    right: 40%;
    animation-delay: -2s;
}

.orb-3 {
    width: 80px;
    height: 80px;
    top: 45%;
    left: 15%;
    animation-delay: -1s;
}

/* Container de login */
.login-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 20px;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    width: 420px;
    z-index: 1000;
    animation: containerGlow 6s ease-in-out infinite;
}

/* Animações */
@keyframes waveRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes floatComplex {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translate(30px, -40px) rotate(90deg) scale(1.2);
        opacity: 0.8;
    }
    50% {
        transform: translate(60px, -20px) rotate(180deg) scale(0.9);
        opacity: 0.4;
    }
    75% {
        transform: translate(30px, 40px) rotate(270deg) scale(1.1);
        opacity: 0.7;
    }
}

@keyframes particleDance {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    25% {
        transform: translate(-20px, -30px) scale(1.5);
        opacity: 1;
    }
    50% {
        transform: translate(40px, -60px) scale(0.8);
        opacity: 0.3;
    }
    75% {
        transform: translate(-10px, -40px) scale(1.2);
        opacity: 0.8;
    }
}

@keyframes gridFlow {
    0% { transform: rotate(15deg) translate(0, 0); }
    100% { transform: rotate(15deg) translate(40px, 40px); }
}

@keyframes lineMove {
    0%, 100% { transform: translateX(-100%); opacity: 0; }
    50% { transform: translateX(calc(100vw + 100%)); opacity: 1; }
}

@keyframes pulseBeat {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.6;
    }
}

@keyframes containerGlow {
    0%, 100% {
        box-shadow:
            0 25px 50px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow:
            0 25px 50px rgba(0, 0, 0, 0.4),
            0 0 40px rgba(19, 26, 67, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.2);
    }
}

/* Responsividade */
@media (max-width: 768px) {
    .login-container {
        width: 90%;
        padding: 30px;
    }

    .floating-shape {
        transform: scale(0.7);
    }

    .wave {
        width: 300%;
        height: 300%;
    }
}