/* --- ДЕСКТОПНАЯ ВЕРСИЯ (Для больших экранов) --- */

/* --- ДЕСКТОПНАЯ ВЕРСИЯ (Экран от 1140px и выше) --- */
@media (min-width: 1140px) {
    ._before_wolf {
        anchor-name: --current-movie-card;
        z-index: 31;
    }

    ._before_wolf + .wolf-overlay {
        position: absolute;
        z-index: 21;

        /* Ваше идеальное позиционирование по якорю */
        top: calc(anchor(--current-movie-card top) - 25px);
        left: calc(anchor(--current-movie-card right) - 145px);

        width: 330px;
        height: 240px;
        max-height: 240px;

        pointer-events: none;
        opacity: 0;
        transition: opacity 320ms ease;
    }

    #wolf-video {
    width: 490px;
    height: 350px;
    /* object-fit: fill; Сброс для десктопа */
    }

    .wolf-overlay.is-visible {
        opacity: 1;
    }
}


/* --- МОБИЛЬНАЯ ВЕРСИЯ И ПЛАНШЕТЫ (Экран до 1139px) --- */
@media (max-width: 1139px) {
    ._before_wolf {
        anchor-name: none !important;
        z-index: 131;
    }

    ._before_wolf + .wolf-overlay {
        /* Возвращаем в поток, чтобы двигался вместе с карточкой при скролле */
        display: inline-block;
        vertical-align: top;
        position: relative;
        top: auto !important;
        left: auto !important;

        z-index: 21;

        /* ХАК: Схлопываем ширину в 0, чтобы Майкл больше НЕ СЪЕЗЖАЛ */
        width: 0 !important;
        height: 360px;
        max-height: 360px;

        /* Внешние отступы больше не нужны, так как блок ничего не весит */
        margin-right: 0 !important;
        margin-left: 0 !important;

        pointer-events: none;
        opacity: 0;
        transition: opacity 500ms ease;
    }

    ._before_wolf + .wolf-overlay.is-visible {
        opacity: 1 !important;
    }

    /* Задаем реальные размеры для самого видео плеера */
    #wolf-video {
    position: relative;
    /* Видео имеет честные 330px ширины и выходит из нулевого родительского блока */
    width: 330px !important;
    height: 100%;
    object-fit: cover;

    object-position: -40px center;

    /* Сдвигаем само видео влево и вверх, как в ваших прошлых маргинах.
     *       Попробуйте изменить -60px (горизонталь) и -20px (вертикаль)
     *       прямо в браузере, чтобы добиться идеального наложения на Смешариков */
    /* transform: translate(-60px, -20px);  */

    transform: translate(-10px, -30px);

    }
}