@charset "utf-8";
/* CSS Document */
.rastro-estrela {
    position: absolute;
    width: 40px; /* Tamanho base da estrela */
    height: 40px;
    background-image: url('../img/magica.png'); /* Caminho para sua imagem de estrela */
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none; /* Crucial para não interferir com cliques no conteúdo */
    opacity: 0.7; /* A estrela começa um pouco transparente */
    
    /* Posição inicial e escala inicial (antes da animação começar) */
    transform: translate(-50%, -50%) scale(0.3); 
    
    animation: fadeGrowOut 1s ease-out forwards; /* Nome da animação, duração e preenchimento */
    z-index: 9999; /* Garante que as estrelas fiquem acima de todos os outros elementos */
}

@keyframes fadeGrowOut {
    0% {
        opacity: 1; /* Opacidade inicial */
        /* Começa bem pequena e aplica o offset aleatório */
        transform: translate(-50%, -50%) scale(0.3) translate(var(--estrela-x-offset), var(--estrela-y-offset));
    }
    100% {
        opacity: 0; /* Desaparece completamente no final */
        /* Cresce até o tamanho final aleatório e finaliza o deslocamento aleatório */
        transform: translate(-50%, -50%) scale(var(--estrela-scale-final)) translate(var(--estrela-x-offset), var(--estrela-y-offset)); /* <--- MUDANÇA AQUI */
    }
}