@import url("../../../src/global.css");




/* Animação para desenhar a seta do ciclo */
#main-cycle-path-tailwind {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: draw-cycle-tailwind 5s ease-in-out forwards;
}

@keyframes draw-cycle-tailwind {
    to {
        stroke-dashoffset: 0;
    }
}

/* Animação para fazer o ícone central pulsar */
#alert-icon-tailwind {
    animation: pulse-tailwind 2s infinite alternate ease-in-out;
}

@keyframes pulse-tailwind {
    from {
        transform: scale(1);
        opacity: 0.8;
    }

    to {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* Animação para o aparecimento gradual (fade-in) das seções */
.pentest-step-tailwind {
    opacity: 0;
    animation: fade-in-tailwind 1s ease-in forwards;
}

@keyframes fade-in-tailwind {
    to {
        opacity: 1;
    }
}

/* Adiciona um atraso para cada etapa aparecer em sequência */
#step-tailwind-1 {
    animation-delay: 0.5s;
}

#step-tailwind-2 {
    animation-delay: 1.5s;
}

#step-tailwind-3 {
    animation-delay: 2.5s;
}

#step-tailwind-4 {
    animation-delay: 3.5s;
}

#step-tailwind-5 {
    animation-delay: 4.5s;
}