/* ===== BACKGROUNDS MUSICAUX PROFESSIONNELS AVEC VRAIES IMAGES ===== */

/* Background hero avec vraie image de concert */
.hero-music-bg {
    background-image: 
        linear-gradient(135deg, rgba(30, 58, 138, 0.92) 0%, rgba(51, 65, 85, 0.92) 100%),
        url('https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Background studio d'enregistrement réel */
.studio-bg {
    background-image: 
        linear-gradient(rgba(10, 14, 39, 0.85), rgba(10, 14, 39, 0.85)),
        url('https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?w=1920&q=80');
    background-size: cover;
    background-position: center;
}

/* Background scène de concert live */
.stage-bg {
    background-image: 
        linear-gradient(180deg, rgba(10, 14, 39, 0.7) 0%, rgba(10, 14, 39, 0.95) 100%),
        url('https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?w=1920&q=80');
    background-size: cover;
    background-position: center;
}

/* Background festival de musique */
.festival-bg {
    background-image: 
        linear-gradient(rgba(30, 58, 138, 0.8), rgba(51, 65, 85, 0.8)),
        url('https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=1920&q=80');
    background-size: cover;
    background-position: center;
}

/* Background DJ et production */
.dj-bg {
    background-image: 
        linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(51, 65, 85, 0.9) 100%),
        url('https://images.unsplash.com/photo-1571330735066-03aaa9429d89?w=1920&q=80');
    background-size: cover;
    background-position: center;
}

/* Background guitare acoustique */
.acoustic-bg {
    background-image: 
        linear-gradient(rgba(30, 58, 138, 0.85), rgba(51, 65, 85, 0.85)),
        url('https://images.unsplash.com/photo-1510915361894-db8b60106cb1?w=1920&q=80');
    background-size: cover;
    background-position: center;
}

/* Background piano moderne */
.piano-bg {
    background-image: 
        linear-gradient(rgba(17, 24, 39, 0.8), rgba(51, 65, 85, 0.8)),
        url('https://images.unsplash.com/photo-1520523839897-bd0b52f945a0?w=1920&q=80');
    background-size: cover;
    background-position: center;
}

/* Background batterie/drums */
.drums-bg {
    background-image: 
        linear-gradient(rgba(71, 85, 105, 0.85), rgba(30, 58, 138, 0.85)),
        url('https://images.unsplash.com/photo-1571327073757-71d13c24de30?w=1920&q=80');
    background-size: cover;
    background-position: center;
}

/* Background vinyle et rétro */
.vinyl-bg {
    background-image: 
        linear-gradient(rgba(10, 14, 39, 0.9), rgba(10, 14, 39, 0.9)),
        url('https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?w=1920&q=80');
    background-size: cover;
    background-position: center;
}

/* Background microphone studio */
.mic-studio-bg {
    background-image: 
        linear-gradient(135deg, rgba(30, 58, 138, 0.88) 0%, rgba(17, 24, 39, 0.88) 100%),
        url('https://images.unsplash.com/photo-1590602847861-f357a9332bbc?w=1920&q=80');
    background-size: cover;
    background-position: center;
}

/* Background mixage et production */
.mixing-bg {
    background-image: 
        linear-gradient(rgba(17, 24, 39, 0.85), rgba(51, 65, 85, 0.85)),
        url('https://images.unsplash.com/photo-1598653222000-6b7b7a552625?w=1920&q=80');
    background-size: cover;
    background-position: center;
}

/* Pattern de vagues sonores modernes */
.wave-pattern {
    background: 
        linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.05) 50%, transparent 100%),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 10px,
            rgba(139, 92, 246, 0.1) 10px,
            rgba(139, 92, 246, 0.1) 11px
        );
}

/* Cards avec overlay d'instrument */
.guitar-overlay {
    background-image: 
        linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(51, 65, 85, 0.9) 100%),
        url('https://images.unsplash.com/photo-1564186763535-ebb21ef5277f?w=800&q=80');
    background-size: cover;
    background-position: center;
}

.drums-overlay {
    background-image: 
        linear-gradient(135deg, rgba(71, 85, 105, 0.9) 0%, rgba(30, 58, 138, 0.9) 100%),
        url('https://images.unsplash.com/photo-1519892300165-cb5542fb47c7?w=800&q=80');
    background-size: cover;
    background-position: center;
}

.keyboard-overlay {
    background-image: 
        linear-gradient(135deg, rgba(51, 65, 85, 0.9) 0%, rgba(220, 38, 38, 0.7) 100%),
        url('https://images.unsplash.com/photo-1556379095-4f37b7d0a4e0?w=800&q=80');
    background-size: cover;
    background-position: center;
}

/* Effet de vinyle tournant */
.vinyl-bg {
    background: radial-gradient(circle, 
        rgba(20, 20, 20, 1) 0%, 
        rgba(40, 40, 40, 1) 30%, 
        rgba(20, 20, 20, 1) 60%, 
        rgba(10, 10, 10, 1) 100%
    );
    position: relative;
}

.vinyl-bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(139, 92, 246, 0.3);
    animation: spin 10s linear infinite;
}

@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Background de studio d'enregistrement */
.studio-bg {
    background-image: 
        linear-gradient(rgba(10, 14, 39, 0.9), rgba(10, 14, 39, 0.9)),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 50px,
            rgba(139, 92, 246, 0.05) 50px,
            rgba(139, 92, 246, 0.05) 51px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 50px,
            rgba(71, 85, 105, 0.05) 50px,
            rgba(71, 85, 105, 0.05) 51px
        );
}

