﻿.svg-area {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}
.svg-area svg {
    animation: pulseStep 2.4s infinite;
}

#branches {
    opacity: 0;
    animation: fadeStep 2.4s infinite;
}

#circles {
    transform-origin: 264.5px 264.5px;
    animation: rotateStep 2.4s infinite;
}

@keyframes fadeStep {
    0% {
        opacity: 1;
    }
    20% {
        opacity: 0;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes rotateStep {
    0%,20% {
        transform: rotate(0deg);
    }
    80%,100% {
        transform: rotate(360deg);
    }
}

@keyframes pulseStep {
    0% {
        transform: scale(1.05);
    }
    5%,95% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}