/* Global Background System - Applied to ALL pages */

/* Base background container */
.weather-starscape-background, 
#weather-starscape,
.starscape-background,
#starscape {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -10 !important;
    pointer-events: none !important;
    
    /* Base background image */
    background-image: url('/sitegfx/bg2-.png') !important;
    background-repeat: repeat-x !important;
    background-size: auto 100% !important;
    background-position: 0 0 !important;
    background-color: #0a0a0f !important;
    
    /* Smooth drift animation */
    animation: background-drift 180s linear infinite !important;
}

/* Animated starfield overlay */
.weather-starscape-background::after,
#weather-starscape::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 160px 30px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 200px 90px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 240px 50px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 280px 10px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 320px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 360px 20px, rgba(255,255,255,0.6), transparent);
    background-repeat: repeat;
    background-size: 400px 200px;
    animation: starfield-drift 240s linear infinite;
    opacity: 0.4;
}

@keyframes background-drift {
    0% { background-position-x: 0; }
    100% { background-position-x: -100%; }
}

@keyframes starfield-drift {
    0% { 
        transform: translateX(0) translateY(0);
        opacity: 0.4;
    }
    50% {
        opacity: 0.6;
    }
    100% { 
        transform: translateX(-400px) translateY(-200px);
        opacity: 0.4;
    }
}

/* Ensure body and html don't interfere */
body, html {
    background: transparent !important;
    overflow-x: hidden;
}

/* Force all pages to use this background */
body.universe-theme,
body.auth-page,
body {
    background: transparent !important;
}

/* Ensure background shows on all page types */
.main-content,
.auth-main,
.admin-container {
    position: relative;
    z-index: 1;
}

/* Weather effects for dynamic backgrounds */
.weather-effects-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -5;
}

/* Rain effect */
.weather-rain {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.02) 50%,
        transparent 100%
    );
    background-size: 4px 100%;
    opacity: 0;
    transition: opacity 1s ease;
    animation: rain-drift 2s linear infinite;
}

.weather-rain.active {
    opacity: 0.3;
}

@keyframes rain-drift {
    0% { background-position-x: 0; }
    100% { background-position-x: -4px; }
}

/* Cloud overlay */
.weather-clouds {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse 800px 400px at 30% 20%,
        rgba(100, 100, 120, 0.1) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 2s ease;
    animation: cloud-drift 300s ease-in-out infinite;
}

.weather-clouds.active {
    opacity: 0.6;
}

@keyframes cloud-drift {
    0%, 100% { 
        transform: translateX(0);
        background-position: 0 0;
    }
    50% { 
        transform: translateX(50px);
        background-position: 100px 0;
    }
}

/* Snow effect for winter */
.weather-snow {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 10px 10px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 50px 50px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 90px 20px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 130px 60px, rgba(255,255,255,0.7), transparent);
    background-repeat: repeat;
    background-size: 150px 150px;
    opacity: 0;
    transition: opacity 1s ease;
    animation: snow-fall 10s linear infinite;
}

.weather-snow.active {
    opacity: 0.4;
}

@keyframes snow-fall {
    0% { 
        transform: translateY(-150px);
    }
    100% { 
        transform: translateY(100vh);
    }
}