/* Animated Background */
body {
    color: #fff;
    position: relative;
    overflow-x: hidden;
}

/* Base Background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a0a2e 0%, #0f0a2e 50%, #0a1a2e 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    z-index: -2;
}

/* Animated Gradient Overlay */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.8;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 105, 180, 0.4) 0%, transparent 25%),
        radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.4) 0%, transparent 30%),
        radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.6) 0%, transparent 15%),
        radial-gradient(circle at 60% 40%, rgba(201, 102, 255, 0.4) 0%, transparent 20%);
    background-size: 200% 200%;
    animation: gradientPulse 15s ease infinite;
    mix-blend-mode: overlay;
}

/* Floating particles */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 10% 20%, rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0)),
        radial-gradient(3px 3px at 20% 40%, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 30% 80%, rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0)),
        radial-gradient(3px 3px at 70% 60%, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 80% 20%, rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0)),
        radial-gradient(3px 3px at 90% 50%, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 10% 70%, rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0)),
        radial-gradient(3px 3px at 30% 30%, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
    background-size: 200px 200px;
    animation: twinkle 50s linear infinite;
    z-index: -1;
    opacity: 0.4;
    mix-blend-mode: screen;
}

@keyframes gradientPulse {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

@keyframes twinkle {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1000px 1000px;
    }
}

/* Make containers completely transparent */
.container,
.milestones-box,
.countdown-box {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Mobile Optimizations */
@media (max-width: 767px) {
    /* Darker background for mobile */
    body::before {
        background: linear-gradient(135deg, #1a0a2e 0%, #0f0a2e 50%, #0a1a2e 100%) !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
    
    /* Optimize particles for mobile with darker theme */
    body::after {
        opacity: 0.4;
        background-image: 
            radial-gradient(2px 2px at 10% 20%, rgba(200, 180, 255, 0.6), rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 30% 80%, rgba(255, 150, 200, 0.6), rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 70% 20%, rgba(150, 180, 255, 0.6), rgba(0, 0, 0, 0)),
            radial-gradient(2px 2px at 90% 80%, rgba(200, 150, 255, 0.6), rgba(0, 0, 0, 0));
        background-size: 300px 300px;
        animation: twinkle 80s linear infinite;
    }
    
    /* Make containers completely transparent on mobile */
    .container {
        background: transparent !important;
        padding: 1.5rem 2rem !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Disable animations if user prefers reduced motion */
    @media (prefers-reduced-motion: reduce) {
        body::before,
        body::after {
            animation: none !important;
        }
    }
    
    /* Fix for mobile viewport units */
    @supports (-webkit-touch-callout: none) {
        body::before,
        body::after {
            height: 100%;
            min-height: -webkit-fill-available;
        }
    }
}