/* Animated Background */
body.animated-bg {
    position: relative;
    min-height: 100vh;
}

body.animated-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 1px 1px, rgba(107, 70, 193, 0.15) 2px, transparent 0) 0 0 / 40px 40px,
        radial-gradient(circle at 50% 50%, rgba(107, 70, 193, 0.15) 0%, transparent 70%) center/250% 250%,
        linear-gradient(to bottom right, #f8f9ff, #ffffff);
    z-index: -1;
    animation: 
        moveDots 15s linear infinite,
        glowLight 8s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes moveDots {
    0% {
        background-position: 0 0, center, 0 0;
    }
    100% {
        background-position: 40px 40px, center, 0 0;
    }
}

@keyframes glowLight {
    0% {
        background-position: 0 0, -50% -50%, 0 0;
    }
    100% {
        background-position: 40px 40px, 150% 150%, 0 0;
    }
}

/* Ensure content is above background */
main, nav, header, footer {
    position: relative;
    z-index: 1;
}