/* Animated Background Blobs - Optimized Version */
/* Performance-optimized: GPU acceleration, reduced blur, better visibility */

.bg-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    filter: blur(60px);
    opacity: 0.7;
    pointer-events: none;
    will-change: transform;
}

.blob {
    position: absolute;
    border-radius: 50%;
    opacity: 0.6;
    mix-blend-mode: multiply;
    animation-timing-function: ease-in-out;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.blob:nth-child(1) { 
    width: 800px; 
    height: 800px; 
    background: #d4b770;
    animation: moveBlob1 60s infinite alternate; 
    top: -200px; 
    left: -200px; 
}

.blob:nth-child(2) { 
    width: 900px; 
    height: 900px; 
    background: #8b7355;
    animation: moveBlob2 70s infinite alternate; 
    bottom: -300px; 
    right: -300px; 
}

.blob:nth-child(3) { 
    width: 700px; 
    height: 700px; 
    background: #a67c52;
    animation: moveBlob3 65s infinite alternate; 
    top: 20%; 
    left: 40%; 
}

@keyframes moveBlob1 {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(100px, 150px, 0); }
}

@keyframes moveBlob2 {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-120px, -100px, 0); }
}

@keyframes moveBlob3 {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(80px, -120px, 0); }
}

/* Reduced motion preference support */
@media (prefers-reduced-motion: reduce) {
    .blob {
        animation: none;
    }
    
    .bg-blobs {
        filter: blur(40px);
    }
}