/* DYNAMIC LOGO = DYNAMIC ARROWS + LOGO + STATIC LOGO-BRAIN FOR REBOND FOR ANIMATION */
.dynamic-logo {
    position: relative;
    width: 35%;
    max-width: 250px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dynamic-logo::before {
    content: "";
    position: absolute;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(19, 19, 94, 0.5) 50%, rgba(19,19,94,0) 80%);
    z-index: -1;
    border-radius: 50%;
    filter: blur(30px);
}
/* logo-brain */
.dynamic-logo .logo-brain{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* dynamic arrows */
.dynamic-arrows{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dynamic-logo span{
    position: absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    /* border-right: 20px transparent solid; */
    border-top: 5px rgb(161, 206, 114) solid;
    border-left: 5px rgb(161, 206, 114) solid;
}
.dynamic-logo .ani-1{
    animation: ani-1 2.5s linear infinite;
}
.dynamic-logo .ani-2{
    animation: ani-2 2.5s linear infinite;
}
.dynamic-logo .ani-3{
    animation: ani-3 2.5s linear infinite;
}
@keyframes ani-1 {
    from{
        transform: rotateZ(120deg) rotateX(60deg) rotateZ(0deg)
    }
    to{
        transform: rotateZ(120deg) rotateX(60deg) rotateZ(360deg)
    }
}
@keyframes ani-2 {
    from{
        transform: rotateZ(-120deg) rotateX(60deg) rotateZ(0deg)
    }
    to{
        transform: rotateZ(-120deg) rotateX(60deg) rotateZ(360deg)
    }
}
@keyframes ani-3 {
    from{
        transform: rotateZ(0deg) rotateX(60deg) rotateZ(0deg)
    }
    to{
        transform: rotateZ(0deg) rotateX(60deg) rotateZ(360deg)
    }
}
.dynamic-arrows.invisible{
    opacity: 0;
    animation: inverse-rebond 0.6s ease;
}
@keyframes inverse-rebond {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    10% {
        transform: scale(1.2);
        opacity: 1;
    }
    50% {
        transform: scale(0.2);
        opacity: 0;
    }
    100% {
        transform: scale(0.2);
        opacity: 0;
    }
}

/* logo */
.logo img {
    width: 100%;
    height: 100%;
}
.logo {
    width: 100%;
    position: absolute;
    margin: auto;
    transform: scale(0.2);
    opacity: 0;
}
.logo.visible{
    width: 100%;
    position: absolute;
    transform: scale(1);
    opacity: 1;
    animation: rebond 0.6s ease;
}
@keyframes rebond {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    25% {
        transform: scale(0.2);
        opacity: 0;
    }
    50% {
        transform: scale(0.2);
        opacity: 0;
    }
    90% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}