Enhance homepage animations and fix visual glitches

Refactor CSS and JavaScript to implement advanced GSAP animations, resolve image overlay issues, and ensure sponsor visibility.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: f13f685e-aa76-4721-bd29-73edf2f9795d
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c95103aa-b9ba-4a37-8cab-7bb946a4dee9
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/705de26f-a3c1-41e6-845d-88f96627134c/f13f685e-aa76-4721-bd29-73edf2f9795d/2yHlFNO
Replit-Helium-Checkpoint-Created: true

.replit

@@ -37,3 +37,6 @@ author = "agent"
 task = "shell.exec"
 args = "npm run dev"
 waitForPort = 5000
+
+[agent]
+expertMode = true

about.html

@@ -146,15 +146,6 @@
                   <img src="images/cricket.png" alt="" />
                 </figure>
               </div>
-
-              <div class="about-img-2">
-                <figure class="image-anime reveal">
-                  <img
-                    src="images/match.png"
-                    alt=""
-                  />
-                </figure>
-              </div>
             </div>
             <!-- About Image End -->
           </div>

css/enhance.css

@@ -41,7 +41,7 @@
 .hero-orb-1 {
     width: 700px;
     height: 700px;
-    background: radial-gradient(circle, rgba(217, 40, 0, 0.18) 0%, transparent 65%);
+    background: radial-gradient(circle, rgba(217, 40, 0, 0.16) 0%, transparent 65%);
     top: -300px;
     right: -200px;
     animation: orbDrift 12s ease-in-out infinite;
@@ -50,7 +50,7 @@
 .hero-orb-2 {
     width: 450px;
     height: 450px;
-    background: radial-gradient(circle, rgba(206, 156, 91, 0.12) 0%, transparent 65%);
+    background: radial-gradient(circle, rgba(206, 156, 91, 0.11) 0%, transparent 65%);
     bottom: -100px;
     left: -150px;
     animation: orbDrift 16s ease-in-out infinite reverse;
@@ -59,7 +59,7 @@
 .hero-orb-3 {
     width: 250px;
     height: 250px;
-    background: radial-gradient(circle, rgba(217, 40, 0, 0.08) 0%, transparent 65%);
+    background: radial-gradient(circle, rgba(217, 40, 0, 0.07) 0%, transparent 65%);
     top: 40%;
     left: 30%;
     animation: orbDrift 9s ease-in-out infinite 2s;
@@ -71,7 +71,7 @@
     66%       { transform: translate(-20px, 20px) scale(0.96); }
 }
 
-/* ---- Hero grid overlay ---- */
+/* ---- Hero subtle grid overlay ---- */
 .hero::before {
     content: '';
     position: absolute;
@@ -96,13 +96,13 @@
 
 /* ---- Down arrow bounce ---- */
 .hero .down-arrow a {
-    animation: arrowBounce 2s ease-in-out infinite;
+    animation: arrowBounce 2.2s ease-in-out infinite;
     display: inline-block;
 }
 
 @keyframes arrowBounce {
     0%, 100% { transform: translateY(0); }
-    50%       { transform: translateY(10px); }
+    50%       { transform: translateY(12px); }
 }
 
 /* ---- Nav hover underline animation ---- */
@@ -123,29 +123,30 @@
     transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
 }
 
-.main-menu .navbar-nav > .nav-item > a:hover::after {
+.main-menu .navbar-nav > .nav-item > a:hover::after,
+.main-menu .navbar-nav > .nav-item.active > a::after {
     transform: scaleX(1);
     transform-origin: left;
 }
 
 /* ---- Enhanced sticky header glass effect ---- */
 header.main-header .header-sticky.active {
-    background: rgba(0, 0, 0, 0.88) !important;
+    background: rgba(0, 0, 0, 0.90) !important;
-    backdrop-filter: blur(20px) saturate(180%) !important;
+    backdrop-filter: blur(24px) saturate(180%) !important;
-    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
+    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
-    border-bottom: 1px solid rgba(206, 156, 91, 0.2) !important;
+    border-bottom: 1px solid rgba(206, 156, 91, 0.25) !important;
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 /* ---- Enhanced Button Animations ---- */
 .btn-default {
     letter-spacing: 0.03em;
     transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
+    will-change: transform;
 }
 
 .btn-default:active {
-    transform: scale(0.96);
+    transform: scale(0.95) !important;
 }
 
 .btn-default::before {
@@ -155,6 +156,7 @@ header.main-header .header-sticky.active {
 /* ---- About image list item hover ---- */
 .about-list-item {
     transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+    will-change: transform;
 }
 
 .about-list-item:hover {
@@ -170,60 +172,8 @@ header.main-header .header-sticky.active {
     box-shadow: 0 10px 30px rgba(217, 40, 0, 0.35);
 }
 
-/* ---- About Image Mobile Fix ---- */
+/* About image layout is intentionally handled by custom.css only.
-@media (max-width: 991px) {
+   The overlay (position:absolute) must be preserved at all screen sizes. */
-    .about-image {
-        display: flex;
-        flex-direction: row;
-        align-items: flex-start;
-        gap: 12px;
-        padding-top: 0 !important;
-        margin-bottom: 30px;
-    }
-
-    .about-img-1 {
-        flex: 1 1 55%;
-        width: auto !important;
-    }
-
-    .about-img-2 {
-        position: relative !important;
-        top: auto !important;
-        right: auto !important;
-        flex: 1 1 42%;
-        width: auto !important;
-        align-self: flex-end;
-    }
-
-    .about-img-1 img {
-        width: 100%;
-    }
-
-    .about-img-2 img {
-        width: 100%;
-        border: 5px solid var(--white-color) !important;
-    }
-}
-
-@media (max-width: 575px) {
-    .about-image {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .about-img-1 {
-        flex: none !important;
-        width: 100% !important;
-    }
-
-    .about-img-2 {
-        flex: none !important;
-        width: 75% !important;
-        align-self: flex-end;
-        margin-top: -40px;
-        position: relative !important;
-    }
-}
 
 /* ---- Counter section enhanced ---- */
 .our-counter {
@@ -234,7 +184,6 @@ header.main-header .header-sticky.active {
 .counter-box {
     position: relative;
     overflow: hidden;
-    transition: box-shadow 0.4s ease;
 }
 
 .counter-box::before {
@@ -244,15 +193,17 @@ header.main-header .header-sticky.active {
     left: -50%;
     width: 200%;
     height: 200%;
-    background: conic-gradient(from 0deg at 50% 50%,
+    background: conic-gradient(
+        from 0deg at 50% 50%,
         transparent 0deg,
         rgba(255,255,255,0.03) 60deg,
         transparent 120deg,
         rgba(255,255,255,0.03) 180deg,
         transparent 240deg,
         rgba(255,255,255,0.03) 300deg,
-        transparent 360deg);
+        transparent 360deg
-    animation: counterRotate 20s linear infinite;
+    );
+    animation: counterRotate 25s linear infinite;
     pointer-events: none;
 }
 
@@ -265,6 +216,7 @@ header.main-header .header-sticky.active {
     transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
     position: relative;
     z-index: 1;
+    will-change: transform;
 }
 
 .counter-item:hover {
@@ -273,7 +225,6 @@ header.main-header .header-sticky.active {
 
 .counter-title h2 {
     font-size: 62px !important;
-    text-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
     letter-spacing: -0.02em;
 }
 
@@ -281,11 +232,12 @@ header.main-header .header-sticky.active {
 .service-item {
     transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease !important;
     box-shadow: 0 4px 20px rgba(0,0,0,0.06);
+    will-change: transform;
 }
 
 .service-item:hover {
     transform: translateY(-10px) !important;
-    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18) !important;
+    box-shadow: 0 30px 60px rgba(0,0,0,0.18) !important;
 }
 
 .service-item .icon-box img {
@@ -294,7 +246,59 @@ header.main-header .header-sticky.active {
 
 .service-item:hover .icon-box img {
     transform: scale(1.1) rotate(-8deg) !important;
-    filter: brightness(0) invert(1) !important;
+}
+
+/* ---- Service icon shine sweep ---- */
+.service-item .icon-box {
+    overflow: hidden;
+    position: relative;
+}
+
+.service-item .icon-box::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -120%;
+    width: 60%;
+    height: 100%;
+    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
+    transform: skewX(-15deg);
+    transition: none;
+}
+
+.service-item:hover .icon-box::after {
+    left: 150%;
+    transition: left 0.5s ease;
+}
+
+/* ---- Services dot background ---- */
+.our-services {
+    position: relative;
+    overflow: hidden;
+}
+
+.our-services::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
+    background-size: 28px 28px;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.our-services .container {
+    position: relative;
+    z-index: 1;
+}
+
+/* ---- Service footer slide on hover ---- */
+.service-footer {
+    transition: transform 0.3s ease;
+}
+
+.service-item:hover .service-footer {
+    transform: translateX(5px);
 }
 
 /* ---- Ticker gradient fade edges ---- */
@@ -323,22 +327,17 @@ header.main-header .header-sticky.active {
     background: linear-gradient(-90deg, var(--primary-color) 20%, transparent 100%);
 }
 
-/* ---- Ticker text glow ---- */
+/* ---- Sponsor logos — NO default opacity:0, GSAP handles initial state ---- */
-.scrolling-content span {
-    transition: text-shadow 0.3s ease;
-}
-
-.scrolling-content span:hover {
-    text-shadow: 0 0 20px rgba(217, 40, 0, 0.6);
-}
-
-/* ---- Sponsor logo shimmer on hover ---- */
 .sponsor-logo-item {
     position: relative;
     overflow: hidden;
-    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease, border-color 0.3s ease !important;
+    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
+                box-shadow 0.45s ease,
+                border-color 0.3s ease !important;
+    will-change: transform;
 }
 
+/* Shimmer sweep on hover */
 .sponsor-logo-item::after {
     content: '';
     position: absolute;
@@ -354,6 +353,7 @@ header.main-header .header-sticky.active {
     );
     transform: skewX(-15deg);
     transition: none;
+    pointer-events: none;
 }
 
 .sponsor-logo-item:hover::after {
@@ -363,23 +363,61 @@ header.main-header .header-sticky.active {
 
 .sponsor-logo-item:hover {
     border-color: var(--accent-color) !important;
-    transform: translateY(-6px) !important;
+    transform: translateY(-8px) scale(1.03) !important;
     box-shadow: 0 20px 50px rgba(217, 40, 0, 0.15) !important;
 }
 
 .sponsor-logo-item img {
-    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease !important;
+    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
 }
 
 .sponsor-logo-item:hover img {
-    transform: scale(1.05);
+    transform: scale(1.06) !important;
+}
+
+/* ---- Sponsors section subtle dot background ---- */
+.our-sponsors-section {
+    position: relative;
+    overflow: hidden;
+}
+
+.our-sponsors-section::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(circle, rgba(206, 156, 91, 0.07) 1px, transparent 1px);
+    background-size: 32px 32px;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.our-sponsors-section .container {
+    position: relative;
+    z-index: 1;
+}
+
+/* ---- Mission section ---- */
+.our-mission {
+    position: relative;
+    overflow: hidden;
+}
+
+.our-mission::before {
+    content: '';
+    position: absolute;
+    width: 500px;
+    height: 500px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(206, 156, 91, 0.07) 0%, transparent 65%);
+    top: -100px;
+    right: -150px;
+    pointer-events: none;
+    animation: orbDrift 18s ease-in-out infinite;
 }
 
-/* ---- Mission section border accent ---- */
 .mission-content-body p {
     border-left: 3px solid var(--accent-color) !important;
     padding-left: 18px !important;
-    position: relative;
     transition: border-color 0.3s ease, padding-left 0.3s ease;
 }
 
@@ -388,17 +426,7 @@ header.main-header .header-sticky.active {
     padding-left: 24px !important;
 }
 
-/* ---- Mission life circle enhanced ---- */
+/* ---- CTA Box orb ---- */
-.mission-life-circle img {
-    transition: border-color 0.5s ease, box-shadow 0.5s ease;
-    box-shadow: 0 0 0 0 rgba(217, 40, 0, 0);
-}
-
-.mission-life-circle img:hover {
-    box-shadow: 0 0 0 8px rgba(217, 40, 0, 0.15);
-}
-
-/* ---- CTA Box ---- */
 .cta-box {
     position: relative;
     overflow: hidden;
@@ -410,24 +438,17 @@ header.main-header .header-sticky.active {
     width: 500px;
     height: 500px;
     border-radius: 50%;
-    background: radial-gradient(circle, rgba(217, 40, 0, 0.12) 0%, transparent 65%);
+    background: radial-gradient(circle, rgba(217, 40, 0, 0.10) 0%, transparent 65%);
     top: -200px;
     right: 0;
     pointer-events: none;
     animation: orbDrift 14s ease-in-out infinite 1s;
+    z-index: 0;
 }
 
-.cta-box::after {
+.cta-box .container {
-    content: '';
+    position: relative;
-    position: absolute;
+    z-index: 1;
-    width: 300px;
-    height: 300px;
-    border-radius: 50%;
-    background: radial-gradient(circle, rgba(206, 156, 91, 0.08) 0%, transparent 65%);
-    bottom: -100px;
-    left: 10%;
-    pointer-events: none;
-    animation: orbDrift 10s ease-in-out infinite reverse 3s;
 }
 
 /* ---- Footer glow border ---- */
@@ -445,9 +466,11 @@ header.main-header .header-sticky.active {
     background: linear-gradient(90deg, transparent, var(--secondary-color), transparent);
 }
 
-/* ---- Footer social links ---- */
+/* ---- Footer social links spring ---- */
 .footer-social-links ul li a {
-    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease !important;
+    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+                box-shadow 0.3s ease !important;
+    will-change: transform;
 }
 
 .footer-social-links ul li a:hover {
@@ -455,11 +478,10 @@ header.main-header .header-sticky.active {
     box-shadow: 0 10px 25px rgba(217, 40, 0, 0.4) !important;
 }
 
-/* ---- Footer links hover ---- */
+/* ---- Footer links underline ---- */
-.footer-links ul li a,
+.footer-links ul li a {
-.footer-contact .footer-info-box-content p a {
     position: relative;
-    transition: all 0.3s ease !important;
+    transition: color 0.3s ease !important;
 }
 
 .footer-links ul li a::before {
@@ -477,7 +499,7 @@ header.main-header .header-sticky.active {
     width: 100%;
 }
 
-/* ---- Page header enhanced ---- */
+/* ---- Page header orb ---- */
 .page-header {
     position: relative;
     overflow: hidden;
@@ -489,37 +511,39 @@ header.main-header .header-sticky.active {
     width: 500px;
     height: 500px;
     border-radius: 50%;
-    background: radial-gradient(circle, rgba(217, 40, 0, 0.12) 0%, transparent 60%);
+    background: radial-gradient(circle, rgba(217, 40, 0, 0.10) 0%, transparent 60%);
     bottom: -250px;
     right: -100px;
     pointer-events: none;
     animation: orbDrift 15s ease-in-out infinite;
 }
 
-/* ---- Section title accent line ---- */
+/* ---- Animated gradient on accent spans ---- */
-.section-title h3 {
+.section-title h2 span,
-    letter-spacing: 0.08em;
+.section-title h1 span {
+    background: linear-gradient(90deg, #d92800 0%, #ff5c38 40%, #d92800 100%);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: textGradientShift 4s ease infinite;
+}
+
+@keyframes textGradientShift {
+    0%   { background-position: 0% center; }
+    50%  { background-position: 100% center; }
+    100% { background-position: 0% center; }
 }
 
 /* ---- Preloader gradient ---- */
 .preloader {
-    background: linear-gradient(135deg, #d92800 0%, #b82200 100%) !important;
+    background: linear-gradient(135deg, #d92800 0%, #b01d00 100%) !important;
-}
-
-/* ---- Image reveal enhanced ---- */
-.reveal {
-    overflow: hidden;
-}
-
-/* ---- Image hover scale (team-member, ministries) ---- */
-.team-image,
-.ministries-image {
-    overflow: hidden;
-    border-radius: 0 0 100px 0;
 }
 
+/* ---- Team member hover ---- */
 .team-member-item {
     transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
+    will-change: transform;
 }
 
 .team-member-item:hover {
@@ -527,50 +551,12 @@ header.main-header .header-sticky.active {
     box-shadow: 0 25px 55px rgba(0,0,0,0.15);
 }
 
-/* ---- Breadcrumb enhanced ---- */
+/* ---- Readmore btn spring ---- */
-.breadcrumb-item a {
-    transition: color 0.3s ease;
-}
-
-.breadcrumb-item a:hover {
-    color: var(--accent-color);
-}
-
-/* ---- About page about-image enhanced ---- */
-.about-img-1 img,
-.about-img-2 img {
-    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
-}
-
-.about-img-1:hover img,
-.about-img-2:hover img {
-    transform: scale(1.04) !important;
-}
-
-/* ---- Services section background animated dots ---- */
-.our-services {
-    position: relative;
-    overflow: hidden;
-}
-
-.our-services::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px);
-    background-size: 28px 28px;
-    pointer-events: none;
-    z-index: 0;
-}
-
-.our-services .container {
-    position: relative;
-    z-index: 1;
-}
-
-/* ---- Readmore btn enhanced hover ---- */
 .readmore-btn {
-    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, box-shadow 0.3s ease !important;
+    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+                background-color 0.3s ease,
+                box-shadow 0.3s ease !important;
+    will-change: transform;
 }
 
 .readmore-btn:hover {
@@ -578,252 +564,44 @@ header.main-header .header-sticky.active {
     box-shadow: 0 10px 30px rgba(217, 40, 0, 0.45) !important;
 }
 
-/* ---- WOW animations enhanced ---- */
+/* ---- Logo footer hover ---- */
-.wow {
-    will-change: transform, opacity;
-}
-
-/* ---- Smooth scroll snap feel ---- */
-html {
-    scroll-behavior: smooth;
-}
-
-/* ---- Section transition spacer ---- */
-.our-counter,
-.our-mission,
-.our-services,
-.our-sponsors-section,
-.cta-box {
-    transition: opacity 0.3s ease;
-}
-
-/* ---- Hero h1 glow ---- */
-.hero .section-title h1,
-.hero .section-title h3 {
-    position: relative;
-    z-index: 1;
-}
-
-/* ---- About us section enhanced ---- */
-.about-us {
-    position: relative;
-    overflow: hidden;
-}
-
-/* ---- Floating cricket ball decorative element ---- */
-@keyframes floatBall {
-    0%, 100% { transform: translateY(0px) rotate(0deg); }
-    50%       { transform: translateY(-20px) rotate(180deg); }
-}
-
-/* ---- Counter entrance animation ---- */
-@keyframes counterSlideUp {
-    from {
-        opacity: 0;
-        transform: translateY(40px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.counter-item.is-visible {
-    animation: counterSlideUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
-}
-
-.counter-item.is-visible:nth-child(1) { animation-delay: 0s; }
-.counter-item.is-visible:nth-child(2) { animation-delay: 0.12s; }
-.counter-item.is-visible:nth-child(3) { animation-delay: 0.24s; }
-.counter-item.is-visible:nth-child(4) { animation-delay: 0.36s; }
-
-/* ---- Sponsors section entrance ---- */
-.sponsor-logo-item {
-    opacity: 0;
-    transform: translateY(25px);
-    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
-                box-shadow 0.45s ease, border-color 0.3s ease !important;
-}
-
-.sponsor-logo-item.is-visible {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-.sponsor-logo-item.is-visible:nth-child(1) { transition-delay: 0s; }
-.sponsor-logo-item.is-visible:nth-child(2) { transition-delay: 0.12s; }
-.sponsor-logo-item.is-visible:nth-child(3) { transition-delay: 0.24s; }
-
-/* ---- Mission image floating animation ---- */
-.mission-img figure {
-    animation: missionFloat 8s ease-in-out infinite;
-}
-
-@keyframes missionFloat {
-    0%, 100% { transform: translateY(0px); }
-    50%       { transform: translateY(-12px); }
-}
-
-/* ---- Mobile responsive enhancements ---- */
-@media (max-width: 767px) {
-    .hero-orb-1 {
-        width: 350px;
-        height: 350px;
-    }
-
-    .hero-orb-2 {
-        width: 250px;
-        height: 250px;
-    }
-
-    .hero-orb-3 {
-        display: none;
-    }
-
-    .service-ticker::before,
-    .service-ticker::after {
-        width: 60px;
-    }
-
-    .counter-title h2 {
-        font-size: 44px !important;
-    }
-}
-
-/* ---- Smooth image hover on service items ---- */
-.service-item .icon-box {
-    overflow: hidden;
-    position: relative;
-}
-
-/* ---- Service item icon shine effect ---- */
-.service-item .icon-box::after {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -60%;
-    width: 40%;
-    height: 200%;
-    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
-    transform: skewX(-15deg);
-    transition: none;
-}
-
-.service-item:hover .icon-box::after {
-    left: 150%;
-    transition: left 0.5s ease;
-}
-
-/* ---- Service section card border glow on hover ---- */
-.service-item {
-    border: 1px solid transparent;
-    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
-                box-shadow 0.5s ease,
-                border-color 0.3s ease !important;
-}
-
-/* ---- Section row enhanced ---- */
-.section-row {
-    position: relative;
-}
-
-/* ---- Animated gradient underline on h2 accent text ---- */
-.section-title h2 span {
-    background: linear-gradient(90deg, #d92800, #ff5733, #d92800);
-    background-size: 200% auto;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    animation: textGradient 4s ease infinite;
-}
-
-@keyframes textGradient {
-    0%   { background-position: 0% center; }
-    50%  { background-position: 100% center; }
-    100% { background-position: 0% center; }
-}
-
-/* ---- Footer logo hover ---- */
 .footer-logo img {
-    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
+    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .footer-logo img:hover {
     transform: scale(1.08) rotate(-3deg);
 }
 
-/* ---- Breadcrumb active pulsing dot ---- */
+/* ---- Body smooth scroll ---- */
-.breadcrumb-item.active a {
+html {
-    position: relative;
+    scroll-behavior: smooth;
 }
 
-/* ---- Hero h3 glow on load ---- */
+/* ---- Smooth body fade in ---- */
-@keyframes heroSubtitleFade {
+body {
-    from { opacity: 0; transform: translateY(15px); }
+    animation: bodyReveal 0.4s ease both;
-    to   { opacity: 1; transform: translateY(0); }
 }
 
-/* ---- About us list item stagger ---- */
+@keyframes bodyReveal {
-.about-list-item.is-visible {
+    from { opacity: 0; }
-    animation: counterSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+    to   { opacity: 1; }
 }
 
-.about-list-item.is-visible:nth-child(1) { animation-delay: 0s; }
+/* ---- Mobile responsive ---- */
-.about-list-item.is-visible:nth-child(2) { animation-delay: 0.1s; }
+@media (max-width: 767px) {
-.about-list-item.is-visible:nth-child(3) { animation-delay: 0.2s; }
+    .hero-orb-1 { width: 350px; height: 350px; }
-.about-list-item.is-visible:nth-child(4) { animation-delay: 0.3s; }
+    .hero-orb-2 { width: 250px; height: 250px; }
+    .hero-orb-3 { display: none; }
 
-/* ---- CTA box text glow ---- */
+    .service-ticker::before,
-.cta-box .section-title h2 {
+    .service-ticker::after { width: 60px; }
-    position: relative;
+
-    z-index: 1;
+    .counter-title h2 { font-size: 44px !important; }
 }
 
-/* ---- Service footer hover ---- */
-.service-footer {
-    transition: transform 0.3s ease;
-}
-
-.service-item:hover .service-footer {
-    transform: translateX(4px);
-}
-
-/* ---- Sponsors section background ---- */
-.our-sponsors-section {
-    position: relative;
-    overflow: hidden;
-}
-
-.our-sponsors-section::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: radial-gradient(circle, rgba(206, 156, 91, 0.08) 1px, transparent 1px);
-    background-size: 32px 32px;
-    pointer-events: none;
-}
-
-.our-sponsors-section .container {
-    position: relative;
-    z-index: 1;
-}
-
-/* ---- About content body grid on mobile ---- */
 @media (max-width: 575px) {
-    .about-content-body {
+    .counter-title h2 { font-size: 36px !important; }
-        gap: 15px;
-    }
-
-    .about-list-item {
-        width: 100%;
-    }
-}
-
-/* ---- Responsive counter ---- */
-@media (max-width: 575px) {
-    .counter-title h2 {
-        font-size: 36px !important;
-    }
 
     .counter-item {
         border-right: none !important;
@@ -836,61 +614,3 @@ html {
         border-bottom: none !important;
     }
 }
-
-/* ---- Our mission orb ---- */
-.our-mission {
-    position: relative;
-    overflow: hidden;
-}
-
-.our-mission::before {
-    content: '';
-    position: absolute;
-    width: 400px;
-    height: 400px;
-    border-radius: 50%;
-    background: radial-gradient(circle, rgba(206, 156, 91, 0.08) 0%, transparent 65%);
-    top: -100px;
-    right: -150px;
-    pointer-events: none;
-    animation: orbDrift 18s ease-in-out infinite;
-}
-
-/* ---- Magnetic button cursor hint ---- */
-.btn-default,
-.readmore-btn {
-    cursor: none;
-}
-
-/* ---- Highlight nav link underline for current page ---- */
-.main-menu .nav-item.active > a,
-.main-menu .nav-item.current > a {
-    color: var(--accent-color) !important;
-}
-
-/* ---- Ticker items enhanced ---- */
-.scrolling-content span {
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    transition: color 0.3s ease, transform 0.3s ease;
-}
-
-/* ---- Enhanced image figure border radius ---- */
-.about-img-2 figure {
-    overflow: hidden;
-}
-
-/* ---- Box shadow on sponsor section cards ---- */
-.sponsors-logo-grid {
-    position: relative;
-}
-
-/* ---- Page load body clip ---- */
-body {
-    animation: bodyReveal 0.5s ease both;
-}
-
-@keyframes bodyReveal {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}

index.html

@@ -769,6 +769,8 @@
     <script src="js/function.js"></script>
     <!-- Enhanced Animations js -->
     <script src="js/enhance.js"></script>
+    <!-- Homepage GSAP Masterpiece (index.html only) -->
+    <script src="js/home-animations.js"></script>
 </body>
 
 </html>

js/enhance.js

@@ -1,357 +1,81 @@
+/* =====================================================
+   TSCB — Cross-page Utilities
+   ===================================================== */
+
 (function () {
-    "use strict";
+    'use strict';
 
-    /* ============================
+    /* ---- Scroll Progress Bar ---- */
-       Scroll Progress Bar
+    (function () {
-       ============================ */
+        var bar = document.createElement('div');
-    var progressBar = document.createElement('div');
+        bar.id = 'tscb-progress';
-    progressBar.id = 'tscb-progress';
+        document.body.appendChild(bar);
-    document.body.prepend(progressBar);
 
-    window.addEventListener('scroll', function () {
+        function onScroll() {
-        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+            var scrollTop = window.scrollY || document.documentElement.scrollTop;
-        var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            var docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-        var progress = (scrollTop / scrollHeight) * 100;
+            var pct = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
-        progressBar.style.width = progress + '%';
+            bar.style.width = pct + '%';
-    }, { passive: true });
+        }
 
-    /* ============================
+        window.addEventListener('scroll', onScroll, { passive: true });
-       Hero Decorative Orbs
+    })();
-       ============================ */
+
+    /* ---- Hero Decorative Orbs ---- */
+    (function () {
         var hero = document.querySelector('.hero');
-    if (hero) {
+        if (!hero) return;
-        ['hero-orb-1', 'hero-orb-2', 'hero-orb-3'].forEach(function (cls) {
+        [1, 2, 3].forEach(function (n) {
             var orb = document.createElement('div');
-            orb.className = cls;
+            orb.className = 'hero-orb-' + n;
-            hero.prepend(orb);
+            hero.appendChild(orb);
         });
-    }
+    })();
 
-    /* ============================
+    /* ---- Magnetic Buttons ---- */
-       Intersection Observer: Stagger counters
+    (function () {
-       ============================ */
+        var btns = document.querySelectorAll('.btn-default, .readmore-btn, .circular-arrow');
-    function observeElements(selector, className, threshold) {
+        btns.forEach(function (btn) {
-        var elements = document.querySelectorAll(selector);
-        if (!elements.length) return;
-
-        var observer = new IntersectionObserver(function (entries) {
-            entries.forEach(function (entry) {
-                if (entry.isIntersecting) {
-                    entry.target.classList.add(className);
-                    observer.unobserve(entry.target);
-                }
-            });
-        }, { threshold: threshold || 0.2, rootMargin: '0px 0px -60px 0px' });
-
-        elements.forEach(function (el) { observer.observe(el); });
-    }
-
-    observeElements('.counter-item', 'is-visible', 0.2);
-    observeElements('.sponsor-logo-item', 'is-visible', 0.15);
-    observeElements('.about-list-item', 'is-visible', 0.15);
-
-    /* ============================
-       GSAP Enhanced Animations (if GSAP available)
-       ============================ */
-    window.addEventListener('load', function () {
-        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return;
-
-        gsap.registerPlugin(ScrollTrigger);
-
-        /* --- Hero content stagger --- */
-        var heroContent = document.querySelector('.hero-content .section-title');
-        if (heroContent) {
-            var heroKids = heroContent.querySelectorAll('h3, p');
-            gsap.from(heroKids, {
-                y: 40,
-                opacity: 0,
-                duration: 1,
-                stagger: 0.2,
-                ease: 'power3.out',
-                delay: 0.3
-            });
-        }
-
-        /* --- Counter numbers enhanced count-up feel --- */
-        var counterBox = document.querySelector('.counter-box');
-        if (counterBox) {
-            gsap.from(counterBox, {
-                scrollTrigger: {
-                    trigger: counterBox,
-                    start: 'top 80%',
-                },
-                scaleX: 0.92,
-                scaleY: 0.95,
-                opacity: 0,
-                duration: 0.9,
-                ease: 'power3.out'
-            });
-        }
-
-        /* --- Service items stagger entrance --- */
-        var serviceItems = document.querySelectorAll('.service-item');
-        if (serviceItems.length) {
-            gsap.from(serviceItems, {
-                scrollTrigger: {
-                    trigger: serviceItems[0].closest('.our-services') || serviceItems[0],
-                    start: 'top 75%',
-                },
-                y: 60,
-                opacity: 0,
-                duration: 0.8,
-                stagger: 0.15,
-                ease: 'back.out(1.4)'
-            });
-        }
-
-        /* --- About list items stagger --- */
-        var aboutItems = document.querySelectorAll('.about-list-item');
-        if (aboutItems.length) {
-            gsap.from(aboutItems, {
-                scrollTrigger: {
-                    trigger: aboutItems[0].parentElement,
-                    start: 'top 80%',
-                },
-                x: -30,
-                opacity: 0,
-                duration: 0.7,
-                stagger: 0.12,
-                ease: 'power2.out'
-            });
-        }
-
-        /* --- Sponsor logos stagger entrance --- */
-        var sponsorItems = document.querySelectorAll('.sponsor-logo-item');
-        if (sponsorItems.length) {
-            gsap.from(sponsorItems, {
-                scrollTrigger: {
-                    trigger: document.querySelector('.sponsors-logo-grid'),
-                    start: 'top 80%',
-                },
-                y: 40,
-                scale: 0.88,
-                opacity: 0,
-                duration: 0.7,
-                stagger: 0.15,
-                ease: 'back.out(1.7)'
-            });
-        }
-
-        /* --- CTA section reveal --- */
-        var ctaBox = document.querySelector('.cta-box');
-        if (ctaBox) {
-            gsap.from(ctaBox, {
-                scrollTrigger: {
-                    trigger: ctaBox,
-                    start: 'top 85%',
-                },
-                y: 30,
-                opacity: 0,
-                duration: 0.9,
-                ease: 'power2.out'
-            });
-        }
-
-        /* --- Section titles enhanced parallax --- */
-        var sectionTitles = document.querySelectorAll('.section-row .section-title');
-        sectionTitles.forEach(function (title) {
-            gsap.from(title, {
-                scrollTrigger: {
-                    trigger: title,
-                    start: 'top 85%',
-                },
-                y: 25,
-                opacity: 0,
-                duration: 0.8,
-                ease: 'power2.out'
-            });
-        });
-
-        /* --- Team member items stagger --- */
-        var teamItems = document.querySelectorAll('.team-member-item');
-        if (teamItems.length) {
-            gsap.from(teamItems, {
-                scrollTrigger: {
-                    trigger: teamItems[0].closest('.our-teams') || teamItems[0],
-                    start: 'top 75%',
-                },
-                y: 50,
-                opacity: 0,
-                duration: 0.8,
-                stagger: 0.14,
-                ease: 'back.out(1.4)'
-            });
-        }
-
-        /* --- Mission image floating --- */
-        var missionImg = document.querySelector('.mission-img figure');
-        if (missionImg) {
-            gsap.to(missionImg, {
-                y: -18,
-                duration: 3.5,
-                ease: 'sine.inOut',
-                yoyo: true,
-                repeat: -1
-            });
-        }
-
-        /* --- Mission life circle pulse --- */
-        var lifeCircle = document.querySelector('.mission-life-circle img');
-        if (lifeCircle) {
-            gsap.to(lifeCircle, {
-                boxShadow: '0 0 0 12px rgba(217, 40, 0, 0.12)',
-                duration: 2,
-                ease: 'sine.inOut',
-                yoyo: true,
-                repeat: -1
-            });
-        }
-
-        /* --- Orb parallax on scroll --- */
-        var orbs = document.querySelectorAll('.hero-orb-1, .hero-orb-2, .hero-orb-3');
-        if (orbs.length && document.querySelector('.hero')) {
-            orbs.forEach(function (orb, i) {
-                var speed = (i + 1) * 0.08;
-                gsap.to(orb, {
-                    scrollTrigger: {
-                        trigger: '.hero',
-                        start: 'top top',
-                        end: 'bottom top',
-                        scrub: 1
-                    },
-                    y: (i % 2 === 0 ? -1 : 1) * 120 * speed * 10,
-                    x: (i % 2 === 0 ? 1 : -1) * 40 * speed * 5,
-                    ease: 'none'
-                });
-            });
-        }
-
-        /* --- Counter section scale in --- */
-        var counterItems = document.querySelectorAll('.counter-item');
-        if (counterItems.length) {
-            counterItems.forEach(function (item, i) {
-                gsap.from(item, {
-                    scrollTrigger: {
-                        trigger: item,
-                        start: 'top 85%',
-                    },
-                    y: 35,
-                    scale: 0.92,
-                    opacity: 0,
-                    duration: 0.75,
-                    delay: i * 0.1,
-                    ease: 'back.out(1.5)'
-                });
-            });
-        }
-
-        /* --- Sponsors footer line --- */
-        var sponsorFooter = document.querySelector('.sponsors-footer');
-        if (sponsorFooter) {
-            gsap.from(sponsorFooter, {
-                scrollTrigger: {
-                    trigger: sponsorFooter,
-                    start: 'top 90%'
-                },
-                y: 20,
-                opacity: 0,
-                duration: 0.7,
-                ease: 'power2.out'
-            });
-        }
-    });
-
-    /* ============================
-       Magnetic Button Effect (subtle)
-       ============================ */
-    var magnetBtns = document.querySelectorAll('.btn-default, .readmore-btn');
-    magnetBtns.forEach(function (btn) {
             btn.addEventListener('mousemove', function (e) {
                 var rect = btn.getBoundingClientRect();
                 var cx = rect.left + rect.width / 2;
                 var cy = rect.top + rect.height / 2;
-            var dx = (e.clientX - cx) / (rect.width / 2);
+                var dx = (e.clientX - cx) * 0.25;
-            var dy = (e.clientY - cy) / (rect.height / 2);
+                var dy = (e.clientY - cy) * 0.25;
-            var strength = btn.classList.contains('readmore-btn') ? 6 : 8;
+                btn.style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';
-            btn.style.transform = 'translate(' + (dx * strength) + 'px, ' + (dy * strength) + 'px)';
             });
-
             btn.addEventListener('mouseleave', function () {
                 btn.style.transform = '';
-            btn.style.transition = 'transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)';
             });
+        });
+    })();
 
-        btn.addEventListener('mouseenter', function () {
+    /* ---- Active nav link ---- */
-            btn.style.transition = 'transform 0.1s ease';
+    (function () {
-        });
+        var currentFile = window.location.pathname.split('/').pop() || 'index.html';
-    });
+        var links = document.querySelectorAll('.navbar-nav .nav-link');
-
+        links.forEach(function (link) {
-    /* ============================
-       Active nav link highlight
-       ============================ */
-    var currentPath = window.location.pathname.split('/').pop() || 'index.html';
-    var navLinks = document.querySelectorAll('.main-menu .nav-item a');
-    navLinks.forEach(function (link) {
             var href = link.getAttribute('href') || '';
-        var linkFile = href.split('/').pop();
+            var file = href.split('/').pop();
-        if (linkFile === currentPath || (currentPath === '' && linkFile === 'index.html')) {
+            if (file === currentFile || (currentFile === '' && file === 'index.html')) {
-            link.closest('.nav-item').classList.add('active');
+                var item = link.closest('.nav-item');
+                if (item) item.classList.add('active');
             }
         });
+    })();
 
-    /* ============================
+    /* ---- Ticker pause on hover ---- */
-       Smooth Ticker Speed Boost on hover
+    (function () {
-       ============================ */
+        var ticker = document.querySelector('.ticker-wrap');
-    var tickerBoxes = document.querySelectorAll('.scrolling-ticker-box');
+        if (!ticker) return;
-    tickerBoxes.forEach(function (box) {
+        var inner = ticker.querySelector('.ticker');
-        box.addEventListener('mouseenter', function () {
+        if (!inner) return;
-            box.style.animationPlayState = 'paused';
+        ticker.addEventListener('mouseenter', function () {
-            var content = box.querySelectorAll('.scrolling-content');
+            inner.style.animationPlayState = 'paused';
-            content.forEach(function (c) { c.style.animationPlayState = 'paused'; });
-        });
-        box.addEventListener('mouseleave', function () {
-            box.style.animationPlayState = '';
-            var content = box.querySelectorAll('.scrolling-content');
-            content.forEach(function (c) { c.style.animationPlayState = ''; });
-        });
-    });
-
-    /* ============================
-       Image tilt effect on about images
-       ============================ */
-    var tiltImages = document.querySelectorAll('.about-img-1, .about-img-2, .mission-img .image-anime');
-    tiltImages.forEach(function (el) {
-        el.addEventListener('mousemove', function (e) {
-            var rect = el.getBoundingClientRect();
-            var cx = rect.left + rect.width / 2;
-            var cy = rect.top + rect.height / 2;
-            var dx = (e.clientX - cx) / (rect.width / 2);
-            var dy = (e.clientY - cy) / (rect.height / 2);
-            var img = el.querySelector('img, figure');
-            if (img) {
-                img.style.transform = 'perspective(600px) rotateY(' + (dx * 4) + 'deg) rotateX(' + (-dy * 4) + 'deg) scale(1.03)';
-                img.style.transition = 'transform 0.1s ease';
-            }
-        });
-
-        el.addEventListener('mouseleave', function () {
-            var img = el.querySelector('img, figure');
-            if (img) {
-                img.style.transform = '';
-                img.style.transition = 'transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)';
-            }
-        });
-    });
-
-    /* ============================
-       Counter box animated number suffix
-       ============================ */
-    // Ensure counter values have proper styling after WOW init
-    document.addEventListener('DOMContentLoaded', function () {
-        var counterTitles = document.querySelectorAll('.counter-title h2');
-        counterTitles.forEach(function (h2) {
-            h2.style.letterSpacing = '-0.02em';
         });
+        ticker.addEventListener('mouseleave', function () {
+            inner.style.animationPlayState = '';
         });
+    })();
 
 })();

js/home-animations.js

@@ -0,0 +1,315 @@
+/* =====================================================
+   TSCB — Homepage GSAP Masterpiece
+   Linked ONLY in index.html  |  v1.0
+   ===================================================== */
+
+(function () {
+    'use strict';
+
+    /* Guard: only run when there is a hero section */
+    if (!document.querySelector('.hero')) return;
+
+    /* Register GSAP plugins (safe to call multiple times) */
+    gsap.registerPlugin(ScrollTrigger);
+
+    /* ====================================================
+       1.  HERO — ORBS ENTRANCE + MOUSE PARALLAX
+       ==================================================== */
+
+    /* Orbs drift in after preloader */
+    gsap.from('.hero-orb-1', {
+        scale: 0.2, opacity: 0, duration: 2.8,
+        ease: 'power3.out', delay: 0.85
+    });
+    gsap.from('.hero-orb-2', {
+        scale: 0.2, opacity: 0, duration: 3.2,
+        ease: 'power3.out', delay: 1.0
+    });
+    gsap.from('.hero-orb-3', {
+        scale: 0.2, opacity: 0, duration: 2.2,
+        ease: 'power3.out', delay: 1.3
+    });
+
+    /* Orb glow pulse after preloader (subtle depth feel) */
+    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 */
+    ScrollTrigger.create({
+        trigger: '.hero',
+        start: 'top top',
+        end: 'bottom top',
+        scrub: 1.8,
+        onUpdate: function (self) {
+            var p = self.progress;
+            gsap.set('.hero-orb-1', { y: p * -130, x: p * 45 });
+            gsap.set('.hero-orb-2', { y: p * -90,  x: p * -35 });
+            gsap.set('.hero-orb-3', { y: p * -60,  rotate: p * 50 });
+        }
+    });
+
+    /* Hero mouse parallax — orbs follow the cursor */
+    var heroEl = document.querySelector('.hero');
+    heroEl.addEventListener('mousemove', function (e) {
+        var rect = heroEl.getBoundingClientRect();
+        var xR = (e.clientX - rect.left)  / rect.width  - 0.5;
+        var yR = (e.clientY - rect.top)   / rect.height - 0.5;
+        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' });
+    });
+
+    /* ====================================================
+       2.  COUNTER SECTION — 3-STAGE DRAMATIC ENTRANCE
+       (counter-item has no .wow class — safe to animate)
+       ==================================================== */
+
+    var counterSection = document.querySelector('.our-counter');
+    if (counterSection) {
+
+        /* Stage 1 — the whole box scales in */
+        gsap.from('.counter-box', {
+            scrollTrigger: { trigger: '.our-counter', start: 'top 78%', once: true },
+            scale: 0.88, opacity: 0, borderRadius: '40px',
+            duration: 1.2, ease: 'power4.out',
+            immediateRender: false
+        });
+
+        /* Stage 2 — individual items slide up with stagger */
+        gsap.from('.counter-item', {
+            scrollTrigger: { trigger: '.our-counter', start: 'top 78%', once: true },
+            y: 60, opacity: 0,
+            duration: 0.85, stagger: 0.18, delay: 0.25,
+            ease: 'back.out(1.6)',
+            immediateRender: false
+        });
+
+        /* Stage 3 — counter h2 numbers pop with elastic */
+        gsap.from('.counter-title h2', {
+            scrollTrigger: { trigger: '.our-counter', start: 'top 78%', once: true },
+            scale: 0.4, opacity: 0,
+            duration: 1.1, stagger: 0.2, delay: 0.55,
+            ease: 'elastic.out(1.1, 0.52)',
+            immediateRender: false
+        });
+
+        /* Counter hover — h2 magnify */
+        document.querySelectorAll('.counter-item').forEach(function (item) {
+            item.addEventListener('mouseenter', function () {
+                gsap.to(item.querySelector('.counter-title h2'), {
+                    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
+       (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', {
+        scrollTrigger: { trigger: '.service-ticker', start: 'top 92%', once: true },
+        opacity: 0, scaleY: 0.6,
+        transformOrigin: 'center center',
+        duration: 0.7, ease: 'back.out(2)',
+        immediateRender: false
+    });
+
+    /* ====================================================
+       5.  SERVICE CARDS — 3D TILT ON HOVER
+       (entrance handled by WOW.js — we layer on tilt only)
+       ==================================================== */
+
+    document.querySelectorAll('.service-item').forEach(function (card) {
+        card.style.transformStyle = 'preserve-3d';
+        card.addEventListener('mousemove', function (e) {
+            var rect = card.getBoundingClientRect();
+            var rotX = ((e.clientY - rect.top  - rect.height / 2) / (rect.height / 2)) * -10;
+            var rotY = ((e.clientX - rect.left - rect.width  / 2) / (rect.width  / 2)) *  10;
+            gsap.to(card, {
+                rotationX: rotX, rotationY: rotY,
+                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'
+            });
+        });
+    });
+
+    /* ====================================================
+       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: 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,
+                duration: 0.9, stagger: 0.22,
+                ease: 'back.out(1.8)',
+                clearProps: 'rotationY'
+            });
+        }
+
+        /* Trigger 1: normal scroll */
+        ScrollTrigger.create({
+            trigger: '.our-sponsors-section',
+            start: 'top 88%',
+            once: true,
+            onEnter: playSponsors
+        });
+
+        /* Trigger 2: already visible when page finishes loading */
+        window.addEventListener('load', function () {
+            setTimeout(function () {
+                var sec = document.querySelector('.our-sponsors-section');
+                if (!sec) return;
+                var rect = sec.getBoundingClientRect();
+                if (rect.top < window.innerHeight * 0.92) {
+                    playSponsors();
+                }
+            }, 980);
+        });
+
+        /* 3D tilt on hover — works after animation completes */
+        sponsorItems.forEach(function (card) {
+            card.style.transformStyle = 'preserve-3d';
+            card.addEventListener('mousemove', function (e) {
+                var rect = card.getBoundingClientRect();
+                var rotX = ((e.clientY - rect.top  - rect.height / 2) / (rect.height / 2)) * -8;
+                var rotY = ((e.clientX - rect.left - rect.width  / 2) / (rect.width  / 2)) *  8;
+                gsap.to(card, {
+                    rotationX: rotX, rotationY: rotY,
+                    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'
+                });
+            });
+        });
+    }
+
+    /* ====================================================
+       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,
+        duration: 1.1, ease: 'power4.out',
+        immediateRender: false
+    });
+
+    /* ====================================================
+       8.  GLOBAL SCROLL PROGRESS + SECTION 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');
+    sectionFlashSections.forEach(function (sec) {
+        ScrollTrigger.create({
+            trigger: sec,
+            start: 'top 60%',
+            once: true,
+            onEnter: function () {
+                var bar = document.getElementById('tscb-progress');
+                if (!bar) return;
+                gsap.fromTo(bar, { boxShadow: '0 0 0 0 rgba(217,40,0,0)' },
+                    { boxShadow: '0 0 18px 4px rgba(217,40,0,0.7)', duration: 0.3, yoyo: true, repeat: 1, ease: 'power2.inOut' });
+            }
+        });
+    });
+
+    /* ====================================================
+       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', {
+        scrollTrigger: { trigger: '#home-about .about-content-body', start: 'top 82%', once: true },
+        scale: 0, rotate: -180, opacity: 0,
+        duration: 0.75, stagger: 0.2, delay: 0.15,
+        ease: 'back.out(2)',
+        immediateRender: false
+    });
+
+    /* ====================================================
+       10.  SCROLL-TRIGGERED BACKGROUND GRADIENT SHIFT
+            on the hero as user scrolls away
+       ==================================================== */
+
+    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);
+    });
+
+})();