/* Blob Audio Visualizer Styles */
.visualizer-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.audio-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.blob {
    position: absolute;
    filter: blur(0px);
    transition: border-radius 0.3s ease-out, opacity 0.1s ease-out;
    mix-blend-mode: screen;
    opacity: 0.8;
    transform-origin: center center;
    will-change: transform, border-radius, filter;
}

/* Couleurs organiques inspirées de l'image de référence */
.blob-0 { background: radial-gradient(ellipse 60% 40%, #ffeb3b 0%, #ff9800 50%, #ff6b35 100%); }
.blob-1 { background: radial-gradient(ellipse 70% 30%, #ff9800 0%, #ff5722 40%, #e91e63 100%); }
.blob-2 { background: radial-gradient(ellipse 50% 50%, #ff5722 0%, #e91e63 60%, #ad1457 100%); }
.blob-3 { background: radial-gradient(ellipse 80% 20%, #e91e63 0%, #9c27b0 50%, #7b1fa2 100%); }
.blob-4 { background: radial-gradient(ellipse 40% 60%, #9c27b0 0%, #673ab7 40%, #512da8 100%); }
.blob-5 { background: radial-gradient(ellipse 65% 35%, #673ab7 0%, #3f51b5 60%, #303f9f 100%); }
.blob-6 { background: radial-gradient(ellipse 55% 45%, #3f51b5 0%, #2196f3 50%, #1976d2 100%); }
.blob-7 { background: radial-gradient(ellipse 75% 25%, #2196f3 0%, #00bcd4 40%, #0097a7 100%); }
.blob-8 { background: radial-gradient(ellipse 45% 55%, #00bcd4 0%, #009688 60%, #00695c 100%); }
.blob-9 { background: radial-gradient(ellipse 60% 40%, #009688 0%, #4caf50 50%, #2e7d32 100%); }

/* Animations de base organiques pour les blobs */
@keyframes organicFloat {
    0% { transform: rotate(0deg) skew(0deg, 0deg) scale(1, 1); }
    25% { transform: rotate(90deg) skew(5deg, -2deg) scale(1.1, 0.9); }
    50% { transform: rotate(180deg) skew(-3deg, 4deg) scale(0.9, 1.1); }
    75% { transform: rotate(270deg) skew(2deg, -5deg) scale(1.05, 0.95); }
    100% { transform: rotate(360deg) skew(0deg, 0deg) scale(1, 1); }
}

@keyframes fluidPulse {
    0%, 100% { transform: scale(1, 1) skew(0deg); }
    33% { transform: scale(1.1, 0.9) skew(3deg); }
    66% { transform: scale(0.9, 1.1) skew(-3deg); }
}

/* Effets layer-specific organiques */
.layer-0 { animation: organicFloat 12s ease-in-out infinite; }
.layer-1 { animation: organicFloat 11s ease-in-out infinite reverse; }
.layer-2 { animation: fluidPulse 8s ease-in-out infinite; }
.layer-3 { animation: organicFloat 14s ease-in-out infinite reverse; }
.layer-4 { animation: fluidPulse 6s ease-in-out infinite reverse; }
.layer-5 { animation: organicFloat 16s ease-in-out infinite; }
.layer-6 { animation: fluidPulse 7s ease-in-out infinite; }
.layer-7 { animation: organicFloat 13s ease-in-out infinite reverse; }
.layer-8 { animation: fluidPulse 9s ease-in-out infinite reverse; }
.layer-9 { animation: organicFloat 18s ease-in-out infinite; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .blob {
        opacity: 0.6;
    }
}

/* Performance optimizations */
.blob {
    backface-visibility: hidden;
    perspective: 1000px;
    transform-style: preserve-3d;
}