.main-promo__video-mask {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.main-promo__video-mask::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;

    /* Диагональный градиент: верхний левый → нижний правый */
    background: linear-gradient(
            to right,
            rgba(3, 15, 47, 1) 0%,
            rgba(7, 29, 86, 0.95) 40%,
            rgba(10, 41, 114, 0.2) 70%,
            rgba(4, 22, 71, 0.20) 95%,
            rgba(4, 22, 71, 0) 100%
    );
}

#three_js_banner {
    display: block;
    width: 100%;
    height: 100%;
}

/* Затемнение — на саму картинку */
.main-promo__card.animate{
    opacity: 1
}

.main-promo__card {
    height: auto;
    position: absolute;
    right: 100px;
    top: 128px;
    width: auto;
    /* Добавляем перспективу для 3D-эффекта */
    perspective: 1000px;
    transform-style: preserve-3d;


    /* Светящиеся края + тень */
    filter:
        /* Внешнее свечение (голубое) */
            drop-shadow(0 0 8px rgb(0, 103, 148))
            drop-shadow(0 0 20px rgba(2, 109, 197, 0.9))
                /* Тень для глубины */
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))
            drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4))
            drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5))
            drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6))
            drop-shadow(0 40px 80px rgba(0, 0, 0, 0.4));

    transition: filter 0.3s ease, opacity 0.5s ease;

}

@media (max-width: 1200px) {
    .main-promo__card {
        display: block;
        height: auto;
        margin: 0 0 31px;
        opacity: 1;
        position: relative;
        right: auto;
        text-align: center;
        top: auto;
        width: auto;
        filter: none;
    }
}