<!-- Видео на сайт -->
<video preload="auto" class="video_shape video_shape_preview" playsinline autoplay loop muted>
    <source src="https://dl.dropboxusercontent.com/scl/fi/k2c0yh94h755oeoawze0z/Isence_Img_GW_5.mp4?rlkey=6ff7lsi8iknggplj97ep2752r&st=0vlwemr1&dl=0" type="video/mp4">
</video>

<!-- Кастомный курсор play -->
<div class="custom-play-cursor"></div>

<script>
$(document).ready(function(){

    const secondVideo = 'https://dl.dropboxusercontent.com/scl/fi/k2c0yh94h755oeoawze0z/Isence_Img_GW_5.mp4?rlkey=6ff7lsi8iknggplj97ep2752r&st=0vlwemr1&dl=0';

    // Переносим превью-видео внутрь shape
    $('.video_shape_preview').appendTo('.shape-with-video div');

    // Сохраняем состояние: видео ещё не запускалось
    $('.shape-with-video').each(function(){
        $(this).data('video-started', false);
    });

    // Кастомный курсор play 25x25
    $('.shape-with-video').on('mouseenter', function(){
        $('.custom-play-cursor').addClass('custom-play-cursor-visible');
    });

    $('.shape-with-video').on('mouseleave', function(){
        $('.custom-play-cursor').removeClass('custom-play-cursor-visible');
    });

    $('.shape-with-video').on('mousemove', function(e){
        $('.custom-play-cursor').css({
            left: e.clientX + 'px',
            top: e.clientY + 'px'
        });
    });

    $('.shape-with-video').on('click', function(){

        const $shape = $(this);
        const $container = $shape.find('div').first();
        const isStarted = $shape.data('video-started');

        // Первый клик — заменяем превью на основное видео со звуком
        if (!isStarted) {
            $container.find('.video_shape').remove();

            const video = document.createElement('video');

            video.className = 'video_shape video_shape_active';
            video.src = secondVideo;
            video.preload = 'auto';
            video.playsInline = true;
            video.autoplay = true;
            video.controls = false;
            video.muted = false;
            video.defaultMuted = false;
            video.removeAttribute('muted');
            video.volume = 1;
            video.loop = false;

            $container.append(video);

            video.addEventListener('play', function(){
                $('.play-btn').addClass('play-btn-hidden');
            });

            video.addEventListener('pause', function(){
                $('.play-btn').removeClass('play-btn-hidden');
            });

            video.addEventListener('ended', function(){
                $('.play-btn').removeClass('play-btn-hidden');
            });

            video.play().then(function(){
                $shape.data('video-started', true);
                $('.play-btn').addClass('play-btn-hidden');
            }).catch(function(error){
                console.log('Видео не запустилось со звуком:', error);
            });

            return;
        }

        // Последующие клики — play / pause без перезапуска
        const video = $container.find('.video_shape_active').get(0);

        if (!video) return;

        if (video.paused) {
            video.play().catch(function(error){
                console.log('Видео не продолжилось:', error);
            });
        } else {
            video.pause();
        }

    });

});
</script>

<style>
/* Контейнер с видео */
.shape-with-video {
    overflow: hidden !important;
    position: relative !important;
    cursor: none !important;
}

.shape-with-video *,
.shape-with-video video {
    cursor: none !important;
}

/* Кастомный курсор play */
.custom-play-cursor {
    width: 25px !important;
    height: 25px !important;
    position: fixed !important;
    left: 0;
    top: 0;
    z-index: 999999 !important;
    pointer-events: none !important;
    background-image: url('https://static.tildacdn.com/tild3133-3038-4762-b066-316631393936/gridicons_play.svg') !important;
    background-size: 25px 25px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0;
    visibility: hidden;
}

.custom-play-cursor.custom-play-cursor-visible {
    opacity: 1;
    visibility: visible;
}

/* Убираем стандартный фон у shape */
.shape-with-video .tn-atom {
    background-image: none !important;
    background-color: transparent !important;
}

/* Видео внутри shape */
.shape-with-video video {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 10px !important;
}

/* Кнопка play */
.play-btn {
    display: block !important;
    cursor: none !important;
    z-index: 9999 !important;
    background-image: url('https://static.tildacdn.com/tild3133-3038-4762-b066-316631393936/gridicons_play.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
}

/* Если play-btn — это shape в Zero Block */
.play-btn .tn-atom {
    background-image: url('https://static.tildacdn.com/tild3133-3038-4762-b066-316631393936/gridicons_play.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
    border: none !important;
}

/* Скрываем кнопку, когда видео играет */
.play-btn.play-btn-hidden {
    display: none !important;
}

.play-btn.play-btn-hidden .tn-atom {
    display: none !important;
}
</style>