/* svg_animation.css */
svg {
   
    max-width: 100%; /* Ensure SVG scales properly */
    max-height: 100%; /* Ensure SVG scales properly */
    display: block; /* Remove any default inline spacing */
    margin: auto;
    z-index: 1000;
}

.ring {
    stroke: #ffffff;
    stroke-width: 2px;
    stroke-dashoffset: -2000;
    stroke-dasharray: 2000;
    animation: none; /* Set initial state to none */
}

@keyframes ring {
    0% {
        stroke-dashoffset: -320;
        stroke: #ffffff;
    }
    30% {
        stroke: #ffffff;
    }
    50% {
        stroke: #ffffff;
    }
    70% {
        stroke: #ffffff;
    }
    100% {
        stroke-dashoffset: 0;
        stroke: #ffffff;
    }
}

svg .ring {
    animation-name: ring;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-delay: -1.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

.hand {
    stroke: #ffffff;
    stroke-width: 10px;
    stroke-dashoffset: -2000;
    stroke-dasharray: 2000;
    animation: none; /* Set initial state to none */
}

@keyframes hand {
    0% {
        stroke-dashoffset: -1500;
        stroke: #ffffff;
    }
    30% {
        stroke: #ffffff;
    }
    50% {
        stroke: #ffffff;
    }
    70% {
        stroke: #ffffff;
    }
    100% {
        stroke-dashoffset: 100;
        stroke: #ffffff;
    }
}

svg .hand {
    animation-name: hand;
    animation-duration: 3s;
    animation-delay: 0;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.reset {
    animation: none !important;
}