Improve homepage layout and animations for mobile devices

Update CSS and JavaScript to enhance mobile responsiveness, fix image alignment issues, and refine animations for a better user experience on smaller screens.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 8e995c99-f0dc-4535-89de-ddffaca13380
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 9c30b65d-1fff-4139-8042-cad809186f1b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/e2c5cd18-6007-4bb1-a111-e14cc125923d/8e995c99-f0dc-4535-89de-ddffaca13380/imQgZBK
Replit-Helium-Checkpoint-Created: true

css/enhance.css

@@ -939,8 +939,8 @@ body {
 }
 
 /* ============================================================
-   MOBILE POLISH v2 — Comprehensive phone & tablet refinements
+   MOBILE POLISH v3 — Comprehensive phone & tablet refinements
-   These rules come last so they win the cascade cleanly.
+   Loaded last so every rule wins the cascade cleanly.
    ============================================================ */
 
 /* ---- Shared utility: word-wrap for long strings ---- */
@@ -956,43 +956,54 @@ body {
    ============================================================ */
 @media (max-width: 991px) {
 
-    /* About section on home: remove left margin that persists */
+    /* About section: remove left margin */
     .about-content {
         margin-left: 0 !important;
     }
 
-    /* Mission section: stack order — text first, image below */
+    /* About section padding */
-    .our-mission .row {
+    .about-us {
-        flex-direction: column !important;
+        padding: 60px 0 !important;
     }
 
-    .our-mission .col-lg-6 {
+    /* Mission image outer container: full width */
+    .mission-image {
+        margin-top: 36px !important;
         width: 100% !important;
-        max-width: 100% !important;
     }
 
-    /* Mission image at tablet: clear the circle-offset padding */
+    /* Mission img inner: CLEAR the decorative left/bottom offset
+       (the life circle is hidden at 1024px — its padding is dead weight) */
     .mission-img {
-        padding: 0 0 0 0 !important;
+        padding: 0 !important;
-        text-align: center !important;
+        text-align: left !important;
-        margin-top: 30px !important;
     }
 
     .mission-img figure,
     .mission-img img {
         aspect-ratio: 16 / 9 !important;
-        border-radius: 0 0 50px 0 !important;
+        width: 100% !important;
+        border-radius: 0 0 60px 0 !important;
     }
 
-    /* CTA box: centre button at tablet */
+    /* CTA box: centre button */
     .cta-box-btn {
         text-align: center !important;
         margin-top: 24px !important;
     }
 
-    /* About us section padding tighter at tablet */
+    /* Counter: remove dividers between stacked items */
-    .about-us {
+    .counter-item {
-        padding: 60px 0 !important;
+        border-right: none !important;
+        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
+        padding-bottom: 20px !important;
+        margin-bottom: 20px !important;
+    }
+
+    .counter-box .col-lg-3:last-child .counter-item {
+        border-bottom: none !important;
+        padding-bottom: 0 !important;
+        margin-bottom: 0 !important;
     }
 }
 
@@ -1001,13 +1012,11 @@ body {
    ============================================================ */
 @media (max-width: 767px) {
 
-    /* --- Hero: pull padding WAY in --- */
+    /* ── Hero ── */
     .hero {
-        padding: 105px 0 70px !important;
+        padding: 130px 0 60px !important;
-        margin-top: -75px !important;
     }
 
-    /* --- Hero: center the CTA buttons --- */
     .hero-content-body {
         display: flex !important;
         flex-direction: column !important;
@@ -1022,67 +1031,139 @@ body {
         margin-top: 0 !important;
     }
 
-    /* Hero subtitle (h3) — slightly tighter */
     .hero-content .section-title h3 {
-        font-size: 14px !important;
+        font-size: 13px !important;
-        margin-bottom: 16px !important;
+        margin-bottom: 14px !important;
+    }
+
+    .hero-content .section-title h1 {
+        font-size: 36px !important;
+        line-height: 1.15 !important;
     }
 
-    /* Hero paragraph text: max-width on mobile */
     .hero-content .section-title p {
         font-size: 15px !important;
-        max-width: 85% !important;
+        max-width: 88% !important;
         margin-left: auto !important;
         margin-right: auto !important;
     }
 
-    /* --- Mission image: no decorative offset (life circle is hidden) --- */
+    /* ── Section titles ── */
-    .mission-img {
+    .section-title h2 {
-        padding: 0 !important;
+        font-size: 30px !important;
-        text-align: center !important;
+        line-height: 1.22 !important;
-        margin-top: 28px !important;
-        margin-bottom: 0 !important;
     }
 
-    .mission-img figure,
+    .section-title h3 {
-    .mission-img img {
+        font-size: 12px !important;
-        aspect-ratio: 16 / 9 !important;
+        letter-spacing: 0.06em !important;
-        border-radius: 0 0 40px 0 !important;
     }
 
-    /* --- Mission content: centre-align the sub-label + heading --- */
+    /* ── About section ── */
-    .mission-content .section-title {
-        text-align: center !important;
-    }
-
-    /* Keep the decorative icon visible when centred */
-    .mission-content .section-title h3 {
-        padding-left: 25px !important;
-    }
-
-    /* Mission footer: centre the CTA button */
-    .mission-content-footer {
-        text-align: center !important;
-        margin-top: 20px !important;
-    }
-
-    /* --- About section (home): tighten + centre footer btn --- */
     .about-us {
         padding: 50px 0 !important;
     }
 
     .about-us-footer {
         text-align: center !important;
-        margin-top: 8px !important;
+        margin-top: 10px !important;
     }
 
-    /* About content body: 1 column gap fix */
     .about-content-body {
-        gap: 16px !important;
+        gap: 14px !important;
-        margin-bottom: 28px !important;
+        margin-bottom: 26px !important;
     }
 
-    /* --- CTA box: centre everything --- */
+    /* ── Counter section ── */
+    /* 2 per row on phones via the col-sm-6 Bootstrap class — keep dividers clean */
+    .counter-title h2 {
+        font-size: 42px !important;
+    }
+
+    .counter-content h3 {
+        font-size: 16px !important;
+    }
+
+    .counter-box {
+        border-radius: 0 0 60px 0 !important;
+        padding: 30px 10px !important;
+    }
+
+    /* Reset right borders; add bottom separators between rows */
+    .counter-item {
+        border-right: none !important;
+        padding-right: 0 !important;
+        padding-bottom: 18px !important;
+        margin-bottom: 18px !important;
+        border-bottom: 1px solid rgba(255,255,255,0.18) !important;
+    }
+
+    .counter-box .col-sm-6:nth-child(3) .counter-item,
+    .counter-box .col-sm-6:nth-child(4) .counter-item {
+        border-bottom: none !important;
+        padding-bottom: 0 !important;
+        margin-bottom: 0 !important;
+    }
+
+    /* Add a vertical divider between the 2 items in each row */
+    .counter-box .col-sm-6:nth-child(odd) .counter-item {
+        border-right: 1px solid rgba(255,255,255,0.18) !important;
+        padding-right: 10px !important;
+    }
+
+    /* ── Mission section ── */
+    .mission-content .section-title {
+        text-align: left !important;
+    }
+
+    .mission-content-footer {
+        margin-top: 20px !important;
+    }
+
+    /* CORE FIX: clear the decorative padding on .mission-img (inner wrapper)
+       that shifts the image 80px to the right — life circle is hidden at mobile */
+    .mission-img {
+        padding: 0 !important;
+        text-align: left !important;
+    }
+
+    .mission-img figure,
+    .mission-img img {
+        width: 100% !important;
+        aspect-ratio: 16 / 9 !important;
+        border-radius: 0 0 50px 0 !important;
+        object-fit: cover !important;
+    }
+
+    /* Outer container: margin above the image block */
+    .mission-image {
+        margin-top: 32px !important;
+        width: 100% !important;
+        position: relative !important;
+    }
+
+    /* Hide life circle on phones (belt + suspenders with the 1024px rule) */
+    .mission-life-circle {
+        display: none !important;
+    }
+
+    /* ── Services ── */
+    .our-services {
+        padding: 50px 0 20px !important;
+    }
+
+    .service-ticker .scrolling-content span {
+        font-size: 52px !important;
+    }
+
+    /* ── Team images ── */
+    .team-image figure,
+    .team-image img {
+        aspect-ratio: 4 / 3 !important;
+        object-fit: cover !important;
+    }
+
+    /* ── CTA box ── */
     .cta-box-content .section-title {
         text-align: center !important;
     }
@@ -1092,35 +1173,13 @@ body {
         margin-top: 20px !important;
     }
 
-    /* --- Dallas / Austin league links: tighter padding --- */
+    /* ── League links ── */
     .league-links .btn-default {
         font-size: 14px !important;
         padding: 12px 56px 12px 16px !important;
     }
 
-    /* --- Services section: tighter padding --- */
+    /* ── Contact page ── */
-    .our-services {
-        padding: 50px 0 20px !important;
-    }
-
-    /* Service items: centre footer row */
-    .service-footer {
-        align-items: flex-start !important;
-    }
-
-    /* --- Service ticker: smaller on phone --- */
-    .service-ticker .scrolling-content span {
-        font-size: 52px !important;
-    }
-
-    /* --- Teams grid: consistent image heights on mobile --- */
-    .team-image figure,
-    .team-image img {
-        aspect-ratio: 4 / 3 !important;
-        object-fit: cover !important;
-    }
-
-    /* --- Contact page: email wrapping --- */
     .contact-info-content h3 {
         font-size: 14px !important;
         word-break: break-word !important;
@@ -1128,13 +1187,12 @@ body {
         line-height: 1.4 !important;
     }
 
-    /* Contact info items: tighter layout */
     .contact-info-item {
         padding: 16px !important;
         gap: 14px !important;
     }
 
-    /* --- Footer: email address wrapping --- */
+    /* ── Footer ── */
     .footer-info-box-content p {
         font-size: 12px !important;
         word-break: break-word !important;
@@ -1142,17 +1200,14 @@ body {
         line-height: 1.5 !important;
     }
 
-    /* Footer info icon: keep it from shrinking */
     .footer-info-box .icon-box {
         flex-shrink: 0 !important;
     }
 
-    /* Footer links col: tighter spacing */
     .footer-links {
         margin-bottom: 28px !important;
     }
 
-    /* Footer copyright: already centred in custom.css but reinforce */
     .footer-copyright-text {
         text-align: center !important;
         margin-bottom: 8px !important;
@@ -1162,7 +1217,7 @@ body {
         text-align: center !important;
     }
 
-    /* --- Sponsors section: ensure 2-col grid on phones --- */
+    /* ── Sponsors ── */
     .sponsors-logo-grid {
         display: flex !important;
         flex-wrap: wrap !important;
@@ -1176,18 +1231,13 @@ body {
         min-width: 0 !important;
     }
 
-    /* --- Page header (inner pages): tighter heading --- */
+    /* ── Inner page header ── */
     .page-header-box h1 {
         font-size: 38px !important;
         line-height: 1.2 !important;
     }
 
-    /* --- Section row: less bottom margin --- */
+    /* ── About page: founders signature ── */
-    .section-row {
-        margin-bottom: 28px !important;
-    }
-
-    /* --- About page: founders signature wrap fix --- */
     .pastors-signature {
         flex-wrap: wrap !important;
         gap: 12px !important;
@@ -1208,118 +1258,133 @@ body {
    ============================================================ */
 @media (max-width: 575px) {
 
-    /* --- Hero: even smaller padding --- */
+    /* ── Hero ── */
     .hero {
-        padding: 90px 0 55px !important;
+        padding: 120px 0 50px !important;
     }
 
-    /* Hero h1: readable on tiny screens */
+    .hero-content .section-title h1 {
-    .section-title h1,
-    .hero-content h1 {
         font-size: 28px !important;
-        line-height: 1.2 !important;
+        line-height: 1.18 !important;
     }
 
-    /* --- Hero buttons: CENTRE (override the flex-start from earlier block) --- */
     .hero-content-body {
         align-items: center !important;
         gap: 12px !important;
     }
 
-    /* Hero paragraph: full width on tiny phones */
     .hero-content .section-title p {
         max-width: 100% !important;
         font-size: 14px !important;
     }
 
-    /* --- Section headings --- */
+    /* ── Section headings ── */
     .section-title h2 {
         font-size: 24px !important;
-        line-height: 1.28 !important;
+        line-height: 1.25 !important;
     }
 
     .section-title h3 {
-        font-size: 13px !important;
+        font-size: 11px !important;
-        margin-bottom: 12px !important;
+        margin-bottom: 10px !important;
     }
 
-    /* --- Section row spacing --- */
+    /* ── Buttons ── */
-    .section-row {
-        margin-bottom: 22px !important;
-    }
-
-    /* --- Btn-default: compact on tiny phones --- */
     .btn-default {
-        font-size: 14px !important;
+        font-size: 13px !important;
         padding: 12px 52px 12px 14px !important;
     }
 
-    /* --- Counter heading --- */
+    /* ── Counter ── */
     .counter-title h2 {
-        font-size: 32px !important;
+        font-size: 36px !important;
     }
 
-    /* --- Service ticker: smaller --- */
+    .counter-content h3 {
+        font-size: 14px !important;
+        margin-bottom: 8px !important;
+    }
+
+    /* At 575px, items become col-12 (1 per row) — switch back to horizontal dividers */
+    .counter-item {
+        border-right: none !important;
+        border-bottom: 1px solid rgba(255,255,255,0.18) !important;
+        padding-bottom: 16px !important;
+        margin-bottom: 16px !important;
+    }
+
+    .counter-box .col-sm-6:nth-child(odd) .counter-item {
+        border-right: none !important;
+        padding-right: 0 !important;
+    }
+
+    /* ── Mission image ── */
+    .mission-img {
+        padding: 0 !important;
+    }
+
+    .mission-img figure,
+    .mission-img img {
+        aspect-ratio: 4 / 3 !important;
+        border-radius: 0 0 36px 0 !important;
+    }
+
+    /* ── Service ticker ── */
     .service-ticker .scrolling-content span {
-        font-size: 42px !important;
+        font-size: 38px !important;
     }
 
-    /* --- CTA box heading --- */
+    /* ── CTA box ── */
     .cta-box-content .section-title h2 {
         font-size: 20px !important;
-        line-height: 1.3 !important;
+        line-height: 1.28 !important;
     }
 
-    /* --- Page header heading --- */
+    /* ── Page header ── */
     .page-header-box h1 {
-        font-size: 30px !important;
+        font-size: 28px !important;
     }
 
-    /* --- League links: full readability --- */
+    /* ── About content body: 1 column ── */
-    .league-links .btn-default {
+    .about-content-body {
-        font-size: 13px !important;
+        grid-template-columns: 1fr !important;
-        padding: 12px 52px 12px 14px !important;
+        gap: 12px !important;
     }
 
-    /* --- Team card text --- */
+    /* ── Navbar: tighter ── */
-    .team-content h3 {
+    .navbar {
-        font-size: 16px !important;
+        padding: 14px 0 !important;
     }
 
-    .team-content p {
+    /* ── Contact info ── */
-        font-size: 14px !important;
-    }
-
-    /* --- Contact info: stack icon above text on very small --- */
     .contact-info-item {
         align-items: flex-start !important;
     }
 
-    /* --- Sponsor logos: maintain 2 col --- */
+    /* ── Sponsor logos: 2-col ── */
     .sponsor-logo-item {
         flex: 0 0 calc(50% - 8px) !important;
         max-width: calc(50% - 8px) !important;
     }
 
-    /* --- About content body: full 1 column --- */
+    /* ── About page founders ── */
-    .about-content-body {
-        grid-template-columns: 1fr !important;
-        gap: 14px !important;
-    }
-
-    /* --- Mission content body quote line --- */
-    .mission-content-body p {
-        padding-left: 14px !important;
-    }
-
-    /* --- Navbar: tighter on very small phones --- */
-    .navbar {
-        padding: 14px 0 !important;
-    }
-
-    /* Founders: portrait aspect on small phones */
     .pastors-message .about-img-1 img,
     .pastors-message .about-img-2 img {
         aspect-ratio: 3 / 4 !important;
     }
+
+    /* ── League links ── */
+    .league-links .btn-default {
+        font-size: 13px !important;
+        padding: 12px 50px 12px 14px !important;
+    }
+
+    /* ── Team cards ── */
+    .team-content h3 {
+        font-size: 15px !important;
+    }
+
+    .team-content p {
+        font-size: 13px !important;
+    }
 }

js/home-animations.js

@@ -1,6 +1,6 @@
 /* =====================================================
    TSCB — Homepage GSAP Masterpiece
-   Linked ONLY in index.html  |  v1.0
+   Linked ONLY in index.html  |  v2.0 (mobile-aware)
    ===================================================== */
 
 (function () {
@@ -9,14 +9,17 @@
     /* Guard: only run when there is a hero section */
     if (!document.querySelector('.hero')) return;
 
-    /* Register GSAP plugins (safe to call multiple times) */
+    /* Register GSAP plugins */
     gsap.registerPlugin(ScrollTrigger);
 
+    /* ── Mobile detection ── */
+    var isMobile = window.matchMedia('(max-width: 767px)').matches ||
+                   ('ontouchstart' in window && window.innerWidth < 900);
+
     /* ====================================================
-       1.  HERO — ORBS ENTRANCE + MOUSE PARALLAX
+       1.  HERO — ORBS ENTRANCE
        ==================================================== */
 
-    /* Orbs drift in after preloader */
     gsap.from('.hero-orb-1', {
         scale: 0.2, opacity: 0, duration: 2.8,
         ease: 'power3.out', delay: 0.85
@@ -30,14 +33,14 @@
         ease: 'power3.out', delay: 1.3
     });
 
-    /* Orb glow pulse after preloader (subtle depth feel) */
+    /* Orb subtle glow pulse */
     gsap.to('.hero-orb-1', {
         opacity: 0.85, scale: 1.08,
         duration: 3, ease: 'sine.inOut',
         yoyo: true, repeat: -1, delay: 1.8
     });
 
-    /* Orb scroll parallax */
+    /* Orb scroll parallax — desktop + mobile */
     ScrollTrigger.create({
         trigger: '.hero',
         start: 'top top',
@@ -51,95 +54,114 @@
         }
     });
 
-    /* Hero mouse parallax — orbs follow the cursor */
+    /* Hero parallax:
+       Desktop → mouse-follow
+       Mobile  → gentle continuous drift (no cursor needed) */
     var heroEl = document.querySelector('.hero');
-    heroEl.addEventListener('mousemove', function (e) {
+
-        var rect = heroEl.getBoundingClientRect();
+    if (!isMobile) {
-        var xR = (e.clientX - rect.left)  / rect.width  - 0.5;
+        heroEl.addEventListener('mousemove', function (e) {
-        var yR = (e.clientY - rect.top)   / rect.height - 0.5;
+            var rect = heroEl.getBoundingClientRect();
-        gsap.to('.hero-orb-1', { x: xR * 55,  y: yR * 35,  duration: 1.8, ease: 'power2.out', overwrite: 'auto' });
+            var xR = (e.clientX - rect.left)  / rect.width  - 0.5;
-        gsap.to('.hero-orb-2', { x: xR * -40, y: yR * -25, duration: 2.0, ease: 'power2.out', overwrite: 'auto' });
+            var yR = (e.clientY - rect.top)   / rect.height - 0.5;
-        gsap.to('.hero-orb-3', { x: xR * 25,  y: yR * 18,  duration: 1.4, ease: 'power2.out', overwrite: 'auto' });
+            gsap.to('.hero-orb-1', { x: xR * 55,  y: yR * 35,  duration: 1.8, ease: 'power2.out', overwrite: 'auto' });
-    });
+            gsap.to('.hero-orb-2', { x: xR * -40, y: yR * -25, duration: 2.0, ease: 'power2.out', overwrite: 'auto' });
+            gsap.to('.hero-orb-3', { x: xR * 25,  y: yR * 18,  duration: 1.4, ease: 'power2.out', overwrite: 'auto' });
+        });
+    } else {
+        /* Mobile: slow ambient drift on orbs */
+        gsap.to('.hero-orb-2', {
+            x: 30, y: -20,
+            duration: 4, ease: 'sine.inOut',
+            yoyo: true, repeat: -1, delay: 0.5
+        });
+        gsap.to('.hero-orb-3', {
+            x: -20, y: 15, rotate: 20,
+            duration: 5, ease: 'sine.inOut',
+            yoyo: true, repeat: -1, delay: 1
+        });
+    }
 
     /* ====================================================
-       2.  COUNTER SECTION — 3-STAGE DRAMATIC ENTRANCE
+       2.  COUNTER SECTION — single clean entrance
-       (counter-item has no .wow class — safe to animate)
+           (replaces the previous 3-stage cascade that caused
+           the "spasm" effect; waypoints/counterUp still runs)
        ==================================================== */
 
     var counterSection = document.querySelector('.our-counter');
     if (counterSection) {
 
-        /* Stage 1 — the whole box scales in */
+        /* One unified entrance: box scales in, items slide up together */
-        gsap.from('.counter-box', {
+        var counterTl = gsap.timeline({
-            scrollTrigger: { trigger: '.our-counter', start: 'top 78%', once: true },
+            scrollTrigger: {
-            scale: 0.88, opacity: 0, borderRadius: '40px',
+                trigger: '.our-counter',
-            duration: 1.2, ease: 'power4.out',
+                start: 'top 82%',
-            immediateRender: false
+                once: true
+            }
         });
 
-        /* Stage 2 — individual items slide up with stagger */
+        counterTl
-        gsap.from('.counter-item', {
+            .from('.counter-box', {
-            scrollTrigger: { trigger: '.our-counter', start: 'top 78%', once: true },
+                scale: 0.9, opacity: 0,
-            y: 60, opacity: 0,
+                duration: 0.9, ease: 'power3.out',
-            duration: 0.85, stagger: 0.18, delay: 0.25,
+                immediateRender: false
-            ease: 'back.out(1.6)',
+            })
-            immediateRender: false
+            .from('.counter-item', {
-        });
+                y: 40, opacity: 0,
+                duration: 0.65, stagger: 0.12,
+                ease: 'power3.out',
+                immediateRender: false
+            }, '-=0.5');
 
-        /* Stage 3 — counter h2 numbers pop with elastic */
+        /* Counter hover — desktop only */
-        gsap.from('.counter-title h2', {
+        if (!isMobile) {
-            scrollTrigger: { trigger: '.our-counter', start: 'top 78%', once: true },
+            document.querySelectorAll('.counter-item').forEach(function (item) {
-            scale: 0.4, opacity: 0,
+                item.addEventListener('mouseenter', function () {
-            duration: 1.1, stagger: 0.2, delay: 0.55,
+                    gsap.to(item.querySelector('.counter-title h2'), {
-            ease: 'elastic.out(1.1, 0.52)',
+                        scale: 1.12, color: '#d92800',
-            immediateRender: false
+                        duration: 0.35, ease: 'back.out(2)'
-        });
+                    });
-
+                });
-        /* Counter hover — h2 magnify */
+                item.addEventListener('mouseleave', function () {
-        document.querySelectorAll('.counter-item').forEach(function (item) {
+                    gsap.to(item.querySelector('.counter-title h2'), {
-            item.addEventListener('mouseenter', function () {
+                        scale: 1, color: '',
-                gsap.to(item.querySelector('.counter-title h2'), {
+                        duration: 0.5, ease: 'power2.out'
-                    scale: 1.12, color: '#d92800',
+                    });
-                    duration: 0.35, ease: 'back.out(2)'
-                });
-            });
-            item.addEventListener('mouseleave', function () {
-                gsap.to(item.querySelector('.counter-title h2'), {
-                    scale: 1, color: '',
-                    duration: 0.5, ease: 'power2.out'
                 });
             });
+        }
+    }
+
+    /* ====================================================
+       3.  MISSION IMAGE — SCROLL PARALLAX (desktop only)
+           On mobile the parallax y-shift breaks the stacked
+           layout and makes the image float out of place.
+       ==================================================== */
+
+    if (!isMobile) {
+        gsap.to('.mission-img', {
+            scrollTrigger: {
+                trigger: '.our-mission',
+                start: 'top bottom',
+                end: 'bottom top',
+                scrub: 1.8
+            },
+            y: -60, ease: 'none'
+        });
+
+        gsap.to('.mission-life-circle', {
+            scrollTrigger: {
+                trigger: '.our-mission',
+                start: 'top bottom',
+                end: 'bottom top',
+                scrub: 2.5
+            },
+            y: -95, rotate: 35, ease: 'none'
         });
     }
 
     /* ====================================================
-       3.  MISSION IMAGE — SCROLL PARALLAX
+       4.  SERVICE TICKER — FADE IN
-       (the reveal animation in function.js still runs)
-       ==================================================== */
-
-    gsap.to('.mission-img', {
-        scrollTrigger: {
-            trigger: '.our-mission',
-            start: 'top bottom',
-            end: 'bottom top',
-            scrub: 1.8
-        },
-        y: -60, ease: 'none'
-    });
-
-    gsap.to('.mission-life-circle', {
-        scrollTrigger: {
-            trigger: '.our-mission',
-            start: 'top bottom',
-            end: 'bottom top',
-            scrub: 2.5
-        },
-        y: -95, rotate: 35, ease: 'none'
-    });
-
-    /* ====================================================
-       4.  SERVICE TICKER — FADE IN + SUBTLE SCALE
        ==================================================== */
 
     gsap.from('.service-ticker', {
@@ -151,55 +173,63 @@
     });
 
     /* ====================================================
-       5.  SERVICE CARDS — 3D TILT ON HOVER
+       5.  SERVICE CARDS
-       (entrance handled by WOW.js — we layer on tilt only)
+           Desktop → 3D tilt on hover
+           Mobile  → slide-up stagger on scroll
        ==================================================== */
 
-    document.querySelectorAll('.service-item').forEach(function (card) {
+    if (!isMobile) {
-        card.style.transformStyle = 'preserve-3d';
+        document.querySelectorAll('.service-item').forEach(function (card) {
-        card.addEventListener('mousemove', function (e) {
+            card.style.transformStyle = 'preserve-3d';
-            var rect = card.getBoundingClientRect();
+            card.addEventListener('mousemove', function (e) {
-            var rotX = ((e.clientY - rect.top  - rect.height / 2) / (rect.height / 2)) * -10;
+                var rect = card.getBoundingClientRect();
-            var rotY = ((e.clientX - rect.left - rect.width  / 2) / (rect.width  / 2)) *  10;
+                var rotX = ((e.clientY - rect.top  - rect.height / 2) / (rect.height / 2)) * -10;
-            gsap.to(card, {
+                var rotY = ((e.clientX - rect.left - rect.width  / 2) / (rect.width  / 2)) *  10;
-                rotationX: rotX, rotationY: rotY,
+                gsap.to(card, {
-                transformPerspective: 700,
+                    rotationX: rotX, rotationY: rotY,
-                duration: 0.35, ease: 'power2.out', overwrite: 'auto'
+                    transformPerspective: 700,
+                    duration: 0.35, ease: 'power2.out', overwrite: 'auto'
+                });
+            });
+            card.addEventListener('mouseleave', function () {
+                gsap.to(card, {
+                    rotationX: 0, rotationY: 0,
+                    duration: 0.75, ease: 'elastic.out(1, 0.45)', overwrite: 'auto'
+                });
             });
         });
-        card.addEventListener('mouseleave', function () {
+    } else {
-            gsap.to(card, {
+        /* Mobile: tap-scale feedback */
-                rotationX: 0, rotationY: 0,
+        document.querySelectorAll('.service-item').forEach(function (card) {
-                duration: 0.75, ease: 'elastic.out(1, 0.45)', overwrite: 'auto'
+            card.addEventListener('touchstart', function () {
-            });
+                gsap.to(card, { scale: 0.97, duration: 0.15, ease: 'power2.out' });
+            }, { passive: true });
+            card.addEventListener('touchend', function () {
+                gsap.to(card, { scale: 1, duration: 0.35, ease: 'elastic.out(1.2, 0.5)' });
+            }, { passive: true });
         });
-    });
+    }
 
     /* ====================================================
        6.  SPONSORS — GUARANTEED VISIBILITY
-       Two-trigger system: ScrollTrigger + load-time check
-       gsap.set() owns initial state (no CSS opacity:0 ever)
        ==================================================== */
 
     var sponsorItems = document.querySelectorAll('.sponsor-logo-item');
     if (sponsorItems.length) {
 
-        /* Immediately set invisible via GSAP — no CSS conflict */
+        gsap.set(sponsorItems, { opacity: 0, y: 50, scale: 0.82 });
-        gsap.set(sponsorItems, { opacity: 0, y: 60, scale: 0.78, rotationY: 15 });
 
         var sponsorsPlayed = false;
         function playSponsors() {
             if (sponsorsPlayed) return;
             sponsorsPlayed = true;
             gsap.to(sponsorItems, {
-                opacity: 1, y: 0, scale: 1, rotationY: 0,
+                opacity: 1, y: 0, scale: 1,
-                duration: 0.9, stagger: 0.22,
+                duration: 0.8, stagger: 0.15,
-                ease: 'back.out(1.8)',
+                ease: 'back.out(1.6)'
-                clearProps: 'rotationY'
             });
         }
 
-        /* Trigger 1: normal scroll */
         ScrollTrigger.create({
             trigger: '.our-sponsors-section',
             start: 'top 88%',
@@ -207,7 +237,6 @@
             onEnter: playSponsors
         });
 
-        /* Trigger 2: already visible when page finishes loading */
         window.addEventListener('load', function () {
             setTimeout(function () {
                 var sec = document.querySelector('.our-sponsors-section');
@@ -219,43 +248,45 @@
             }, 980);
         });
 
-        /* 3D tilt on hover — works after animation completes */
+        /* 3D tilt — desktop only */
-        sponsorItems.forEach(function (card) {
+        if (!isMobile) {
-            card.style.transformStyle = 'preserve-3d';
+            sponsorItems.forEach(function (card) {
-            card.addEventListener('mousemove', function (e) {
+                card.style.transformStyle = 'preserve-3d';
-                var rect = card.getBoundingClientRect();
+                card.addEventListener('mousemove', function (e) {
-                var rotX = ((e.clientY - rect.top  - rect.height / 2) / (rect.height / 2)) * -8;
+                    var rect = card.getBoundingClientRect();
-                var rotY = ((e.clientX - rect.left - rect.width  / 2) / (rect.width  / 2)) *  8;
+                    var rotX = ((e.clientY - rect.top  - rect.height / 2) / (rect.height / 2)) * -8;
-                gsap.to(card, {
+                    var rotY = ((e.clientX - rect.left - rect.width  / 2) / (rect.width  / 2)) *  8;
-                    rotationX: rotX, rotationY: rotY,
+                    gsap.to(card, {
-                    transformPerspective: 500,
+                        rotationX: rotX, rotationY: rotY,
-                    duration: 0.3, ease: 'power2.out', overwrite: 'auto'
+                        transformPerspective: 500,
+                        duration: 0.3, ease: 'power2.out', overwrite: 'auto'
+                    });
+                });
+                card.addEventListener('mouseleave', function () {
+                    gsap.to(card, {
+                        rotationX: 0, rotationY: 0,
+                        duration: 0.65, ease: 'elastic.out(1, 0.45)', overwrite: 'auto'
+                    });
                 });
             });
-            card.addEventListener('mouseleave', function () {
+        }
-                gsap.to(card, {
-                    rotationX: 0, rotationY: 0,
-                    duration: 0.65, ease: 'elastic.out(1, 0.45)', overwrite: 'auto'
-                });
-            });
-        });
     }
 
     /* ====================================================
        7.  CTA BOX — SPLIT ENTRANCE
-       (cta-box-btn has .wow — we animate cta-box-content only)
        ==================================================== */
 
     gsap.from('.cta-box-content', {
         scrollTrigger: { trigger: '.cta-box', start: 'top 82%', once: true },
-        x: -70, opacity: 0,
+        x: isMobile ? 0 : -70,
+        y: isMobile ? 30 : 0,
+        opacity: 0,
         duration: 1.1, ease: 'power4.out',
         immediateRender: false
     });
 
     /* ====================================================
-       8.  GLOBAL SCROLL PROGRESS + SECTION FLASH
+       8.  GLOBAL SCROLL PROGRESS FLASH
-       Brief red flash on the progress bar when entering a section
        ==================================================== */
 
     var sectionFlashSections = document.querySelectorAll('.our-counter, .our-services, .our-sponsors-section, .cta-box');
@@ -275,7 +306,6 @@
 
     /* ====================================================
        9.  ABOUT-LIST ICON BOXES — STAGGER SPIN-IN
-       (icons inside .about-list-item — no .wow class on the icon)
        ==================================================== */
 
     gsap.from('#home-about .about-list-item .icon-box', {
@@ -287,29 +317,82 @@
     });
 
     /* ====================================================
-       10.  SCROLL-TRIGGERED BACKGROUND GRADIENT SHIFT
+       10. MOBILE-SPECIFIC SCROLL ANIMATIONS
-            on the hero as user scrolls away
+           Beautiful slide-in effects activated by scroll
+           (replaces cursor-dependent hover animations)
        ==================================================== */
 
-    ScrollTrigger.create({
+    if (isMobile) {
-        trigger: '.hero',
+
-        start: 'top top',
+        /* About section list items: stagger slide from left */
-        end: 'bottom top',
+        gsap.from('#home-about .about-list-item', {
-        scrub: 1,
+            scrollTrigger: { trigger: '#home-about .about-content-body', start: 'top 88%', once: true },
-        onUpdate: function (self) {
+            x: -30, opacity: 0,
-            heroEl.style.filter = 'brightness(' + (1 - self.progress * 0.18) + ')';
+            duration: 0.6, stagger: 0.15,
-        }
+            ease: 'power3.out',
-    });
+            immediateRender: false
+        });
+
+        /* Mission section: text slides in from left, image from bottom */
+        gsap.from('.mission-content .section-title', {
+            scrollTrigger: { trigger: '.our-mission', start: 'top 85%', once: true },
+            x: -40, opacity: 0,
+            duration: 0.75, ease: 'power3.out',
+            immediateRender: false
+        });
+
+        gsap.from('.mission-image', {
+            scrollTrigger: { trigger: '.mission-image', start: 'top 90%', once: true },
+            y: 50, opacity: 0,
+            duration: 0.8, ease: 'power3.out',
+            immediateRender: false
+        });
+
+        /* Service items: alternate slide from left/right */
+        document.querySelectorAll('.service-item').forEach(function (card, i) {
+            gsap.from(card, {
+                scrollTrigger: { trigger: card, start: 'top 90%', once: true },
+                x: i % 2 === 0 ? -40 : 40,
+                opacity: 0,
+                duration: 0.65,
+                ease: 'power3.out',
+                immediateRender: false
+            });
+        });
+
+        /* CTA box: gentle scale pop */
+        gsap.from('.cta-box', {
+            scrollTrigger: { trigger: '.cta-box', start: 'top 90%', once: true },
+            scale: 0.95, opacity: 0,
+            duration: 0.75, ease: 'back.out(1.8)',
+            immediateRender: false
+        });
+    }
+
+    /* ====================================================
+       11. HERO BRIGHTNESS SHIFT ON SCROLL (desktop only)
+       ==================================================== */
+
+    if (!isMobile) {
+        ScrollTrigger.create({
+            trigger: '.hero',
+            start: 'top top',
+            end: 'bottom top',
+            scrub: 1,
+            onUpdate: function (self) {
+                heroEl.style.filter = 'brightness(' + (1 - self.progress * 0.18) + ')';
+            }
+        });
+    }
 
     /* ====================================================
        FINALIZE: refresh ScrollTrigger after full load
-       (handles lazy images and font layout shifts)
        ==================================================== */
 
     window.addEventListener('load', function () {
         setTimeout(function () {
             ScrollTrigger.refresh();
-        }, 300);
+        }, 400);
     });
 
 })();