.logo--base {
    display: none!important;
}


.logo-box {
    display: flex;
    gap: 15px;
    align-items: center;
    font-size: 0;
    line-height: 0;
}

.logo-left {
    width: 30%;
    flex-shrink: 0;
    position: relative;
}
.logo-left::before {
    content: "";
    display: block;
    padding-top: 100%;
}
.logo-right {
    width: calc(70% - 15px);
    flex-shrink: 0;
}

.logo-box img {
    width: 100%;
    transition: opacity 0.5s ease-in-out;
}

.logo-left img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.logo-left img:first-child {
    opacity: 1;
}

.logo-left img:last-child {
    opacity: 0;
}

/* Плавная анимация с длительными задержками */
@keyframes logoPrimary {
    0% { opacity: 1; }
    20% { opacity: 1; } /* длительная задержка в видимом состоянии */
    30% { opacity: 0; } /* плавное исчезновение */
    60% { opacity: 0; } /* длительная задержка в скрытом состоянии */
    80% { opacity: 1; } /* плавное появление */
    100% { opacity: 1; }
}

@keyframes logoSecondary {
    0% { opacity: 0; }
    20% { opacity: 0; }
    30% { opacity: 1; }
    60% { opacity: 1; }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

.logo-left img:first-child {
    animation: logoPrimary 7s ease-in-out infinite;
}

.logo-left img:last-child {
    animation: logoSecondary 7s ease-in-out infinite;
}