/**
 * Auth Page - WebGL Fallback Styles
 * Used when WebGL is not supported in browser
 */

/* Animated gradient background */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Fallback animation for #net element */
#net.webgl-fallback {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #fd3995 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Ensure content is above background */
.page-wrapper {
    position: relative;
    z-index: 1;
}

/* Optional: Add subtle overlay pattern */
#net.webgl-fallback::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(30px, -30px);
    }
    66% {
        transform: translate(-20px, 20px);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #net.webgl-fallback {
        background-size: 600% 600%;
    }
}