/* =======================================================================
   ESTILOS CUSTOMIZADOS (Aquilo que é mais limpo no CSS do que no Tailwind)
   ======================================================================= */

.label {
    position: absolute;
    font-size: 1.25rem;
    font-weight: bold;
    color: #7ede6b;
    opacity: 0; /* Começam escondidos */
}

/* Posicionamento dos rótulos em cruz */
.label-top { top: 0; left: 50%; transform: translateX(-50%); }
.label-right { right: 0; top: 50%; transform: translateY(-50%); }
.label-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.label-left { left: 0; top: 50%; transform: translateY(-50%); }

/* 
  Perímetro do círculo: 2 * PI * r (raio de 150) = ~942.48
  Configuramos o traço (dash) para ter exatamente o tamanho do círculo.
  O offset empurra o traço para fora do círculo, deixando ele "vazio" no começo.
*/
#progress-circle {
    stroke-dasharray: 942.48;
    stroke-dashoffset: 942.48;
}

#checkmark {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

#growing-circle {
    transform-origin: center;
    transform: scale(0.1);
    opacity: 0;
}