/* Animated Background */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
    background: radial-gradient(circle at center, #302b63, #0f0c29);
    animation: bg-shift 15s alternate infinite both ease-in-out;
}

@keyframes bg-shift {
    0% {
        background-position: 0% 0%;
        background-size: 100%;
    }
    50% {
        background-position: 100% 50%;
        background-size: 150%;
    }
    100% {
        background-position: 0% 100%;
        background-size: 120%;
    }
}

.animated-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
}

.circle-1 {
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle at center, rgba(154, 113, 231, 0.3), rgba(15, 12, 41, 0));
    animation: float-1 20s alternate infinite both ease-in-out;
    z-index: -1;
}

.circle-2 {
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle at center, rgba(154, 113, 231, 0.2), rgba(48, 43, 99, 0));
    animation: float-2 15s alternate infinite both ease-in-out;
    z-index: -1;
}

.circle-3 {
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle at center, rgba(154, 113, 231, 0.15), rgba(36, 36, 62, 0));
    animation: float-3 25s alternate infinite both ease-in-out;
    z-index: -1;
}

@keyframes float-1 {
    0% {
        transform: translate(-30%, -30%);
    }
    100% {
        transform: translate(10%, 10%);
    }
}

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

@keyframes float-3 {
    0% {
        transform: translate(0%, 40%);
    }
    100% {
        transform: translate(40%, -10%);
    }
}