diff --git a/public/css/main-site.min.css b/public/css/main-site.min.css
index d332dc5..cbd7a2e 100644
--- a/public/css/main-site.min.css
+++ b/public/css/main-site.min.css
@@ -65,6 +65,7 @@
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --blur-xl: 24px;
@@ -782,6 +783,10 @@
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .hover\:bg-blue-700 {
     &:hover {
       @media (hover: hover) {
diff --git a/public/js/app.js b/public/js/app.js
index 4f1fafe..b9bf58a 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -28,7 +28,11 @@ document.addEventListener('DOMContentLoaded', () => {
     'enable-status'
   ];
 
+
+
   const sections = document.querySelectorAll('.section-bg');
+  
+
   const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry, index) => {
           if (entry.isIntersecting) {
@@ -39,6 +43,13 @@ document.addEventListener('DOMContentLoaded', () => {
       });
   }, { threshold: 0.1 });
 
+  sections.forEach(section => {
+    section.style.transform = 'translateY(30px)';
+    section.style.opacity = '0';
+    section.style.transition = 'transform 0.7s ease-out, opacity 0.7s ease-out';
+    observer.observe(section);
+});
+
   
   function throttle(fn, wait) {
       let lastTime = 0;
@@ -56,6 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const mobileNav = document.querySelector('[data-mobile-nav]');
   const navLinks = mobileNav.querySelectorAll('a');
   
+  
   // Debounce function to prevent rapid clicks
   function debounce(fn, wait) {
       let timeout;
diff --git a/public/js/main_app.js b/public/js/main_app.js
index 3557b21..d07e5f2 100644
--- a/public/js/main_app.js
+++ b/public/js/main_app.js
@@ -1,3 +1,21 @@
+const sections = document.querySelectorAll('.section-bg');
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry, index) => {
+        if (entry.isIntersecting) {
+            entry.target.style.transform = 'translateY(0)';
+            entry.target.style.opacity = '1';
+            entry.target.style.transitionDelay = `${index * 0.1}s`;
+        }
+    });
+}, { threshold: 0.1 });
+
+sections.forEach(section => {
+    section.style.transform = 'translateY(30px)';
+    section.style.opacity = '0';
+    section.style.transition = 'transform 0.7s ease-out, opacity 0.7s ease-out';
+    observer.observe(section);
+});
+
 const PARTICLE_POOL_SIZE = 50;
 const particlePool = [];
 const activeParticles = new Set();
@@ -62,23 +80,6 @@ function throttle(fn, wait) {
     };
 }
 
-if (window.location.href === 'https://my-mc.link' || window.location.href === 'https://my-mc.link/') {
-    const hero = document.querySelector('.hero-bg');
-    if (hero) {
-        const heroImg = hero.querySelector('img');
-        if (heroImg) {
-            window.addEventListener(
-                'scroll',
-                throttle(() => {
-                    const scrollPosition = window.pageYOffset;
-                    if (heroImg.style.display === 'block') {
-                        heroImg.style.transform = `translate(-50%, calc(-50% + ${scrollPosition * 0.3}px)) scale(1.2)`;
-                    }
-                }, 16)
-            );
-        }
-    }
-}
 
 const buttons = document.querySelectorAll('.btn-minecraft');
 buttons.forEach(button => {
@@ -125,4 +126,5 @@ document.addEventListener('click', (e) => {
         mobileNav.classList.remove('active');
         hamburger.classList.remove('active');
     }
-});
\ No newline at end of file
+});
+