/* ============================================ JaoTech Gworld | animations.css Global Animation & Motion Enhancement Layer Add this AFTER style.css and navbar.css ============================================ */ /* ============================================ FIX LOG (white/blank screen on slow hosting) ============================================ ROOT CAUSE: Several elements had "opacity: 0" set as a static property combined with "animation-fill-mode: both". On slow shared hosting (Namecheap), if CSS loads before JS fires, these elements stay permanently hidden. FIXES APPLIED: 1. Hero elements (.hero-badge, .hero h1, .hero-sub, .hero-btns, .trust-strip): - Removed bare "opacity: 0" declarations - Changed animation-fill-mode from "both" to "forwards" (no pre-animation hidden state) - Reduced animation delays for faster reveal 2. Scroll reveal classes (.reveal-left, .reveal-right, .reveal-scale): - Now scoped under ".js-ready" body class - JS must add class="js-ready" to on DOMContentLoaded for hiding to activate - Without JS, elements are visible by default 3. .float-badge: changed "both" to "forwards", reduced delay from 2s to 1s ACTION REQUIRED IN YOUR JS: Add this to your animations.js or main.js, at the very top of DOMContentLoaded: document.body.classList.add('js-ready'); ============================================ */ /* ============================================================ HOW TO USE THIS FILE: 1. Copy animations.css into your /css/ folder 2. Copy animations.js into your /js/ folder 3. In every HTML file, add inside : AFTER your existing CSS links. 4. In every HTML file, add before : AFTER your existing script tags. That's it. Everything activates automatically. ============================================================ */ /* ============ 1. GLOBAL SMOOTH CURSOR ============ */ /* Custom cursor dot that follows the mouse on desktop */ .cursor-dot { width: 8px; height: 8px; background: var(--blue); border-radius: 50%; position: fixed; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: transform 0.08s ease, background 0.2s ease, width 0.2s ease, height 0.2s ease; mix-blend-mode: multiply; } .cursor-ring { width: 36px; height: 36px; border: 2px solid rgba(26, 75, 156, 0.4); border-radius: 50%; position: fixed; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); transition: transform 0.18s ease, width 0.25s ease, height 0.25s ease, border-color 0.25s ease, opacity 0.25s ease; } /* Cursor expands when hovering links/buttons */ body.cursor-hover .cursor-dot { width: 14px; height: 14px; background: var(--navy); } body.cursor-hover .cursor-ring { width: 54px; height: 54px; border-color: rgba(13, 27, 62, 0.25); } /* Hide on mobile (touch devices don't need cursor) */ @media (max-width: 768px) { .cursor-dot, .cursor-ring { display: none !important; } } /* ============ 2. PAGE TRANSITION OVERLAY ============ */ /* Smooth navy sweep between pages */ .page-transition { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--navy); z-index: 999999; pointer-events: none; transform: translateY(100%); transition: transform 0.55s cubic-bezier(0.77, 0, 0.18, 1); } .page-transition.sweep-in { transform: translateY(0%); } .page-transition.sweep-out { transform: translateY(-100%); } /* ============ 3. HERO CINEMATIC ENTRANCE ============ */ /* Staggered reveal of hero elements on load */ .hero-badge { animation: fadeSlideDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.1s; /* Removed: opacity: 0 — caused permanent invisibility if animation fails */ } .hero h1 { animation: fadeSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.2s; /* Removed: opacity: 0 — caused permanent invisibility if animation fails */ } .hero-sub { animation: fadeSlideUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.3s; /* Removed: opacity: 0 — caused permanent invisibility if animation fails */ } .hero-btns { animation: fadeSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.4s; /* Removed: opacity: 0 — caused permanent invisibility if animation fails */ } @keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ============ 4. HERO FLOATING PARTICLES ============ */ /* Animated floating dots behind hero content */ .hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .hero-particle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.08); animation: floatParticle linear infinite; } @keyframes floatParticle { 0% { transform: translateY(0px) rotate(0deg); opacity: 0.6; } 50% { opacity: 1; } 100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; } } /* ============ 5. HERO GLOBE ANIMATION ============ */ /* Animated spinning globe wireframe in hero background */ .hero-globe { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 480px; height: 480px; opacity: 0.08; pointer-events: none; z-index: 0; animation: globeSpin 40s linear infinite; } @keyframes globeSpin { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } } @media (max-width: 900px) { .hero-globe { width: 280px; height: 280px; right: -40px; opacity: 0.05; } } /* ============ 6. ANIMATED TICKER / MARQUEE ============ */ /* The global regions marquee below the hero */ .world-ticker { background: var(--navy); padding: 12px 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); } .ticker-track { display: flex; gap: 0; animation: tickerScroll 35s linear infinite; white-space: nowrap; width: max-content; } .ticker-track:hover { animation-play-state: paused; } .ticker-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 32px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); } .ticker-item .ticker-dot { width: 5px; height: 5px; background: var(--blue-light); border-radius: 50%; flex-shrink: 0; } .ticker-item .ticker-flag { font-size: 1rem; } @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============ 7. ENHANCED SCROLL REVEAL CLASSES ============ */ /* Multiple reveal directions with varying intensities */ /* Base hidden state — overrides main.js reveal */ /* SAFE: Only hides when JS is active (via .js-ready on body) to prevent invisible content on slow hosting */ .js-ready .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; } .js-ready .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s ease, transform 0.7s ease; } .js-ready .reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.65s ease, transform 0.65s ease; } /* Non-JS fallback: elements already visible with subtle transition */ .reveal-left, .reveal-right, .reveal-scale { transition: opacity 0.7s ease, transform 0.7s ease; } .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible, .js-ready .reveal-left.visible, .js-ready .reveal-right.visible, .js-ready .reveal-scale.visible { opacity: 1; transform: translateX(0) scale(1); } /* ============ 8. TRUST STRIP ANIMATION ============ */ .trust-strip { animation: fadeIn 0.6s ease forwards; animation-delay: 0.5s; /* Removed: opacity: 0 — caused permanent invisibility if animation fails */ } .trust-item { position: relative; transition: transform 0.25s ease; } .trust-item:hover { transform: translateY(-3px); } /* Animated divider dots between trust items */ .trust-inner::before, .trust-inner::after { content: none; } /* ============ 9. SERVICE CARD GLOW & BORDER ANIMATION ============ */ .service-card { position: relative; overflow: hidden; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.3s ease !important; } /* Animated gradient border effect on hover */ .service-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, var(--blue-light), var(--navy), var(--blue-light)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.35s ease; background-size: 200% 200%; animation: gradientShift 3s ease infinite; } .service-card:hover::before { opacity: 1; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Service icon bounce on hover */ .service-icon { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .service-card:hover .service-icon { transform: scale(1.15) rotate(-5deg); } /* Service card shine sweep */ .service-card::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient( 105deg, transparent 40%, rgba(255, 255, 255, 0.06) 50%, transparent 60% ); transition: left 0.6s ease; } .service-card:hover::after { left: 140%; } /* ============ 10. STATS SECTION PULSE RING ============ */ .stat-item { position: relative; overflow: hidden; } .stat-item::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: transparent; transition: box-shadow 0.4s ease; } .stat-item:hover::before { box-shadow: inset 0 0 0 2px rgba(26, 75, 156, 0.3); } .stat-number { position: relative; } /* Glow under the number when counting */ .stat-number.counting::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: var(--blue); border-radius: 3px; animation: pulseWidth 0.8s ease infinite alternate; } @keyframes pulseWidth { from { width: 30px; opacity: 0.6; } to { width: 60px; opacity: 1; } } /* ============ 11. PROCESS STEPS - CONNECTOR ANIMATION ============ */ .process-step { transition: transform 0.3s ease; } .process-step:hover { transform: translateY(-6px); } .process-num { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important; } .process-step:hover .process-num { transform: scale(1.12); box-shadow: 0 8px 24px rgba(26, 75, 156, 0.3); } /* ============ 12. TESTIMONIAL CARD STAGGER ============ */ .testimonial-card { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease !important; } .testimonial-card:hover { transform: translateY(-8px) rotate(-0.5deg) !important; } /* Quote mark decoration */ .testimonial-card::before { content: '\201C'; position: absolute; top: -8px; right: 18px; font-size: 5rem; font-family: var(--font-heading); color: var(--blue); opacity: 0.06; line-height: 1; pointer-events: none; } .testimonial-card { position: relative; } /* ============ 13. NAVBAR ENHANCEMENTS ============ */ /* Animated logo on hover */ .logo-img { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease !important; } .logo:hover .logo-img { transform: scale(1.08) rotate(-3deg); } /* Nav link ripple effect */ .nav-links li a { overflow: hidden; } /* Navbar scroll progress bar */ .nav-progress-bar { position: absolute; bottom: -1px; left: 0; height: 2px; background: linear-gradient(90deg, var(--blue-light), var(--navy)); width: 0%; transition: width 0.1s linear; z-index: 1; } /* ============ 14. CTA BANNER ENHANCEMENTS ============ */ .cta-banner { position: relative; overflow: hidden; } /* Animated diagonal stripes in background */ .cta-banner::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: repeating-linear-gradient( 45deg, transparent, transparent 40px, rgba(255, 255, 255, 0.015) 40px, rgba(255, 255, 255, 0.015) 80px ); animation: stripesDrift 20s linear infinite; pointer-events: none; } @keyframes stripesDrift { from { transform: translateX(0); } to { transform: translateX(80px); } } /* Pulse rings behind CTA buttons */ .cta-btns a { position: relative; } .cta-btns .btn-primary { animation: subtlePulse 3s ease infinite; } @keyframes subtlePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.2); } 50% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } } /* ============ 15. FOOTER ENHANCEMENTS ============ */ /* Social buttons animated hover */ .social-btn { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, color 0.25s ease !important; } .social-btn:hover { transform: translateY(-4px) scale(1.1) !important; } /* Footer link underline animation */ .footer-col ul a { position: relative; display: inline-block; } .footer-col ul a::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: #7BC8F8; transition: width 0.25s ease; } .footer-col ul a:hover::after { width: 100%; } /* ============ 16. SECTION LABEL PULSE ============ */ .section-label { position: relative; animation: none; } /* Glowing dot before section labels */ .section-label::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--blue); border-radius: 50%; margin-right: 7px; vertical-align: middle; animation: labelDotPulse 2s ease infinite; } @keyframes labelDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } /* ============ 17. BUTTON RIPPLE EFFECT ============ */ .btn-primary, .btn-blue, .btn-outline, .btn-outline-dark, .nav-cta { position: relative; overflow: hidden; } .btn-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: scale(0); animation: rippleEffect 0.6s linear; pointer-events: none; } @keyframes rippleEffect { to { transform: scale(4); opacity: 0; } } /* ============ 18. SCROLL PROGRESS INDICATOR ============ */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--blue-light), #7BC8F8, var(--blue)); z-index: 99999; width: 0%; transition: width 0.1s linear; box-shadow: 0 0 8px rgba(37, 99, 200, 0.5); } /* ============ 19. FLOATING ACTION BADGE ============ */ /* "WhatsApp / Chat us" floating badge */ .float-badge { position: fixed; bottom: 84px; right: 24px; background: #25D366; color: white; border-radius: 50px; padding: 10px 18px; font-size: 0.8rem; font-weight: 700; font-family: var(--font-heading); letter-spacing: 0.02em; z-index: 8887; box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4); display: flex; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; animation: floatBadgeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards; text-decoration: none; } .float-badge:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 32px rgba(37, 211, 102, 0.5); color: white; } .float-badge-icon { font-size: 1.1rem; } @keyframes floatBadgeIn { from { opacity: 0; transform: translateY(20px) scale(0.8); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 640px) { .float-badge span.float-badge-text { display: none; } .float-badge { width: 48px; height: 48px; border-radius: 50%; padding: 0; justify-content: center; bottom: 80px; right: 20px; } } /* ============ 20. GLOBAL HOVER LIFT EFFECT ============ */ /* Applied to any card-like element */ .faq-item { transition: transform 0.25s ease, border-color 0.3s ease, box-shadow 0.25s ease !important; } .faq-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } /* ============ 21. WORLD MAP DOTS (Hero decoration) ============ */ /* Subtle animated world map dots overlay */ .hero-map-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.3; pointer-events: none; z-index: 0; mask-image: linear-gradient( to bottom, transparent 0%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.5) 80%, transparent 100% ); } /* ============ 22. TYPING CURSOR IN HERO ============ */ /* Makes hero heading feel like it's being typed live */ .hero-typing-cursor { display: inline-block; width: 3px; height: 0.85em; background: #7BC8F8; margin-left: 3px; vertical-align: middle; border-radius: 2px; animation: blink 1.1s step-end infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ============ 23. SECTION ENTRANCE ANIMATIONS ============ */ /* Global wave-in for entire sections */ @keyframes sectionWaveIn { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0% 0); } } .section-animated { animation: sectionWaveIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; } /* ============ 24. SMOOTH BACK TO TOP BUTTON ============ */ /* Upgraded version over main.js default */ .back-to-top { background: var(--blue) !important; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important, opacity 0.3s ease !important, background 0.25s ease !important, box-shadow 0.25s ease !important; } .back-to-top:hover { transform: translateY(-5px) scale(1.1) !important; box-shadow: 0 8px 28px rgba(13, 27, 62, 0.35) !important; } /* ============ 25. LOADING SKELETON (for dynamic content) ============ */ @keyframes shimmer { 0% { background-position: -500px 0; } 100% { background-position: 500px 0; } } .skeleton { background: linear-gradient( 90deg, var(--ash-light) 25%, var(--border) 37%, var(--ash-light) 63% ); background-size: 1000px 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm); } /* ============ 26. GLOBAL TRANSITION SPEED ============ */ /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .hero-badge, .hero h1, .hero-sub, .hero-btns, .trust-strip { animation: none !important; opacity: 1 !important; transform: none !important; } .cursor-dot, .cursor-ring, .page-transition, .world-ticker .ticker-track, .hero-particle, .hero-globe { display: none !important; } }