feat: premium motion system — scroll reveal, hero cascade, gold accents

src/layouts/MainLayout.astro

@@ -8,6 +8,7 @@ import '../styles/base.css';
 import '../styles/layout.css';
 import '../styles/components.css';
 import '../styles/utilities.css';
+import '../styles/animations.css';
 
 interface Props {
   title: string;
@@ -49,5 +50,36 @@ const {
     <SiteFooter />
     <WhatsAppButton />
     <CookieBanner />
+
+    <script>
+      // ─── INTERSECTION OBSERVER ───────────────────
+      const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+      if (!prefersReduced) {
+        const io = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                entry.target.classList.add('visible');
+                io.unobserve(entry.target);
+              }
+            });
+          },
+          { threshold: 0.1, rootMargin: '0px 0px -48px 0px' }
+        );
+
+        document.querySelectorAll('.reveal, .reveal-left, .reveal-scale, .gold-line, .section-eyebrow').forEach((el) => {
+          io.observe(el);
+        });
+      }
+
+      // ─── HEADER SCROLL ELEVATION ─────────────────
+      const header = document.querySelector('.site-header') as HTMLElement | null;
+      if (header) {
+        window.addEventListener('scroll', () => {
+          header.classList.toggle('is-scrolled', window.scrollY > 16);
+        }, { passive: true });
+      }
+    </script>
   </body>
 </html>