<!-- HTML -->
<div id="video-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999; overflow: hidden;">
  <video id="scroll-video" style="width: 100%; height: 100%; object-fit: cover;" muted playsinline>
    <source src="https://www.studiocuraeted.com/OddBoysCeramic.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

<style>
  /* Smooth slide-up transition */
  #video-overlay.transition {
    transition: transform 1s ease;
    transform: translateY(-100%);
  }

  /* Prevent scrolling below overlay until video is done */
  body.no-scroll {
    overflow: hidden;
    height: 100vh;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const video = document.getElementById('scroll-video');
    const overlay = document.getElementById('video-overlay');
    let isAnimating = false;

    // Prevent scrolling below overlay until video is done
    document.body.classList.add('no-scroll');

    const maxScroll = window.innerHeight;

    function updateVideoByScroll(scrollY) {
      const percent = Math.min(scrollY / maxScroll, 1); // Clamp to [0,1]
      video.currentTime = percent * video.duration;
    }

    window.addEventListener('scroll', () => {
      if (isAnimating) return;

      const scrollY = window.scrollY;
      updateVideoByScroll(scrollY);

      if (scrollY >= maxScroll) {
        // Trigger the slide-up animation
        overlay.classList.add('transition');
        isAnimating = true;

        setTimeout(() => {
          // Allow normal scrolling again
          document.body.classList.remove('no-scroll');
          // Redirect to your homepage
          window.location.href = 'https://www.studiocuraeted.com/';
        }, 1000);
      }
    }, { passive: true });

    // For mobile: simulate scrolling with touch move
    let touchStartY = 0;
    window.addEventListener('touchstart', (e) => {
      touchStartY = e.touches[0].clientY;
    });

    window.addEventListener('touchmove', (e) => {
      const touchY = e.touches[0].clientY;
      const deltaY = touchStartY - touchY;
      window.scrollBy(0, deltaY);
      touchStartY = touchY;
    }, { passive: false });
  });
</script>