#arco-logo-dashboard {
    /* Criamos um retângulo de recorte que começa com largura 0% */
    clip-path: inset(0 100% 0 0);
    animation: preencherArco 1.5s ease-in-out forwards;
}

@keyframes preencherArco {
    from {
        fill: #7B4D8C; /* Cor Fushia da marca */
        clip-path: inset(0 100% 0 0); /* Escondido à direita */
    }

    to {
        clip-path: inset(0 0% 0 0); /* Totalmente visível */
    }
}

#x-logo-dashboard {
    stroke: #7B4D8C; /* Aplica o Fushia */
    stroke-linecap: round;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: cobra 3s ease-out forwards;
}

#p-logo-dashboard {
    stroke: #7B4D8C; /* Aplica o Fushia */
    stroke-linecap: round;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: cobra 3s ease-out forwards;
}

#m-logo-dashboard {
    stroke: #7B4D8C; /* Aplica o Fushia */
    stroke-linecap: round;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: cobra 3s ease-out forwards;
}

@keyframes cobra {
    from {
        fill: none !important; /* Remove o preenchimento preto original da linha */
        stroke-dashoffset: 1500;
        stroke-width: 50; /* Espessura da linha na escala do seu SVG */
        opacity: 0.2;
    }

    to {
        stroke-dashoffset: 0;
        stroke-width: 0; /* Espessura da linha na escala do seu SVG */
        opacity: 1;
    }
}

@keyframes desenharRastro {
    from {
        fill: none !important; /* Remove o preenchimento preto original da linha */
        stroke-dashoffset: 1500;
        stroke-width: 50; /* Espessura da linha na escala do seu SVG */
        opacity: 0.2;
    }

    to {
        stroke-dashoffset: 0;
        stroke-width: 0; /* Espessura da linha na escala do seu SVG */
        opacity: 1;
    }
}