.reveal {
    animation: reveal 3s linear 1;
}

@keyframes reveal {
    0% {
        opacity: 1;
        display: block;
    }

    30% {
        opacity: 1;
        display: block;
    }

    60% {
        opacity: 0.7;
        display: block;
    }

    90% {
        opacity: 0.3;
        display: block;
    }

    100% {
        opacity: 0;

    }
}

.popreveal {
    animation: pop-reveal 1s ease forwards;
}

@keyframes pop-reveal {
    from {
        clip-path: circle(0% at 0 0);
    }

    to {
        clip-path: circle(142% at 0 0);
    }
}

.radio-field input::before,
.radio-field-2 input::before {
    animation: check-pop .5s forwards;
}

@keyframes check-pop {
    from {
        clip-path: circle(0.0% at 50% 50%);
    }

    to {
        clip-path: circle(100% at 50% 50%);
    }
}



.revealfield {
    animation: revealfield 0.5s linear forwards;
}



.delay-100ms {
    animation-delay: 100ms;
}

.delay-200ms {
    animation-delay: 200ms;
}

.delay-300ms {
    animation-delay: 300ms;
}

.delay-400ms {
    animation-delay: 400ms;
}

.delay-500ms {
    animation-delay: 500ms;
}


@keyframes revealfield {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#aiguille {
    transition: transform 4s ease-out;
    /* 3 secondes pour une animation plus longue et 'ease-out' pour un effet progressif */
}

#rouage {
    transform-origin: 960.4286px 791.1528px;
    /* Utilisez les coordonnées du centre du rouage */
    animation: rotateRouage 2.5s linear;
}

@keyframes rotateRouage {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


#gaugeContainer {
    animation: fadeInAnimation 2s ease-in-out;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}