body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.clock {
    border-radius: 50%;
    background-size: 88%;
    height: 20em;
    padding-bottom: 31%;
    position: fixed;
    width: 20em;
}

.minutes-container, .hours-container, .seconds-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.hours {
    background: #000;
    height: 20%;
    left: 48.75%;
    position: absolute;
    top: 30%;
    transform-origin: 50% 100%;
    width: 2.5%;
}

.minutes {
    background: #000;
    height: 40%;
    left: 49%;
    position: absolute;
    top: 10%;
    transform-origin: 50% 100%;
    width: 2%;
}

.seconds {
    background: #000;
    height: 45%;
    left: 49.5%;
    position: absolute;
    top: 14%;
    transform-origin: 50% 80%;
    width: 1%;
    z-index: 8;
}

/* Accélération progressive des aiguilles */
.accelerate-hours {
    animation: accelerateRotateHours 5s ease-in forwards, eject 1s ease-in 5s forwards;
}

.accelerate-minutes {
    animation: accelerateRotateMinutes 5s ease-in forwards, eject 1s ease-in 5s forwards;
}

.accelerate-seconds {
    animation: accelerateRotateSeconds 5s ease-in forwards, eject 1s ease-in 5s forwards;
}

@keyframes accelerateRotateHours {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(1440deg); /* 4 tours complets en 8s */
    }
}

@keyframes accelerateRotateMinutes {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(2880deg); /* 8 tours complets en 8s */
    }
}

@keyframes accelerateRotateSeconds {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(7200deg); /* 20 tours complets en 8s */
    }
}

/* Animation d'éjection sans réinitialiser la rotation */
@keyframes eject {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotateZ(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(50vw, -50vh) rotateZ(720deg); /* Les aiguilles sont éjectées avec une rotation supplémentaire */
    }
}

#particlesCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}