{{ define "navigation" }}
{{ partial "body/navigation.html" . }}
{{ end }}

{{ define "hero" }}

{{ partial "body/hero.html" . }}

{{ end }}

{{ define "main" }}
<main>

<style>
@media (max-width: 768px) {
  /* Apply grayscale to the root HTML element (affects children) */
  html {
    filter: grayscale(100%);
    transition: filter 5s ease;
  }

  /* Color mode (when scrolling) */
  html.color-mode {
    filter: grayscale(0%);
  }

  /* Fix for child elements inheriting filters incorrectly */
  html * {
    filter: none !important; /* Prevents double-filtering */
  }
}
</style>
<script>

// Wait for the page to fully load
document.addEventListener('DOMContentLoaded', () => {
  // Check if mobile AND touch device (dual verification)
  const isMobile = window.matchMedia("(max-width: 768px)").matches;
  const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

  if (isMobile && isTouch) {
    const html = document.documentElement;
    let scrollTimeout;
    let lastScrollTime = 0;

    // Handle both touch AND scroll for compatibility
    window.addEventListener('scroll', handleScroll, { passive: true });
    window.addEventListener('touchmove', handleScroll, { passive: true });

    function handleScroll() {
      const now = Date.now();

      // Throttle events to improve performance
      if (now - lastScrollTime < 50) return; // 50ms throttle
      lastScrollTime = now;

      html.classList.add('color-mode');
      clearTimeout(scrollTimeout);

      // Longer delay for touch momentum (2 seconds)
      scrollTimeout = setTimeout(() => {
        html.classList.remove('color-mode');
      }, 2000);
    }

    // Reset on touch end (for immediate feedback)
    window.addEventListener('touchend', () => {
      scrollTimeout = setTimeout(() => {
        html.classList.remove('color-mode');
      }, 500); // Shorter delay after touch ends
    }, { passive: true });
  }
});

</script>
{{ partial "body/now.html" . }}

{{ partial "body/discog.html" . }}

{{ partial "body/radio.html" . }}

{{ partial "body/gancio.html" . }}

{{ partial "body/gang.html" . }}

{{ partial "body/peertube.html" . }}

</main>
{{ end }}

{{ define "footer"}}

{{ partial "footer/footer.html" . }}

{{ end }}