document.addEventListener("DOMContentLoaded", function() {
  const textElements = document.querySelectorAll('.scrollingText');


  function getOffsetAdjustment() {
    const screenWidth = window.innerWidth;
    if (screenWidth <= 420) {
      return -50; // 420px 이하에서 30% 추가 이동
    } else if (screenWidth <= 800) {
      return -60; // 800px 이하에서 15% 추가 이동
    } else if (screenWidth <= 1000) {
      return -70; // 1000px 이하에서 10% 추가 이동
    }
    return -70; // 그 외의 경우 추가 이동 없음
  }


  function updateTextPosition() {
    var windowHeight = window.innerHeight;
    var scrollPosition = window.pageYOffset + windowHeight / 2; // 현재 스크롤 위치 + 화면의 절반


    textElements.forEach(textElement => {
      var wrapper = textElement.closest('.wrapper_f');
      var wrapperTop = wrapper.getBoundingClientRect().top + window.pageYOffset;
      var wrapperBottom = wrapper.getBoundingClientRect().bottom + window.pageYOffset;
      var wrapperCenter = (wrapperTop + wrapperBottom) / 2;
      var maxScroll = document.body.scrollHeight - windowHeight;


      // 스크롤 위치가 wrapper의 중앙에 도달했을 때의 계산
      var scrollImpact = (scrollPosition - wrapperCenter + windowHeight / 2) / windowHeight;
      scrollImpact = Math.max(-1, Math.min(1, scrollImpact)); // -1과 1 사이로 제한


      var textPosition = (scrollImpact * 100).toFixed(2);
      textPosition = -textPosition - getOffsetAdjustment(); // 텍스트 위치 업데이트


      if (textPosition < -100) textPosition = -100;
      if (textPosition > 100) textPosition = 100;


      textElement.style.left = textPosition + '%';
    });
  }


  window.addEventListener('scroll', updateTextPosition);
  updateTextPosition(); // 초기 위치 설정


  function updateGradient(timestamp) {
    const timeFactor = (timestamp / 5000) % 1; // 5초 간격으로 변화


    textElements.forEach(textElement => {
      const gradientColors = colors.map((color, index) => {
        const startColor = colors[index % colors.length];
        const endColor = colors[(index + 1) % colors.length];
        const factor = (timeFactor + index * 0.2) % 1;
        return interpolateColor(factor, startColor, endColor);
      });


      const gradient = `linear-gradient(to left, ${gradientColors.join(', ')})`;
      textElement.style.background = gradient;
      textElement.style.webkitBackgroundClip = 'text';
      textElement.style.webkitTextFillColor = 'transparent';
    });


    requestAnimationFrame(updateGradient);
  }
  requestAnimationFrame(updateGradient);
});



// 색상 배열 정의

const colors = ['#0077CC', '#0099FF', '#00BBFF', '#007ea5', '#00445f'];
 

function updateGradient(timestamp) {
  const textElement = document.getElementById('scrollingText');
  const timeFactor = (timestamp / 5000) % 1;  // 5초 간격으로 변화

  const gradientColors = colors.map((color, index) => {


    // 각 색상마다 시간 변화를 고려하여 보간
    const startColor = colors[index % colors.length];
    const endColor = colors[(index + 1) % colors.length];
    const factor = (timeFactor + index * 0.2) % 1;  // 각 색상에 대한 오프셋
    return interpolateColor(factor, startColor, endColor);
  });

  // 그라데이션 스트링 구성
  const gradient = `linear-gradient(to left, ${gradientColors.join(', ')})`;
  textElement.style.background = gradient;
  textElement.style.webkitBackgroundClip = 'text';
  textElement.style.webkitTextFillColor = 'transparent';
  requestAnimationFrame(updateGradient);
}
requestAnimationFrame(updateGradient);

// 색상 보간 함수
function interpolateColor(t, start, end) {
  const [r1, g1, b1] = hexToRgb(start);
  const [r2, g2, b2] = hexToRgb(end);
  const r = Math.round(r1 + (r2 - r1) * easeInOutQuad(t));
  const g = Math.round(g1 + (g2 - g1) * easeInOutQuad(t));
  const b = Math.round(b1 + (b2 - b1) * easeInOutQuad(t));
  return `rgb(${r}, ${g}, ${b})`;
}

// 이징 함수
function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
}

// 16진수 색상을 RGB로 변환
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return [r, g, b];
}