/* Loader Background */
#loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #0d0d0d;
    position: relative;
    overflow: hidden;
}

/* SVG Circle */
#loading-circle {
    stroke-dasharray: 911; /* Circumference for r=145 */
    stroke-dashoffset: 911; /* Start fully hidden */
    transform: rotate(-90deg); /* Align to start at the top */
    transform-origin: center;
    transition: stroke-dashoffset 1s linear; /* Duration for drawing */
}

/* Counter Positioned at Top Middle */
#counter {
    position: absolute;
    top: calc(50% - 135px); /* Slightly below top edge */
    left: 50%;
    transform: translate(-50%, 0);
    font-family: 'Monument Extended', sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
    color: #b7ab98;
    text-align: center;
    z-index: 2;
}


#loading-image {
    position: absolute; /* Position it absolutely inside the loader */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Align to the center */
    width: 80px; /* Adjust size as needed */
    height: 80px; /* Maintain aspect ratio */
    z-index: 2; /* Ensure it appears above the circle */
    opacity: 1; /* Make sure it is visible */
    transition: opacity 1s ease-in-out;
}

/* Start Button */
#start-btn {
    position: absolute;
    background-color: transparent;
    color: #b7ab98;
    border: 2px solid #b7ab98;
    border-radius: 50px;
    padding: 0.8rem 2rem;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    text-align: center;
    cursor: pointer;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.5s ease-in-out;
}

#start-btn.appear-move-up {
    animation: appear-move-up 1s ease-in-out forwards; /* Fade in and move up */
}

#start-btn.show {
    display: block; /* Show the button */
}

#start-btn:hover {
    background-color: #b7ab98;
    color: #000;
}