/* Variáveis CSS para facilitar a personalização */
:root {
    --background-color: #ffffff;        /* Cor de fundo alterada para branco */
    --sparkle-color: #DAA520;          /* Cor da estrela alterada para dourado */
    --animation-duration: 2.5s;        /* Duração da animação */
    --sparkle-size: 5vw;              /* Tamanho responsivo da estrela */
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;        /* Ocupa toda a altura da janela */
    overflow: hidden;     /* Esconde quaisquer partes que extrapolem a tela */
} 


/* Estilos do SVG da estrela */
svg.sparkle {
    width: var(--sparkle-size);
    height: var(--sparkle-size);
    fill: var(--sparkle-color);
}

/* Transformações iniciais */
.group {
    transform: translate(42.5px, 42.5px);
}

path {
    transform: translate(-42.5px, -42.5px);
}

/* Animações */
.large {
    animation: large var(--animation-duration) 1 forwards; /* Estado final permanece */
}

.large-2 {
    animation: large-2 var(--animation-duration) 1 forwards; /* Estado final permanece */
}

.small {
    animation: small var(--animation-duration) 1 forwards; /* Estado final permanece */
}

@keyframes large {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0; /* Desaparece no final */
        transform: rotate(360deg) scale(1.5);
    }
}

@keyframes large-2 {
    0% {
        opacity: 0;
        transform: rotate(45deg) scale(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0; /* Desaparece no final */
        transform: rotate(405deg) scale(1.1);
    }
}

@keyframes small {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0; /* Desaparece no final */
        transform: rotate(-360deg) scale(1.5);
    }
}

/* Personalizações adicionais (Opcional) */
@media (max-width: 768px) {
    :root {
        --sparkle-size: 15vw; /* Tamanho maior para telas menores */
    }
}