diff --git a/.replit b/.replit index 5cca7a0..29741b1 100644 --- a/.replit +++ b/.replit @@ -37,3 +37,6 @@ author = "agent" task = "shell.exec" args = "npm run dev" waitForPort = 5000 + +[agent] +expertMode = true diff --git a/about.html b/about.html index 86ff7b4..45eac94 100644 --- a/about.html +++ b/about.html @@ -146,15 +146,6 @@ - -
-
- -
-
diff --git a/attached_assets/image_1773780434476.png b/attached_assets/image_1773780434476.png new file mode 100644 index 0000000..ca38936 Binary files /dev/null and b/attached_assets/image_1773780434476.png differ diff --git a/attached_assets/image_1773780450841.png b/attached_assets/image_1773780450841.png new file mode 100644 index 0000000..d44a86f Binary files /dev/null and b/attached_assets/image_1773780450841.png differ diff --git a/attached_assets/image_1773780452708.png b/attached_assets/image_1773780452708.png new file mode 100644 index 0000000..d44a86f Binary files /dev/null and b/attached_assets/image_1773780452708.png differ diff --git a/css/enhance.css b/css/enhance.css index 8fac1a5..7b8a14a 100644 --- a/css/enhance.css +++ b/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; - 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; } -} diff --git a/index.html b/index.html index 606fa65..8ee6ebd 100644 --- a/index.html +++ b/index.html @@ -769,6 +769,8 @@ + + diff --git a/js/enhance.js b/js/enhance.js index 9f87861..7566a72 100644 --- a/js/enhance.js +++ b/js/enhance.js @@ -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 = ''; }); - }); + })(); })(); diff --git a/js/home-animations.js b/js/home-animations.js new file mode 100644 index 0000000..22fbaaf --- /dev/null +++ b/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); + }); + +})();