KeshavAnandCode/tscb-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance homepage animations and fix visual glitches

Browse Source 
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
This commit is contained in:
ka-official
2026-03-17 21:02:24 +00:00
parent 8804d671a2
commit d0b7a9a90d
9 changed files with 571 additions and 816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.replit
View File

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

9
about.html
View File

@@ -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>

BIN
attached_assets/image_1773780434476.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
attached_assets/image_1773780450841.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
attached_assets/image_1773780452708.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

656
css/enhance.css
View File

@@ -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;
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);
background: rgba(0, 0, 0, 0.90) !important;
backdrop-filter: blur(24px) saturate(180%) !important;
-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
border-bottom: 1px solid rgba(206, 156, 91, 0.25) !important;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
}
/* ---- 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 ---- */
@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;
}
}
/* About image layout is intentionally handled by custom.css only.
The overlay (position:absolute) must be preserved at all screen sizes. */
/* ---- 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);
animation: counterRotate 20s linear infinite;
transparent 360deg
);
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 ---- */
.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 logos — NO default opacity:0, GSAP handles initial state ---- */
.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 ---- */
.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 orb ---- */
.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 {
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;
.cta-box .container {
position: relative;
z-index: 1;
}
/* ---- 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 ul li a,
.footer-contact .footer-info-box-content p a {
/* ---- Footer links underline ---- */
.footer-links ul li 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 ---- */
.section-title h3 {
letter-spacing: 0.08em;
/* ---- Animated gradient on accent spans ---- */
.section-title h2 span,
.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;
}
/* ---- Image reveal enhanced ---- */
.reveal {
overflow: hidden;
}
/* ---- Image hover scale (team-member, ministries) ---- */
.team-image,
.ministries-image {
overflow: hidden;
border-radius: 0 0 100px 0;
background: linear-gradient(135deg, #d92800 0%, #b01d00 100%) !important;
}
/* ---- 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 ---- */
.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 spring ---- */
.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 ---- */
.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 ---- */
/* ---- Logo footer 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 ---- */
.breadcrumb-item.active a {
position: relative;
/* ---- Body smooth scroll ---- */
html {
scroll-behavior: smooth;
}
/* ---- Hero h3 glow on load ---- */
@keyframes heroSubtitleFade {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
/* ---- Smooth body fade in ---- */
body {
animation: bodyReveal 0.4s ease both;
}
/* ---- About us list item stagger ---- */
.about-list-item.is-visible {
animation: counterSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
@keyframes bodyReveal {
from { opacity: 0; }
to { opacity: 1; }
}
.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; }
/* ---- Mobile responsive ---- */
@media (max-width: 767px) {
.hero-orb-1 { width: 350px; height: 350px; }
.hero-orb-2 { width: 250px; height: 250px; }
.hero-orb-3 { display: none; }
/* ---- CTA box text glow ---- */
.cta-box .section-title h2 {
position: relative;
z-index: 1;
.service-ticker::before,
.service-ticker::after { width: 60px; }
.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 {
gap: 15px;
}
.about-list-item {
width: 100%;
}
}
/* ---- Responsive counter ---- */
@media (max-width: 575px) {
.counter-title h2 {
font-size: 36px !important;
}
.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; }
}

2
index.html
View File

@@ -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>

402
js/enhance.js
View File

@@ -1,357 +1,81 @@
/* =====================================================
TSCB — Cross-page Utilities
===================================================== */
(function () {
"use strict";
'use strict';
/* ============================
Scroll Progress Bar
============================ */
var progressBar = document.createElement('div');
progressBar.id = 'tscb-progress';
document.body.prepend(progressBar);
/* ---- Scroll Progress Bar ---- */
(function () {
var bar = document.createElement('div');
bar.id = 'tscb-progress';
document.body.appendChild(bar);
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 });
function onScroll() {
var scrollTop = window.scrollY || document.documentElement.scrollTop;
var docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var pct = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
bar.style.width = pct + '%';
}
/* ============================
Hero Decorative Orbs
============================ */
var hero = document.querySelector('.hero');
if (hero) {
['hero-orb-1', 'hero-orb-2', 'hero-orb-3'].forEach(function (cls) {
window.addEventListener('scroll', onScroll, { passive: true });
})();
/* ---- Hero Decorative Orbs ---- */
(function () {
var hero = document.querySelector('.hero');
if (!hero) return;
[1, 2, 3].forEach(function (n) {
var orb = document.createElement('div');
orb.className = cls;
hero.prepend(orb);
orb.className = 'hero-orb-' + n;
hero.appendChild(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);
}
/* ---- Magnetic Buttons ---- */
(function () {
var btns = document.querySelectorAll('.btn-default, .readmore-btn, .circular-arrow');
btns.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) * 0.25;
var dy = (e.clientY - cy) * 0.25;
btn.style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';
});
}, { 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'
btn.addEventListener('mouseleave', function () {
btn.style.transform = '';
});
});
})();
/* --- 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';
/* ---- Active nav link ---- */
(function () {
var currentFile = window.location.pathname.split('/').pop() || 'index.html';
var links = document.querySelectorAll('.navbar-nav .nav-link');
links.forEach(function (link) {
var href = link.getAttribute('href') || '';
var file = href.split('/').pop();
if (file === currentFile || (currentFile === '' && file === 'index.html')) {
var item = link.closest('.nav-item');
if (item) item.classList.add('active');
}
});
})();
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)';
}
/* ---- Ticker pause on hover ---- */
(function () {
var ticker = document.querySelector('.ticker-wrap');
if (!ticker) return;
var inner = ticker.querySelector('.ticker');
if (!inner) return;
ticker.addEventListener('mouseenter', function () {
inner.style.animationPlayState = 'paused';
});
});
/* ============================
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 = '';
});
});
})();
})();

315
js/home-animations.js Normal file
View File

@@ -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);
});
})();