document.addEventListener("DOMContentLoaded", function () {
  const sliderTitle = document.querySelector(".slide-title");
  const agroTitle = document.querySelector(".product_base");
  const imgBg = document.querySelector(".harvest_bg");
  const productTitle = document.querySelector(".prodyct-img");
  const imgSize = 100;

  if (!sliderTitle || !agroTitle || !imgBg || !productTitle) {
    console.error("Niektóre elementy nie zostały znalezione.");
    return;
  }

  function updateElementVisibility() {
    const elementRect = sliderTitle.getBoundingClientRect();
    const windowHeight = window.innerHeight;

    const scrollPositionPercentage = Math.min(100, Math.max(0, Math.floor((elementRect.top / (windowHeight - elementRect.height)) * 100)));

    const isElementVisible = elementRect.top >= 0 && elementRect.bottom <= windowHeight;



    moveElement(agroTitle, productTitle, scrollPositionPercentage, 0, -20, "visibility");
  }

  function moveElement(element1, element2, percentage, start, end, condition) {
    const windowWidth = window.innerWidth;
    const newXPosition = Math.floor(start + (percentage / 100) * (end - start));

    element1.style.transform = `translateX(${newXPosition}%)`;
    element2.style.transform = `translateX(${newXPosition}%)`;

    if (percentage <= 39) {
      element2.classList.add(condition);
    } else {
      element2.classList.remove(condition);
    }

    if (windowWidth > 991) {
      element1.style.backgroundSize = `${imgSize + newXPosition}%`;
    } else {
      element1.style.backgroundSize = condition;
    }
  }

  updateElementVisibility();

  window.addEventListener("resize", updateElementVisibility);
  window.addEventListener("scroll", updateElementVisibility);
});