/* Styles du preloader */
#fuse-splash-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f8f9fa;
    z-index: 999999;
}

/* Animation d'entrée des cercles - une seule fois */
@keyframes ripple-enter {
    0% {
        transform: scale(0);
        opacity: 0;
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 8px 0px;
    }
}

/* Animation continue des cercles - à l'infini */
@keyframes ripple-loop {
    0%, 100% {
        transform: scale(1);
        box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 8px 0px;
    }
    50% {
        transform: scale(1.25);
        box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 10px 0px;
    }
}

/* Animation d'entrée du logo - une seule fois */
@keyframes pulse-enter {
    0% { 
        opacity: 0; 
        transform: scale(0.3); 
    }
    50% {
        opacity: 0.7;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation continue du logo - à l'infini */
@keyframes pulse-loop {
    0%, 100% { 
        opacity: 0.9; 
        transform: scale(1); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.05); 
    }
}

.animate-ripple {
    opacity: 0;
    animation: 
        ripple-enter 1s ease-out forwards,
        ripple-loop 2s ease-in-out 1s infinite;
}

.animate-pulse-smooth {
    opacity: 0;
    animation: 
        pulse-enter 1.2s ease-out forwards,
        pulse-loop 1s ease-in-out 1.2s infinite;
}

/* Spinner avec couleurs du logo pour le dernier cercle */
.spinner-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: linear-gradient(
        135deg,
        #1e40af 0%,
        #3b82f6 15%,
        #8b5cf6 30%,
        #a855f7 40%,
        #f97316 55%,
        #fbbf24 70%,
        #84cc16 85%,
        #22c55e 100%
    );
    width: 100%;
    height: 100%;
    animation: spinning-logo 1.7s linear infinite;
    text-align: center;
    border-radius: 50%;
    filter: blur(0px);
  
    z-index: 1;
}

.spinner-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f8f9fa;
    width: 99%;
    height: 99%;
    border-radius: 50%;
    filter: blur(5px);
    z-index: 2;
}

@keyframes spinning-logo {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Délais personnalisés pour l'animation d'entrée uniquement */
.delay-\[200ms\].animate-ripple { 
    animation-delay: 0.2s, 1.2s;
}
.delay-\[400ms\].animate-ripple { 
    animation-delay: 0.4s, 1.4s;
}
.delay-\[600ms\].animate-ripple { 
    animation-delay: 0.6s, 1.6s;
}
.delay-\[800ms\].animate-ripple { 
    animation-delay: 0.8s, 1.8s;
}

/* Animation du cercle de progression - 0 à 100% */
@keyframes progress-circle {
    0% {
        stroke-dashoffset: 301.59;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.progress-circle {
    animation: progress-circle 3s ease-out forwards;
    animation-delay: 0.8s;
}

.progress-circle-2 {
    animation: progress-circle 3s ease-out forwards;
    animation-delay: 0.4s;
}

.progress-circle-3 {
    animation: progress-circle 3s ease-out forwards;
    animation-delay: 0.6s;
}

.progress-text {
    counter-reset: progress 0;
    opacity: 0;
    transform: translateY(20px);
    animation: 
        progress-enter 0.5s ease-out forwards,
        progress-fade 3s ease-out 0.5s forwards;
    animation-delay: 0s, 0.5s;
}

.progress-text::after {
    content: counter(progress) "%";
    animation: progress-count 3s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes progress-enter {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes progress-fade {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes progress-count {
    0% { counter-increment: progress 0; }
    10% { counter-increment: progress 10; }
    20% { counter-increment: progress 20; }
    30% { counter-increment: progress 30; }
    40% { counter-increment: progress 40; }
    50% { counter-increment: progress 50; }
    60% { counter-increment: progress 60; }
    70% { counter-increment: progress 70; }
    80% { counter-increment: progress 80; }
    90% { counter-increment: progress 90; }
    100% { counter-increment: progress 100; }
}