-

Co-authored-by: Copilot <copilot@github.com>

index.php

@@ -37,6 +37,10 @@
                     <li><a href="#lette" class="nav-link">La Ciociara</a></li>
                 </ul>
             </nav>
+
+            <a href="index.php" class="logo-link">
+                <img src="img/woman-hair.png" alt="Logo" class="header-logo">
+            </a>
         </div>
     </header>
 
@@ -95,6 +99,28 @@
             </div>
         </div>
     </footer>
+
+    <script>
+        const observerOptions = {
+            root: null,
+            rootMargin: '-30% 0px -35% 0px', // Attiva l'effetto quando l'elemento è nella fascia centrale
+            threshold: 0
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('active');
+                } else {
+                    entry.target.classList.remove('active');
+                }
+            });
+        }, observerOptions);
+
+        document.querySelectorAll('.markdown-body p, .markdown-body li').forEach(el => {
+            observer.observe(el);
+        });
+    </script>
 </body>
 
 </html>