diff --git a/index.php b/index.php
index 711e7d7..51d732a 100644
--- a/index.php
+++ b/index.php
@@ -69,6 +69,7 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
       overflow: hidden;
       filter: blur(50px);
       opacity: 0.5;
+      transition: transform 0.5s ease-out;
     }
 
     .aurora-background .aurora {
@@ -261,7 +262,11 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
       text-align: center;
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
-      transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
+      transition: transform 0.4s ease-out, box-shadow 0.4s, border-color 0.4s, opacity 0.6s ease-out;
+    }
+    .feature-card.hidden {
+        opacity: 0;
+        transform: translateY(30px);
     }
     .feature-card:hover {
       transform: translateY(-10px);
@@ -351,21 +356,21 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
 
   <section class="features-section container">
     <div class="features-grid">
-      <div class="feature-card">
+      <div class="feature-card hidden">
         <div class="feature-icon">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
         </div>
         <h3>AI-Powered Scripting</h3>
         <p>Generate compelling narratives and dialogue from a simple prompt.</p>
       </div>
-      <div class="feature-card">
+      <div class="feature-card hidden">
         <div class="feature-icon">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><path d="M10 8v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"/></svg>
         </div>
         <h3>Visual Generation</h3>
         <p>Transform your script into stunning visual scenes and character designs.</p>
       </div>
-      <div class="feature-card">
+      <div class="feature-card hidden">
         <div class="feature-icon">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12a8 8 0 0 1 8-8 8 8 0 0 1 8 8"/><path d="M12 22c4.42 0 8-3.58 8-8"/><path d="M4 12a8 8 0 0 0 8 8"/></svg>
         </div>
@@ -379,5 +384,33 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
     <p>&copy; <?= date('Y') ?> AuraStudio. All Rights Reserved.</p>
   </footer>
 
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const auroraBg = document.querySelector('.aurora-background');
+      const featureCards = document.querySelectorAll('.feature-card.hidden');
+
+      const handleScroll = () => {
+        // Parallax effect for aurora background
+        const scrollY = window.scrollY;
+        auroraBg.style.transform = `translateY(${scrollY * 0.3}px)`;
+
+        // Fade-in for feature cards
+        featureCards.forEach(card => {
+          const cardTop = card.getBoundingClientRect().top;
+          const triggerPoint = window.innerHeight * 0.9;
+
+          if (cardTop < triggerPoint) {
+            card.classList.remove('hidden');
+          }
+        });
+      };
+
+      window.addEventListener('scroll', handleScroll, { passive: true });
+      
+      // Trigger once on load in case features are already in view
+      handleScroll();
+    });
+  </script>
+
 </body>
 </html>
\ No newline at end of file