/* ANIMATED BACKGROUND - 13 BANDES LARGEUR VARIABLE */

/* Propriétés animables pour chaque bande */
@property --band1-w { syntax: '<percentage>'; inherits: false; initial-value: 2%; }
@property --band2-w { syntax: '<percentage>'; inherits: false; initial-value: 4%; }
@property --band3-w { syntax: '<percentage>'; inherits: false; initial-value: 3%; }
@property --band4-w { syntax: '<percentage>'; inherits: false; initial-value: 5%; }
@property --band5-w { syntax: '<percentage>'; inherits: false; initial-value: 3%; }
@property --band6-w { syntax: '<percentage>'; inherits: false; initial-value: 4%; }
@property --band7-w { syntax: '<percentage>'; inherits: false; initial-value: 2%; }
@property --band8-w { syntax: '<percentage>'; inherits: false; initial-value: 5%; }
@property --band9-w { syntax: '<percentage>'; inherits: false; initial-value: 3%; }
@property --band10-w { syntax: '<percentage>'; inherits: false; initial-value: 4%; }
@property --band11-w { syntax: '<percentage>'; inherits: false; initial-value: 3%; }
@property --band12-w { syntax: '<percentage>'; inherits: false; initial-value: 5%; }
@property --band13-w { syntax: '<percentage>'; inherits: false; initial-value: 2%; }

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    
    /* 13 bandes à positions fixes, largeurs variables */
    background: 
        radial-gradient(ellipse var(--band1-w) 100% at 5% 50%, rgba(160,160,160,0.1), transparent),
        radial-gradient(ellipse var(--band2-w) 100% at 12% 50%, rgba(130,130,130,0.08), transparent),
        radial-gradient(ellipse var(--band3-w) 100% at 20% 50%, rgba(160,160,160,0.1), transparent),
        radial-gradient(ellipse var(--band4-w) 100% at 28% 50%, rgba(130,130,130,0.08), transparent),
        radial-gradient(ellipse var(--band5-w) 100% at 36% 50%, rgba(160,160,160,0.1), transparent),
        radial-gradient(ellipse var(--band6-w) 100% at 44% 50%, rgba(130,130,130,0.08), transparent),
        radial-gradient(ellipse var(--band7-w) 100% at 52% 50%, rgba(160,160,160,0.1), transparent),
        radial-gradient(ellipse var(--band8-w) 100% at 60% 50%, rgba(130,130,130,0.08), transparent),
        radial-gradient(ellipse var(--band9-w) 100% at 68% 50%, rgba(160,160,160,0.1), transparent),
        radial-gradient(ellipse var(--band10-w) 100% at 76% 50%, rgba(130,130,130,0.08), transparent),
        radial-gradient(ellipse var(--band11-w) 100% at 84% 50%, rgba(160,160,160,0.1), transparent),
        radial-gradient(ellipse var(--band12-w) 100% at 92% 50%, rgba(130,130,130,0.08), transparent),
        radial-gradient(ellipse var(--band13-w) 100% at 98% 50%, rgba(160,160,160,0.1), transparent);
    
    /* Animations avec durées différentes pour effet aléatoire */
    animation: 
        band1 21s ease-in-out infinite,
        band2 33s ease-in-out infinite,
        band3 27s ease-in-out infinite,
        band4 39s ease-in-out infinite,
        band5 24s ease-in-out infinite,
        band6 36s ease-in-out infinite,
        band7 30s ease-in-out infinite,
        band8 42s ease-in-out infinite,
        band9 27s ease-in-out infinite,
        band10 33s ease-in-out infinite,
        band11 24s ease-in-out infinite,
        band12 39s ease-in-out infinite,
        band13 30s ease-in-out infinite;
}

/* Animation de chaque bande (variation de largeur) */
@keyframes band1  { 0%, 100% { --band1-w: 2%; } 50% { --band1-w: 6%; } }
@keyframes band2  { 0%, 100% { --band2-w: 4%; } 50% { --band2-w: 8%; } }
@keyframes band3  { 0%, 100% { --band3-w: 3%; } 50% { --band3-w: 7%; } }
@keyframes band4  { 0%, 100% { --band4-w: 5%; } 50% { --band4-w: 9%; } }
@keyframes band5  { 0%, 100% { --band5-w: 3%; } 50% { --band5-w: 6%; } }
@keyframes band6  { 0%, 100% { --band6-w: 4%; } 50% { --band6-w: 8%; } }
@keyframes band7  { 0%, 100% { --band7-w: 2%; } 50% { --band7-w: 5%; } }
@keyframes band8  { 0%, 100% { --band8-w: 5%; } 50% { --band8-w: 9%; } }
@keyframes band9  { 0%, 100% { --band9-w: 3%; } 50% { --band9-w: 7%; } }
@keyframes band10 { 0%, 100% { --band10-w: 4%; } 50% { --band10-w: 8%; } }
@keyframes band11 { 0%, 100% { --band11-w: 3%; } 50% { --band11-w: 6%; } }
@keyframes band12 { 0%, 100% { --band12-w: 5%; } 50% { --band12-w: 9%; } }
@keyframes band13 { 0%, 100% { --band13-w: 2%; } 50% { --band13-w: 5%; } }

/* ========================================