function setLogoContainerSize() {
    let svgContainer = document.querySelector('#logo-animated');
    let svgElement = document.querySelector('#logo-animated svg');
    svgContainer.style.height = `${svgElement.clientHeight}px`;
  }
  setLogoContainerSize();
  window.addEventListener('resize', setLogoContainerSize);
  console.log('animated');

  let chemins = document.querySelectorAll('#logo-animated svg path');
  for (let chemin of chemins) {
    let length = chemin.getTotalLength();
    chemin.style.strokeDasharray = length;
    chemin.style.strokeDashoffset = length;
  }

  
  let consultationCouleur = document.querySelector('#consultation-couleur');
  let consultationNoir = document.querySelector('#consultation-noir');
  
  let quartierCouleur = document.querySelector('#quartier-couleur');
  let quartierNoir = document.querySelector('#quartier-noir');
  
  let consultationTranslate = 200;
  let quartierTranslate = -200;

  function startCountdown() {
    let startTime;
    let animationTime = 1800;

    function animate(timestamp) {
      if (!startTime) startTime = timestamp;
      const elapsedTime = timestamp - startTime;

      if (elapsedTime <= animationTime) {
        const animationPercent = elapsedTime / animationTime;
        animateLogo(animationPercent);
        requestAnimationFrame(animate);
      } else {
        animateLogo(1);
      }

    }
    requestAnimationFrame(animate);
  }

  // function animateLogo(animationPercent) {
  //   for (let i = 0; i < chemins.length; i++) {
  //     let draw = chemins[i].getTotalLength() * animationPercent;
  //     chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;
  //     chemins[i].style.opacity = Math.min(animationPercent * ((chemins.length - 1) / i), 1);
  //   }
  //   let animationPercentCouleur = Math.min(animationPercent / 0.5, 1);
  //   let animationPercentNoir = Math.max((animationPercent - 0.4) / 0.6, 0);

  //   consultationCouleur.style.opacity = animationPercentCouleur;
  //   consultationNoir.style.opacity = animationPercentNoir;
  //   quartierCouleur.style.opacity = animationPercentCouleur;
  //   quartierNoir.style.opacity = animationPercentNoir;

  //   consultationNoir.style.transform = `translate(${consultationTranslate * (animationPercent - 1)}px, ${consultationTranslate * (animationPercent - 1)}px)`;

  //   quartierNoir.style.transform = `translate(${quartierTranslate * (animationPercent - 1)}px, ${quartierTranslate * (animationPercent - 1)}px)`;
  // }

  function animateLogo(animationPercent) {
    // Calcul du pourcentage de l'animation principale
    let mainAnimationPercent = animationPercent;

    // Décalage pour l'animation des éléments noir
    let noirDelay = 0.7; // Exemple de décalage de 30% de l'animation principale
    let noirQuartierDelay = 0.1; // Exemple de décalage de 30% de l'animation principale

    // Calcul du pourcentage de l'animation pour les éléments noir avec décalage
    let animationPercentNoir = Math.max((mainAnimationPercent - noirDelay) / (1 - noirDelay), 0);

    for (let i = 0; i < chemins.length; i++) {
        let draw = chemins[i].getTotalLength() * mainAnimationPercent;
        chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;
        chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1);
    }
    let animationPercentCouleur = Math.min(mainAnimationPercent / 0.5, 1);

    let animationPercentNoirQuartier = Math.max((mainAnimationPercent - noirQuartierDelay) / (1 - noirQuartierDelay), 0);

    for (let i = 0; i < chemins.length; i++) {
        let draw = chemins[i].getTotalLength() * mainAnimationPercent;
        chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;
        chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1);
    }
    consultationCouleur.style.opacity = animationPercentCouleur;
    consultationNoir.style.opacity = animationPercentNoir;
    quartierCouleur.style.opacity = animationPercentCouleur;
    quartierNoir.style.opacity = animationPercentNoirQuartier;

    // Décalage des éléments noir dans le temps
    consultationNoir.style.transform = `translate(${consultationTranslate * (mainAnimationPercent - 1)}px, ${consultationTranslate * (mainAnimationPercent - 1)}px)`;
    quartierNoir.style.transform = `translate(${quartierTranslate * (mainAnimationPercent - 1)}px, ${quartierTranslate * (mainAnimationPercent - 1)}px)`;
}



  window.addEventListener('load', startCountdown);