Update CSS will-change property and add min-height to hero section; enhance JS card animation with reduced motion support

theme/assets/css/main.css

@@ -560,7 +560,7 @@ p:last-child { margin-bottom: 0; }
   animation: dc-breathe 8s ease-in-out infinite;
   pointer-events: none;
   display: block;
-  will-change: transform;
+  will-change: filter;
 }
 
 .hero-overlay {
@@ -2061,6 +2061,7 @@ p:last-child { margin-bottom: 0; }
   border: none !important;
   border-radius: 0;
   aspect-ratio: unset;
+  min-height: 300px;
   padding: 0;
   overflow: visible;
   position: relative;

theme/assets/js/main.js

@@ -119,7 +119,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
   /* ── Animate cards on scroll ────────────────────────────── */
   const cards = document.querySelectorAll('.oribi-card, .feature-card, .industry-card, .pricing-card, .value-card, .platform-row');
-  if (cards.length && 'IntersectionObserver' in window) {
+  if (cards.length && 'IntersectionObserver' in window &&
+      !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
     cards.forEach(c => { c.style.opacity = '0'; c.style.transform = 'translateY(24px)'; c.style.transition = 'opacity .5s ease, transform .5s ease'; });
     const io = new IntersectionObserver((entries) => {
       entries.forEach(entry => {
@@ -129,7 +130,7 @@ document.addEventListener('DOMContentLoaded', () => {
           io.unobserve(entry.target);
         }
       });
-    }, { threshold: 0.1 });
+    }, { threshold: 0.1, rootMargin: '0px 0px 60px 0px' });
     cards.forEach(c => io.observe(c));
   }
 });