
    document.addEventListener('DOMContentLoaded', () => {
  const carousel = document.createElement('div');
  carousel.className = 'carousel';

  // Вставляем карусель перед основным контентом страницы
  const wrapper = document.querySelector('.wrapper');
  if (wrapper) {
    document.body.insertBefore(carousel, wrapper);
  } else {
    document.body.prepend(carousel);
  }

  // Десктоп: вертикальное колесо → горизонтальный скролл
  carousel.addEventListener('wheel', (e) => {
    e.preventDefault();
    carousel.scrollLeft += e.deltaY + e.deltaX;
  }, { passive: false });

  // Мобилка: вертикальный свайп → горизонтальный скролл с инерцией
  let touchStartX = 0;
  let touchStartY = 0;
  let lastTouchY = 0;
  let velocity = 0;
  let rafId = null;

  carousel.addEventListener('touchstart', (e) => {
    touchStartX = e.touches[0].clientX;
    touchStartY = e.touches[0].clientY;
    lastTouchY = touchStartY;
    velocity = 0;
    if (rafId) cancelAnimationFrame(rafId);
  }, { passive: true });

  carousel.addEventListener('touchmove', (e) => {
    const dx = touchStartX - e.touches[0].clientX;
    const dy = touchStartY - e.touches[0].clientY;
    if (Math.abs(dy) > Math.abs(dx)) {
      e.preventDefault();
      const delta = lastTouchY - e.touches[0].clientY;
      velocity = delta;
      carousel.scrollLeft += delta;
      lastTouchY = e.touches[0].clientY;
      touchStartX = e.touches[0].clientX;
    }
  }, { passive: false });

  carousel.addEventListener('touchend', () => {
    const decelerate = () => {
      if (Math.abs(velocity) < 0.5) return;
      carousel.scrollLeft += velocity;
      velocity *= 0.92;
      rafId = requestAnimationFrame(decelerate);
    };
    rafId = requestAnimationFrame(decelerate);
  }, { passive: true });

  // Собираем медиафайлы из DOM-карточек в том порядке, как owo их отрисовал
  function getMediaFiles() {
    const links = document.querySelectorAll('a[href$=".mp4"], a[href$=".png"]');

    if (links.length > 0) {
      return Array.from(links).map(link => {
        const href = link.getAttribute('href');
        const name = decodeURIComponent(href.split('/').pop());
        return {
          type: name.endsWith('.mp4') ? 'video' : 'image',
          name,
          url: href + '?static',
        };
      });
    }

    // Fallback: строим URL из текущего пути
    const base = window.location.pathname.replace(/\/$/, '');
    return [
      { type: 'video', name: 'compose_1080.mp4',  url: `${base}/compose_1080.mp4?static` },
      { type: 'image', name: 'slides_Page 2.png', url: `${base}/slides_Page%202.png?static` },
      { type: 'image', name: 'slides_Page 3.png', url: `${base}/slides_Page%203.png?static` },
      { type: 'image', name: 'slides_Page 4.png', url: `${base}/slides_Page%204.png?static` },
      { type: 'image', name: 'slides_Page 5.png', url: `${base}/slides_Page%205.png?static` },
      { type: 'image', name: 'slides_Page 6.png', url: `${base}/slides_Page%206.png?static` },
      { type: 'image', name: 'slides_Page 8.png', url: `${base}/slides_Page%208.png?static` },
    ];
  }

  getMediaFiles().forEach(file => {
    const item = document.createElement('div');
    item.className = 'carousel-item';

    if (file.type === 'video') {
      item.classList.add('carousel-video');
      const video = document.createElement('video');
      video.src = file.url;
      video.controls = false;
      video.autoplay = true;
      video.muted = true;
      video.loop = true;
      video.playsInline = true;
      item.appendChild(video);
    } else {
      item.classList.add('carousel-image');
      const img = document.createElement('img');
      img.src = file.url;
      img.alt = file.name;
      img.loading = 'lazy';
      item.appendChild(img);
    }

    carousel.appendChild(item);
  });
});