/* Effet d'égaliseur animé */
.equalizer-bg {
    background: linear-gradient(to bottom, #0a0e27 0%, #1a1e3f 100%);
    position: relative;
    overflow: hidden;
}

.equalizer-bg::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(
        to right,
        rgba(51, 65, 85, 0.3) 0%,
        rgba(51, 65, 85, 0.3) 5%,
        transparent 5%,
        transparent 10%,
        rgba(71, 85, 105, 0.3) 10%,
        rgba(71, 85, 105, 0.3) 15%,
        transparent 15%,
        transparent 20%,
        rgba(220, 38, 38, 0.2) 20%,
        rgba(220, 38, 38, 0.2) 25%,
        transparent 25%
    );
    background-size: 200px 100px;
    background-repeat: repeat-x;
    animation: equalizerMove 2s linear infinite;
}

@keyframes equalizerMove {
    0% { background-position-x: 0; }
    100% { background-position-x: 200px; }
}

/* Background de concert/scène */
.stage-bg {
    background-image: 
        radial-gradient(ellipse at top, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(71, 85, 105, 0.2) 0%, transparent 50%),
        linear-gradient(to bottom, #0a0e27 0%, #1a1441 100%);
}

/* Effet de spotlight */
.spotlight-effect {
    position: relative;
}

.spotlight-effect::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 50%
    );
    transform: translateX(-50%);
    animation: spotlight 5s ease-in-out infinite;
}

@keyframes spotlight {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(20px); }
}

/* Pattern de partition musicale */
.sheet-music-bg {
    background-color: #f5f5f0;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 19px,
            rgba(0, 0, 0, 0.1) 19px,
            rgba(0, 0, 0, 0.1) 20px
        );
}

/* Dégradé holographique */
.holographic-bg {
    background: linear-gradient(
        45deg,
        #1e3a8a 0%,
        #334155 25%,
        #1e40af 50%,
        #1e3a8a 75%,
        #334155 100%
    );
    background-size: 400% 400%;
    animation: holographic 15s ease infinite;
}

@keyframes holographic {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Effet de néon pulsant */
.neon-glow-bg {
    background: #0a0e27;
    box-shadow: 
        inset 0 0 50px rgba(51, 65, 85, 0.3),
        inset 0 0 100px rgba(220, 38, 38, 0.1);
    animation: neonPulse 3s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% { 
        box-shadow: 
            inset 0 0 50px rgba(51, 65, 85, 0.3),
            inset 0 0 100px rgba(220, 38, 38, 0.1);
    }
    50% { 
        box-shadow: 
            inset 0 0 60px rgba(71, 85, 105, 0.5),
            inset 0 0 120px rgba(220, 38, 38, 0.2);
    }
}

/* Background avec effet de cristal */
.crystal-bg {
    background: 
        linear-gradient(135deg, rgba(51, 65, 85, 0.1) 25%, transparent 25%),
        linear-gradient(225deg, rgba(71, 85, 105, 0.1) 25%, transparent 25%),
        linear-gradient(45deg, rgba(71, 85, 105, 0.1) 25%, transparent 25%),
        linear-gradient(315deg, rgba(51, 65, 85, 0.1) 25%, transparent 25%);
    background-position: 0 0, 50px 50px, 50px 0, 0 50px;
    background-size: 100px 100px;
    background-color: #0a0e27;
}

/* Texture de cassette rétro */
.cassette-texture {
    background-image: 
        linear-gradient(rgba(10, 14, 39, 0.95), rgba(10, 14, 39, 0.95)),
        repeating-linear-gradient(
            90deg,
            rgba(51, 65, 85, 0.1) 0px,
            rgba(71, 85, 105, 0.1) 2px,
            transparent 2px,
            transparent 4px
        );
}

/* Effet de lueur arc-en-ciel */
.rainbow-glow {
    position: relative;
}

.rainbow-glow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(51, 65, 85, 0) 0%,
        rgba(51, 65, 85, 0.1) 25%,
        rgba(220, 38, 38, 0.1) 50%,
        rgba(71, 85, 105, 0.1) 75%,
        rgba(51, 65, 85, 0) 100%
    );
    animation: rainbowSlide 3s linear infinite;
    pointer-events: none;
}

@keyframes rainbowSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Pattern de micros et instruments */
.music-icons-pattern {
    background-image: 
        url('data:image/svg+xml,%3Csvg width="60" height="60" xmlns="http://www.w3.org/2000/svg"%3E%3Ctext x="5" y="25" font-size="20" opacity="0.05" fill="white"%3E🎤%3C/text%3E%3Ctext x="35" y="45" font-size="15" opacity="0.03" fill="white"%3E🎸%3C/text%3E%3C/svg%3E');
    background-repeat: repeat;
}

/* Fond avec effet de fumée */
.smoke-effect {
    position: relative;
    overflow: hidden;
}

.smoke-effect::before,
.smoke-effect::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(139, 92, 246, 0.1) 0%,
        transparent 50%
    );
}

.smoke-effect::before {
    top: -50%;
    left: -50%;
    animation: smokeMove1 10s ease-in-out infinite;
}

.smoke-effect::after {
    bottom: -50%;
    right: -50%;
    background: radial-gradient(
        circle,
        rgba(71, 85, 105, 0.1) 0%,
        transparent 50%
    );
    animation: smokeMove2 12s ease-in-out infinite;
}

@keyframes smokeMove1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, 20px) scale(1.1); }
}

@keyframes smokeMove2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-20px, -20px) scale(1.1); }
}