Add next-level animations and visual enhancements to the website

Integrates CSS and JavaScript for enhanced animations, including scroll progress, floating orbs, magnetic buttons, and animated gradients, while also fixing responsive image display issues on the About Us page. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 8702cea6-5379-4542-9446-7e71f9f057ab Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 0d23a4eb-ce23-497a-86bc-d3de3958ac06 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/705de26f-a3c1-41e6-845d-88f96627134c/8702cea6-5379-4542-9446-7e71f9f057ab/ejKynqE Replit-Helium-Checkpoint-Created: true
2026-03-17 20:37:29 +00:00
parent 867cc5681f
commit e1bb749c80
10 changed files with 1281 additions and 1 deletions
--- a/404.html
+++ b/404.html
@@ -37,6 +37,8 @@
    <link rel="stylesheet" href="css/plyr.css">
    <!-- Main Custom Css -->
    <link href="css/custom.css" rel="stylesheet" media="screen">
+    <!-- Enhanced Animations Css -->
+    <link href="css/enhance.css" rel="stylesheet" media="screen">
 </head>

 <body>
--- a/about.html
+++ b/about.html
@@ -37,6 +37,8 @@
    <link rel="stylesheet" href="css/plyr.css" />
    <!-- Main Custom Css -->
    <link href="css/custom.css" rel="stylesheet" media="screen" />
+    <!-- Enhanced Animations Css -->
+    <link href="css/enhance.css" rel="stylesheet" media="screen" />
  </head>

  <body>
@@ -150,7 +152,6 @@
                  <img
                    src="images/match.png"
                    alt=""
-                    style="width: 348px; height: auto"
                  />
                </figure>
              </div>
@@ -1104,5 +1105,7 @@
    <script src="js/wow.js"></script>
    <!-- Main Custom js file -->
    <script src="js/function.js"></script>
+    <!-- Enhanced Animations js -->
+    <script src="js/enhance.js"></script>
  </body>
 </html>
--- a/austin.html
+++ b/austin.html
@@ -37,6 +37,8 @@
    <link rel="stylesheet" href="css/plyr.css">
    <!-- Main Custom Css -->
    <link href="css/custom.css" rel="stylesheet" media="screen">
+    <!-- Enhanced Animations Css -->
+    <link href="css/enhance.css" rel="stylesheet" media="screen">
 </head>

 <body>
@@ -554,6 +556,8 @@
    <script src="js/wow.js"></script>
    <!-- Main Custom js file -->
    <script src="js/function.js"></script>
+    <!-- Enhanced Animations js -->
+    <script src="js/enhance.js"></script>
 </body>

 </html>
--- a/contact.html
+++ b/contact.html
@@ -37,6 +37,8 @@
    <link rel="stylesheet" href="css/plyr.css">
    <!-- Main Custom Css -->
    <link href="css/custom.css" rel="stylesheet" media="screen">
+    <!-- Enhanced Animations Css -->
+    <link href="css/enhance.css" rel="stylesheet" media="screen">
 </head>

 <body>
@@ -416,6 +418,8 @@
    <script src="js/wow.js"></script>
    <!-- Main Custom js file -->
    <script src="js/function.js"></script>
+    <!-- Enhanced Animations js -->
+    <script src="js/enhance.js"></script>
 </body>

 </html>
