/* --- CONFIGURATION MULTI-VITESSES KAINA (DÉCLENCHEMENT AU SCROLL) --- */

/* 1. RÉGLAGES COMMUNS - ÉTAT INITIAL (STATIQUE) */
.kaina-slow-bar .elementor-progress-bar {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 20px !important;
    position: relative;
    overflow: hidden;
    
    /* ÉTAT DE DÉPART : Masqué par le clip-path */
    clip-path: inset(0 100% 0 0); 

    background-image: linear-gradient(
        45deg, 
        rgba(255, 255, 255, 0.2) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0.2) 75%, 
        transparent 75%, 
        transparent
    ) !important;
    background-size: 40px 40px !important;
}

/* 2. DÉCLENCHEMENT : UNIQUEMENT QUAND .start-anim EST PRÉSENT */
.kaina-slow-bar.start-anim .elementor-progress-bar {
    animation-name: kainaReveal, kainaMoveStripes;
    animation-iteration-count: 1, infinite;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), linear;
    animation-fill-mode: forwards, none;
}

/* 3. DÉFINITION DES DURÉES (Se lancent uniquement au déclenchement) */
.speed-1.start-anim .elementor-progress-bar { animation-duration: 5s, 1s; }
.speed-2.start-anim .elementor-progress-bar { animation-duration: 7s, 1s; }
.speed-3.start-anim .elementor-progress-bar { animation-duration: 9s, 1s; }
.speed-4.start-anim .elementor-progress-bar { animation-duration: 11s, 1s; }

/* 4. STABILISATION DU TEXTE */
.kaina-slow-bar .elementor-progress-text,
.kaina-slow-bar .elementor-progress-percentage {
    opacity: 1 !important;
    white-space: nowrap !important;
    z-index: 2;
}

/* --- LOGIQUE DES MOUVEMENTS --- */
@keyframes kainaReveal {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

@keyframes kainaMoveStripes {
    from { background-position: 0 0; }
    to { background-position: 40px 0; }
}