$bubble-offset: 6px;

.siri {
    background: #000;
}

.siri-bubble {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;

    img {
        position: absolute;
        inset: 0;
        opacity: .9;

        &:nth-child(1) {
            z-index: 3;
            transform-origin: calc(50% + 0 * 0.5 * $bubble-offset) calc(50% + 1 * $bubble-offset);
            animation: bubble_1_spin 7.5s ease-in-out infinite;
        }

        &:nth-child(2) {
            z-index: 1;
            transform-origin: calc(50% - 0.86 * $bubble-offset) calc(50% - 0.5 * $bubble-offset);
            animation: bubble_2_spin 7.7s ease-in-out infinite;
        }

        &:nth-child(3) {
            z-index: 2;
            transform-origin: calc(50% + 0.86 * $bubble-offset) calc(50% - 0.5 * $bubble-offset);
            animation: bubble_3_spin 8s ease-in-out infinite;
        }

        // Central circle
        &:nth-child(4) {
            z-index: 4;
            opacity: 1;
        }
    }


}

@keyframes bubble_1_spin {
    0% {
        transform: translateX(0) translateY(-1 * $bubble-offset) rotate(0deg);
    }
    100% {
        transform: translateX(0) translateY(-1 * $bubble-offset) rotate(360deg);
    }
}

@keyframes bubble_2_spin {
    0% {
        transform: translateX(3.5px) translateY(0.5 * $bubble-offset) rotate(0deg);
    }
    100% {
        transform: translateX(3.5px) translateY(0.5 * $bubble-offset) rotate(360deg);
    }
}

@keyframes bubble_3_spin {
    0% {
        transform: translateX(-3.5px) translateY(0.5 * $bubble-offset) rotate(0deg);
    }
    100% {
        transform: translateX(-3.5px) translateY(0.5 * $bubble-offset) rotate(360deg);
    }
}
