squash and nuke dev

src/config/styling/animations_helper.ts

@@ -0,0 +1,69 @@
+export function initAnimations() {
+  const observerOptions = {
+    root: null,
+    rootMargin: "0px",
+    threshold: 0.1,
+  };
+
+  const observer = new IntersectionObserver(
+    (entries, observer) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("visible");
+          observer.unobserve(entry.target);
+        }
+      });
+    },
+    observerOptions
+  );
+
+  const animatedElements = document.querySelectorAll(
+    ".animate-fade-up, .stagger-parent"
+  );
+  animatedElements.forEach(el => observer.observe(el));
+}
+
+export function initTOCHighlighting() {
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      const heading = entry.target.querySelector(
+        "h1, h2, h3, h4, h5, h6"
+      );
+      if (heading) {
+        const id = heading.id;
+        const desktopElement = document.querySelector(
+          `.toc-wrapper li a[href="#${id}"]`
+        );
+        const mobileElement = document.querySelector(
+          `.toc-wrapper-mobile li a[href="#${id}"]`
+        );
+
+        if (entry.isIntersecting) {
+          desktopElement?.parentElement?.classList.add("active");
+          mobileElement?.parentElement?.classList.add("active");
+        } else {
+          desktopElement?.parentElement?.classList.remove(
+            "active"
+          );
+          mobileElement?.parentElement?.classList.remove(
+            "active"
+          );
+        }
+      }
+    });
+  });
+
+  document
+    .querySelectorAll("section[data-heading-rank]")
+    .forEach(section => {
+      observer.observe(section);
+    });
+}
+
+// auto-init on DOMContentLoaded
+if (typeof document !== "undefined") {
+  document.addEventListener("DOMContentLoaded", () => {
+    initAnimations();
+    initTOCHighlighting();
+  });
+}