--- a/css/enhance.css
+++ b/css/enhance.css
@@ -0,0 +1,896 @@
+/* =====================================================
+   TSCB — Enhanced Animations & Visual Excellence
+   ===================================================== */
+
+/* ---- Scroll Progress Bar ---- */
+#tscb-progress {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 3px;
+    width: 0%;
+    background: linear-gradient(90deg, #d92800 0%, #ce9c5b 50%, #d92800 100%);
+    background-size: 200% 100%;
+    animation: progressShift 3s ease infinite;
+    z-index: 999999;
+    transition: width 0.08s linear;
+    pointer-events: none;
+}
+
+@keyframes progressShift {
+    0%   { background-position: 0% 50%; }
+    50%  { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* ---- Hero Section Decorative Orbs ---- */
+.hero {
+    overflow: hidden;
+    position: relative;
+}
+
+.hero-orb-1,
+.hero-orb-2,
+.hero-orb-3 {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.hero-orb-1 {
+    width: 700px;
+    height: 700px;
+    background: radial-gradient(circle, rgba(217, 40, 0, 0.18) 0%, transparent 65%);
+    top: -300px;
+    right: -200px;
+    animation: orbDrift 12s ease-in-out infinite;
+}
+
+.hero-orb-2 {
+    width: 450px;
+    height: 450px;
+    background: radial-gradient(circle, rgba(206, 156, 91, 0.12) 0%, transparent 65%);
+    bottom: -100px;
+    left: -150px;
+    animation: orbDrift 16s ease-in-out infinite reverse;
+}
+
+.hero-orb-3 {
+    width: 250px;
+    height: 250px;
+    background: radial-gradient(circle, rgba(217, 40, 0, 0.08) 0%, transparent 65%);
+    top: 40%;
+    left: 30%;
+    animation: orbDrift 9s ease-in-out infinite 2s;
+}
+
+@keyframes orbDrift {
+    0%, 100% { transform: translate(0px, 0px) scale(1); }
+    33%       { transform: translate(30px, -30px) scale(1.06); }
+    66%       { transform: translate(-20px, 20px) scale(0.96); }
+}
+
+/* ---- Hero grid overlay ---- */
+.hero::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image:
+        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
+    background-size: 60px 60px;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.hero .container {
+    position: relative;
+    z-index: 1;
+}
+
+.hero .down-arrow {
+    position: relative;
+    z-index: 1;
+}
+
+/* ---- Down arrow bounce ---- */
+.hero .down-arrow a {
+    animation: arrowBounce 2s ease-in-out infinite;
+    display: inline-block;
+}
+
+@keyframes arrowBounce {
+    0%, 100% { transform: translateY(0); }
+    50%       { transform: translateY(10px); }
+}
+
+/* ---- Nav hover underline animation ---- */
+.main-menu .navbar-nav > .nav-item > a {
+    position: relative;
+}
+
+.main-menu .navbar-nav > .nav-item > a::after {
+    content: '';
+    position: absolute;
+    bottom: 6px;
+    left: 15px;
+    right: 15px;
+    height: 2px;
+    background: var(--accent-color);
+    transform: scaleX(0);
+    transform-origin: right;
+    transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
+}
+
+.main-menu .navbar-nav > .nav-item > a:hover::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;
+    backdrop-filter: blur(20px) saturate(180%) !important;
+    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
+    border-bottom: 1px solid rgba(206, 156, 91, 0.2) !important;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
+    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;
+}
+
+.btn-default:active {
+    transform: scale(0.96);
+}
+
+.btn-default::before {
+    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+}
+
+/* ---- About image list item hover ---- */
+.about-list-item {
+    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.about-list-item:hover {
+    transform: translateX(8px);
+}
+
+.about-list-item .icon-box {
+    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
+}
+
+.about-list-item:hover .icon-box {
+    transform: scale(1.15) rotate(-5deg);
+    box-shadow: 0 10px 30px rgba(217, 40, 0, 0.35);
+}
+
+/* ---- About Image Mobile Fix ---- */
+@media (max-width: 991px) {
+    .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 {
+    position: relative;
+    overflow: hidden;
+}
+
+.counter-box {
+    position: relative;
+    overflow: hidden;
+    transition: box-shadow 0.4s ease;
+}
+
+.counter-box::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    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);
+    animation: counterRotate 20s linear infinite;
+    pointer-events: none;
+}
+
+@keyframes counterRotate {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}
+
+.counter-item {
+    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+    position: relative;
+    z-index: 1;
+}
+
+.counter-item:hover {
+    transform: translateY(-6px);
+}
+
+.counter-title h2 {
+    font-size: 62px !important;
+    text-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
+    letter-spacing: -0.02em;
+}
+
+/* ---- Service Item enhanced hover ---- */
+.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);
+}
+
+.service-item:hover {
+    transform: translateY(-10px) !important;
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18) !important;
+}
+
+.service-item .icon-box img {
+    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+}
+
+.service-item:hover .icon-box img {
+    transform: scale(1.1) rotate(-8deg) !important;
+    filter: brightness(0) invert(1) !important;
+}
+
+/* ---- Ticker gradient fade edges ---- */
+.service-ticker {
+    position: relative;
+}
+
+.service-ticker::before,
+.service-ticker::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 120px;
+    z-index: 2;
+    pointer-events: none;
+}
+
+.service-ticker::before {
+    left: 0;
+    background: linear-gradient(90deg, var(--primary-color) 20%, transparent 100%);
+}
+
+.service-ticker::after {
+    right: 0;
+    background: linear-gradient(-90deg, var(--primary-color) 20%, transparent 100%);
+}
+
+/* ---- Ticker text glow ---- */
+.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;
+}
+
+.sponsor-logo-item::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -120%;
+    width: 60%;
+    height: 100%;
+    background: linear-gradient(
+        105deg,
+        transparent 30%,
+        rgba(255, 255, 255, 0.55) 50%,
+        transparent 70%
+    );
+    transform: skewX(-15deg);
+    transition: none;
+}
+
+.sponsor-logo-item:hover::after {
+    left: 160%;
+    transition: left 0.65s ease;
+}
+
+.sponsor-logo-item:hover {
+    border-color: var(--accent-color) !important;
+    transform: translateY(-6px) !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;
+}
+
+.sponsor-logo-item:hover img {
+    transform: scale(1.05);
+}
+
+/* ---- 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;
+}
+
+.mission-content-body p:hover {
+    border-left-color: var(--secondary-color) !important;
+    padding-left: 24px !important;
+}
+
+/* ---- Mission life circle enhanced ---- */
+.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;
+}
+
+.cta-box::before {
+    content: '';
+    position: absolute;
+    width: 500px;
+    height: 500px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(217, 40, 0, 0.12) 0%, transparent 65%);
+    top: -200px;
+    right: 0;
+    pointer-events: none;
+    animation: orbDrift 14s ease-in-out infinite 1s;
+}
+
+.cta-box::after {
+    content: '';
+    position: absolute;
+    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 ---- */
+.main-footer {
+    position: relative;
+}
+
+.main-footer::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 10%;
+    right: 10%;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--secondary-color), transparent);
+}
+
+/* ---- Footer social links ---- */
+.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;
+}
+
+.footer-social-links ul li a:hover {
+    transform: translateY(-6px) scale(1.15) !important;
+    box-shadow: 0 10px 25px rgba(217, 40, 0, 0.4) !important;
+}
+
+/* ---- Footer links hover ---- */
+.footer-links ul li a,
+.footer-contact .footer-info-box-content p a {
+    position: relative;
+    transition: all 0.3s ease !important;
+}
+
+.footer-links ul li a::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -2px;
+    width: 0;
+    height: 1px;
+    background: var(--accent-color);
+    transition: width 0.35s cubic-bezier(0.76, 0, 0.24, 1);
+}
+
+.footer-links ul li a:hover::before {
+    width: 100%;
+}
+
+/* ---- Page header enhanced ---- */
+.page-header {
+    position: relative;
+    overflow: hidden;
+}
+
+.page-header::after {
+    content: '';
+    position: absolute;
+    width: 500px;
+    height: 500px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(217, 40, 0, 0.12) 0%, transparent 60%);
+    bottom: -250px;
+    right: -100px;
+    pointer-events: none;
+    animation: orbDrift 15s ease-in-out infinite;
+}
+
+/* ---- Section title accent line ---- */
+.section-title h3 {
+    letter-spacing: 0.08em;
+}
+
+/* ---- Preloader gradient ---- */
+.preloader {
+    background: linear-gradient(135deg, #d92800 0%, #b82200 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-item {
+    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
+}
+
+.team-member-item:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 25px 55px rgba(0,0,0,0.15);
+}
+
+/* ---- Breadcrumb enhanced ---- */
+.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;
+}
+
+.readmore-btn:hover {
+    transform: scale(1.15) rotate(45deg) !important;
+    box-shadow: 0 10px 30px rgba(217, 40, 0, 0.45) !important;
+}
+
+/* ---- WOW animations enhanced ---- */
+.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;
+}
+
+.footer-logo img:hover {
+    transform: scale(1.08) rotate(-3deg);
+}
+
+/* ---- Breadcrumb active pulsing dot ---- */
+.breadcrumb-item.active a {
+    position: relative;
+}
+
+/* ---- Hero h3 glow on load ---- */
+@keyframes heroSubtitleFade {
+    from { opacity: 0; transform: translateY(15px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ---- About us list item stagger ---- */
+.about-list-item.is-visible {
+    animation: counterSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+.about-list-item.is-visible:nth-child(1) { animation-delay: 0s; }
+.about-list-item.is-visible:nth-child(2) { animation-delay: 0.1s; }
+.about-list-item.is-visible:nth-child(3) { animation-delay: 0.2s; }
+.about-list-item.is-visible:nth-child(4) { animation-delay: 0.3s; }
+
+/* ---- CTA box text glow ---- */
+.cta-box .section-title h2 {
+    position: relative;
+    z-index: 1;
+}
+
+/* ---- 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 {
+        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;
+        border-bottom: 1px solid var(--divider-color);
+        padding-bottom: 20px;
+        margin-bottom: 20px;
+    }
+
+    .counter-box .col-lg-3:last-child .counter-item {
+        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; }
+}
--- a/dallas.html
+++ b/dallas.html
@@ -37,6 +37,8 @@
    <link rel="stylesheet" href="css/plyr.css">
    <!-- Main Custom Css -->
    <link href="css/custom.css" rel="stylesheet" media="screen">
+    <!-- Enhanced Animations Css -->
+    <link href="css/enhance.css" rel="stylesheet" media="screen">
 </head>

 <body>
@@ -554,6 +556,8 @@
    <script src="js/wow.js"></script>
    <!-- Main Custom js file -->
    <script src="js/function.js"></script>
+    <!-- Enhanced Animations js -->
+    <script src="js/enhance.js"></script>
 </body>

 </html>
--- a/index.html
+++ b/index.html
@@ -37,6 +37,8 @@
    <link rel="stylesheet" href="css/plyr.css">
    <!-- Main Custom Css -->
    <link href="css/custom.css" rel="stylesheet" media="screen">
+    <!-- Enhanced Animations Css -->
+    <link href="css/enhance.css" rel="stylesheet" media="screen">
 </head>

 <body>
@@ -767,6 +769,8 @@
    <script src="js/wow.js"></script>
    <!-- Main Custom js file -->
    <script src="js/function.js"></script>
+    <!-- Enhanced Animations js -->
+    <script src="js/enhance.js"></script>
 </body>

 </html>
--- a/js/enhance.js
+++ b/js/enhance.js
@@ -0,0 +1,357 @@
+(function () {
+    "use strict";
+
+    /* ============================
+       Scroll Progress Bar
+       ============================ */
+    var progressBar = document.createElement('div');
+    progressBar.id = 'tscb-progress';
+    document.body.prepend(progressBar);
+
+    window.addEventListener('scroll', function () {
+        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+        var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+        var progress = (scrollTop / scrollHeight) * 100;
+        progressBar.style.width = progress + '%';
+    }, { passive: true });
+
+    /* ============================
+       Hero Decorative Orbs
+       ============================ */
+    var hero = document.querySelector('.hero');
+    if (hero) {
+        ['hero-orb-1', 'hero-orb-2', 'hero-orb-3'].forEach(function (cls) {
+            var orb = document.createElement('div');
+            orb.className = cls;
+            hero.prepend(orb);
+        });
+    }
+
+    /* ============================
+       Intersection Observer: Stagger counters
+       ============================ */
+    function observeElements(selector, className, threshold) {
+        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 dy = (e.clientY - cy) / (rect.height / 2);
+            var strength = btn.classList.contains('readmore-btn') ? 6 : 8;
+            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 () {
+            btn.style.transition = 'transform 0.1s ease';
+        });
+    });
+
+    /* ============================
+       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();
+        if (linkFile === currentPath || (currentPath === '' && linkFile === 'index.html')) {
+            link.closest('.nav-item').classList.add('active');
+        }
+    });
+
+    /* ============================
+       Smooth Ticker Speed Boost on hover
+       ============================ */
+    var tickerBoxes = document.querySelectorAll('.scrolling-ticker-box');
+    tickerBoxes.forEach(function (box) {
+        box.addEventListener('mouseenter', function () {
+            box.style.animationPlayState = 'paused';
+            var content = box.querySelectorAll('.scrolling-content');
+            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';
+        });
+    });
+
+})();
--- a/liability.html
+++ b/liability.html
@@ -37,6 +37,8 @@
    <link rel="stylesheet" href="css/plyr.css" />
    <!-- Main Custom Css -->
    <link href="css/custom.css" rel="stylesheet" media="screen" />
+    <!-- Enhanced Animations Css -->
+    <link href="css/enhance.css" rel="stylesheet" media="screen" />
  </head>

  <body>
--- a/sponsors.html
+++ b/sponsors.html
@@ -37,6 +37,8 @@
    <link rel="stylesheet" href="css/plyr.css" />
    <!-- Main Custom Css -->
    <link href="css/custom.css" rel="stylesheet" media="screen" />
+    <!-- Enhanced Animations Css -->
+    <link href="css/enhance.css" rel="stylesheet" media="screen" />
  </head>

  <body>
@@ -453,5 +455,7 @@
    <script src="js/wow.js"></script>
    <!-- Main Custom js file -->
    <script src="js/function.js"></script>
+    <!-- Enhanced Animations js -->
+    <script src="js/enhance.js"></script>
  </body>
 </html>