#collab-circles {
    width: 100%;
    text-align: center;
    svg {
        max-width: 100%;
    }
}

#collab-circles .icon {
    opacity: 0;
    animation: 2s fade-in ease 1;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

#collab-circles .small-icon {
    opacity: 0;
    animation: 2s fade-in ease 1;
    animation-fill-mode: forwards;
    animation-delay: 2.5s;
}

#collab-circles .arrow {
    opacity: 0;
    animation: 2s fade-in ease 1;
    animation-fill-mode: forwards;
    animation-delay: 2.7s;
}

#collab-circles .rings {
    opacity: 0;
    animation: 2s fade-in ease 1;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

#collab-circles .logo {
    opacity: 0;
    animation: 2s fade-in ease 1;
    animation-fill-mode: forwards;
}

#collab-circles .logo-background {
    animation: 2s background-scale-in ease 1;
    animation-fill-mode: forwards;
    transform-origin: 48% 50%;
}

#collab-circles .logo-icon {
    animation: 2s icon-scale-in ease 1;
    animation-fill-mode: forwards;
    transform-origin: 48% 50%;
}

#collab-circles .ring {
    animation: 2s pulse ease infinite;
    transform-origin: center;
}

#collab-circles *.no-animation {
    animation: none !important;
}


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

@keyframes background-scale-in {
    from {
        transform: scale(10);
    }
    to {
        transform: scale(1);
    }
}

@keyframes icon-scale-in {
    from {
        transform: scale(8);
    }
    to {
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}