/* Floating Shapes Styles */
.floating-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1; /* Behind your content */
    overflow: hidden;
}

.shape {
    position: absolute;
    background: rgba(255, 255, 255, var(--opacity, 0.08));
    border-radius: var(--border-radius, 50%);
    width: var(--size);
    height: var(--size);
    top: var(--top);
    left: var(--left);
    animation: float var(--duration, 8s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

/* Animation Keyframes */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        transform: translateY(var(--float-distance, -30px)) rotate(180deg);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.4; 
    }
    50% { 
        transform: scale(1.2); 
        opacity: 0.8; 
    }
}

@keyframes drift {
    0% { transform: translateX(0) translateY(0) rotate(0deg); }
    25% { transform: translateX(30px) translateY(-20px) rotate(90deg); }
    50% { transform: translateX(0) translateY(-40px) rotate(180deg); }
    75% { transform: translateX(-30px) translateY(-20px) rotate(270deg); }
    100% { transform: translateX(0) translateY(0) rotate(360deg); }
}

@keyframes wobble {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(5deg) scale(1.1); }
    75% { transform: rotate(-5deg) scale(0.9); }
}

/* Additional animation classes */
.shape.pulse {
    animation-name: pulse;
}

.shape.drift {
    animation-name: drift;
}

.shape.wobble {
    animation-name: wobble;
}