/*########################################################################
    TIMER
########################################################################*/

#timer-section {
    --base-duration: .3s;
    --trajectory-bg: rgba(255, 157, 0, 0.5);
}

#timer-section .fadein {
    opacity: 0;
    animation: fadeInScale calc(var(--base-duration) * 2) var(--timing-function-snappy) both;
    animation-delay: calc(var(--animation-order) * 100ms);
}

#timer-section .fadeout {
    animation: fadeOutScale calc(var(--base-duration) * 2) var(--timing-function-snappy) both;
    animation-delay: calc(var(--animation-order) * 100ms);
}

#timer-section h1 {
    grid-row: 1;
    grid-column: 1;
}

#timer-section #progressIndicator { transition: transform 1s var(--timing-function-snappy); }

#timer-section #progressIndicator #progressBg {
    fill: var(--trajectory-bg);
    stroke: var(--color-text-body);
    stroke-width: 4px;
    opacity: 0;
}

#timer-section #progressIndicator #progressState {
    fill: none;
    stroke: var(--color-text-body);
    stroke-width: 10px;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
    transform: rotate(-90deg);
}

#timer-section .orbit-1.spin { animation: spinCounter 60s linear infinite; animation-play-state: running; }
#timer-section .orbit-2.spin { animation: spinCounter 80s linear infinite; animation-play-state: running; }
#timer-section .orbit-3.spin { animation: spinCounter 40s linear infinite; animation-play-state: running; }
#timer-section .counter .orbit.paused { animation-play-state: paused; }

#timer-section .trajectory {
    fill: var(--trajectory-bg);
    fill-opacity: 0.25;
    stroke: var(--color-text-body);
    stroke-width: 4px;
    stroke-opacity: 0.25;
    transition: fill 100ms ease-out, stroke 100ms ease-out, fill-opacity 100ms ease-out, stroke-opacity 100ms ease-out;
}

#timer-section .planet {
    fill: var(--color-text-body);
    stroke: none;
    outline: 2px solid rgba(255, 255, 255, 0.2);
    outline-offset: 4px;
    border-radius: 50%;
    cursor: pointer;
    transition: fill 100ms ease-out, stroke 100ms ease-out;
}

#timer-section .planet:hover { outline: 2px solid currentColor; }
#timer-section .pop-planet { animation: popPlanet 0.5s ease-in-out forwards; }
#timer-section .grow-planet { animation: growPlanet 0.5s var(--timing-function-snappy) forwards; }

/* game mode */
#timer-section.gamemode .planet {
    fill: var(--color-3);
    stroke: var(--color-text-body);
    stroke-width: 4px;
}

#timer-section.gamemode .hud-indicator {
    fill: var(--color-3);
    stroke: var(--color-text-body);
    stroke-width: 4px;
}

#timer-section.gamemode .planet.in-solution,
#timer-section .hud-indicator.in-solution { fill: var(--color-text-body); }

#timer-section.gamemode .planet.correct,
#timer-section .hud-indicator.correct {
    fill: var(--color-1);
    stroke: var(--color-5);
}

#timer-section.gamemode .trajectory.correct { 
    stroke: var(--color-1); 
    stroke-opacity: 0.5;
}

/* timer inner part */
#timer-section #inner-part {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    width: 15%;
    max-width: 4rem;
    height: auto;
    aspect-ratio: 1 / 1;
    z-index: 6;
}

#timer-section #inner-part .hud-contruction {
    fill: none;
    stroke: var(--color-text-body);
    stroke-width: 2rem;
    stroke-opacity: 0.5;
}

/* timer */
#timer-section .counter {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    max-width: 32rem;
    height: auto;
}

#timer-section .inner-img,
#timer-section .inner-img svg {
    width: 100%;
    height: 100%;
}

/* #timer-section .inner-img svg {
    width: 100%;
    height: 100%;
} */

@media (min-width: 48rem) { /* md: 48em */

    #timer-section #timer { font-size: var(--font-size-body-3xl); }
}

/* manifest heading */
#timer-section #manifest-heading h1 {
    font-size: var(--font-size-body-2xl);
    font-weight: var(--font-weight-body);
    max-width: 24ch;
    text-wrap: balance;
    text-align: center;
}