/* Animated Background */
.bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bg-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background:
            radial-gradient(ellipse at 20% 20%, rgba(168, 85, 247, 0.15) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 50%, rgba(124, 58, 237, 0.1) 0%, transparent 70%);
}

.floating-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(15px);
    animation: float 20s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
}

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