//Создаем объекты IntersectionObserver и lottie для каждой анимации
const observer1 = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      anim1.play();
    } else {
      anim1.stop();
    }
  });
});

const lottieAnimationElement1 = document.getElementById('lottie-anim1');
const anim1 = lottie.loadAnimation({
  // container: document.getElementById('lottie-anim1'),
  // path: './img/_src/header/phone-animate.json',
  container: lottieAnimationElement1,
  path: lottieAnimationElement1.getAttribute('data-url'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  name: "anims1",
});

const observer2 = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      anim2.play();
    } else {
      anim2.stop();
    }
  });
});

const lottieAnimationElement2 = document.getElementById('lottie-anim2');
const anim2 = lottie.loadAnimation({
  container: lottieAnimationElement2,
  path: lottieAnimationElement2.getAttribute('data-url'),
  renderer: 'svg',
  loop: true,
  autoplay: false,
  name: "anims2",
});

const observer3 = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      anim3.play();
    } else {
      anim3.stop();
    }
  });
});

const lottieAnimationElement3 = document.getElementById('lottie-anim3');
const anim3 = lottie.loadAnimation({
  container: lottieAnimationElement3,
  path: lottieAnimationElement3.getAttribute('data-url'),
  renderer: 'svg',
  loop: true,
  autoplay: false,
  name: "anims3",
});

const observer4 = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      anim4.play();
    } else {
      anim4.stop();
    }
  });
});

const lottieAnimationElement4 = document.getElementById('lottie-anim4');
const anim4 = lottie.loadAnimation({
  container: lottieAnimationElement4,
  path: lottieAnimationElement4.getAttribute('data-url'),
  renderer: 'svg',
  loop: true,
  autoplay: false,
  name: "anims4",
});

const observer5 = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      anim5.play();
    } else {
      anim5.stop();
    }
  });
});

const lottieAnimationElement5 = document.getElementById('lottie-anim5');
const anim5 = lottie.loadAnimation({
  container: lottieAnimationElement5,
  path: lottieAnimationElement5.getAttribute('data-url'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  name: "anims5",
});

// Добавляем элементы, которые нужно отслеживать
observer1.observe(document.querySelector('.anim1'));
observer2.observe(document.querySelector('.anim2'));
observer3.observe(document.querySelector('.anim3'));
observer4.observe(document.querySelector('.anim4'));
observer5.observe(document.querySelector('.anim5'));

// Обработчик событий для событий scroll и resize
window.addEventListener('scroll', () => {
  observer1.observe(document.querySelector('.anim1'));
  observer2.observe(document.querySelector('.anim2'));
  observer3.observe(document.querySelector('.anim3'));
  observer4.observe(document.querySelector('.anim4'));
  observer5.observe(document.querySelector('.anim5'));
});

window.addEventListener('resize', () => {
  observer1.observe(document.querySelector('.anim1'));
  observer2.observe(document.querySelector('.anim2'));
  observer3.observe(document.querySelector('.anim3'));
  observer4.observe(document.querySelector('.anim4'));
  observer5.observe(document.querySelector('.anim5'));
});


//число от 0 до 1000
let count = 1;
const numberElement = document.getElementById('number');
var intervalId = null;
function increaseNumber() {
	numberElement.innerHTML = count;
	count++;

	if (count > 1000) {
    numberElement.innerHTML = 1000;
		clearInterval(intervalId);
	}
}

if(window.innerWidth > 800)
{
  intervalId = setInterval(increaseNumber, 1);
} else 
{
  numberElement.innerHTML = 1000;
}