.circle-animation {
    margin-bottom: 100px;
    position: relative;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    animation-name: rotate;
}

.circle-animation .inner-circle {
    border-radius: 100%;
    border: 5px solid var(--primary);
    width: 100%;
    height: 100%;
    position: absolute;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

.circle-animation .inner-circle:nth-child(1) {
    animation-name: circle-in-out;
    border-color: var(--gray);
}

.circle-animation .inner-circle:nth-child(2) {
    animation-name: circle-out-in;
}

/* =================================================== */

.two-circles-animation {
    margin-bottom: 100px;
    position: relative;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    animation-name: rotate;
}

.two-circles-animation .inner-circle {
    position: absolute;
    width: 30%;
    height: 30%;
    border: 3px solid var(--gray);
    border-radius: 100%;
    background-color: white;
    z-index: 1;
}

.two-circles-animation .inner-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    height: 40%;
    border: 3px solid var(--primary);
    transform: translate(-50%, -50%);
}

.two-circles-animation .inner-circle:nth-child(1) {
    bottom: 0%;
    right: 0%;
}

.two-circles-animation .line {
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: var(--primary);
    transform: rotate(45deg) scale(0.95); /* 0.62 */
    top: 50%;
}

/* =================================================== */

.moving-circle {
    margin-bottom: 100px;
    position: relative;
    animation: rotate 5s linear infinite;
}

.moving-circle .inner-circle {
    width: 90%;
    height: 90%;
    border: 3px solid var(--gray);
    border-radius: 100%;
    position: relative;
}

.moving-circle .inner-circle::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    border: 10px double var(--primary);
    border-radius: 100%;
    transform: translate(-50%, -50%);
}

/* =================================================== */


@keyframes circle-in-out {
    0% {
        transform: scale(1);
    }
    50% {
        transform: var(--circle-animation-factor) rotate(5deg);
        transform-origin: right;
    }
    100% {
        transform: scale(1);
    }
}
@keyframes circle-out-in {
    0% {
        transform: var(--circle-animation-factor) rotate(10deg);
    }
    50% {
        transform-origin: left;
        transform: scale(1);
    }
    100% {
        transform: var(--circle-animation-factor) rotate(-10deg);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/*
<div class="circle-animation" style="width: 300px; height: 300px">
    <div class="inner-circle"></div>
    <div class="inner-circle"></div>
</div>

<div class="two-circles-animation" style="width: 500px; height: 500px">
    <div class="inner-circle"></div>
    <div class="line"></div>
    <div class="inner-circle"></div>
</div>

<div class="moving-circle" style="width: 300px; height: 300px">
    <div class="circle-animation" style="width: 150px; height: 150px">
        <div class="inner-circle"></div>
        <div class="inner-circle"></div>
    </div>
</div>
*/