(() => {
  const heroes = document.querySelectorAll("[data-section-hero]");
  if (!heroes.length) return;

  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reducedMotion) return;

  heroes.forEach((hero) => {
    const config = hero.classList.contains("section-hero--projects")
      ? { pathPad: 22, duration: 2800, durationRange: 2200, delay: 250, delayRange: 1100, start: 250, stagger: 500, edgeOpacity: 0.18, liveOpacity: 0.8, glitch: 9000 }
      : hero.classList.contains("section-hero--articles")
        ? { pathPad: 20, duration: 2600, durationRange: 2200, delay: 300, delayRange: 1000, start: 250, stagger: 550, edgeOpacity: 0.15, liveOpacity: 0.78, glitch: 9800 }
        : { pathPad: 20, duration: 2400, durationRange: 2300, delay: 250, delayRange: 900, start: 200, stagger: 520, edgeOpacity: 0.14, liveOpacity: 0.8, glitch: 7600 };

    hero.querySelectorAll(".section-hero__packet").forEach((packet, index) => {
      if (typeof packet.animate !== "function") return;

      const length = packet.getTotalLength();

      const animate = () => {
        const reverse = Math.random() > 0.5;
        const from = reverse ? -(length + config.pathPad) : config.pathPad;
        const to = reverse ? config.pathPad : -(length + config.pathPad);
        const duration = config.duration + Math.random() * config.durationRange;
        const animation = packet.animate(
          [
            { strokeDashoffset: String(from), opacity: config.edgeOpacity },
            { offset: 0.15, opacity: config.liveOpacity },
            { offset: 0.85, opacity: config.liveOpacity },
            { strokeDashoffset: String(to), opacity: hero.classList.contains("section-hero--projects") ? 0.15 : 0.12 },
          ],
          { duration, easing: "linear" },
        );

        if (animation.finished) {
          animation.finished
            .then(() => window.setTimeout(animate, config.delay + Math.random() * config.delayRange))
            .catch(() => {});
        } else {
          window.setTimeout(animate, duration + config.delay + Math.random() * config.delayRange);
        }
      };

      window.setTimeout(animate, config.start + index * config.stagger);
    });

    window.setInterval(() => {
      hero.classList.remove("is-glitching");
      void hero.offsetWidth;
      hero.classList.add("is-glitching");
    }, config.glitch);
  });
})();