/* ============================================================ ANDURA SYSTEMS — PREMIUM ANIMATION LAYER v2.0 animations.css ──────────────────────────────────────────────────────────── Upload alongside style.css. Link AFTER style.css in . ============================================================ */ /* ============================================================ 00. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal-fade-up, .reveal-fade-left, .reveal-fade-right, .reveal-zoom, .char-anim { opacity: 1 !important; transform: none !important; } .hero-blob, .floating-shape, .salesforce-title-logo, .cursor-glow, .light-ray { display: none !important; } .ai-center-logo::before, .ai-center-logo::after { display: none !important; } } /* ============================================================ 01. SCROLL REVEAL BASE STATES ============================================================ */ .reveal-fade-up { opacity: 0; transform: translateY(50px); transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1); } .reveal-fade-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1); } .reveal-fade-right { opacity: 0; transform: translateX(50px); transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1); } .reveal-zoom { opacity: 0; transform: scale(0.88); transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1); } .reveal-fade-up.in-view, .reveal-fade-left.in-view, .reveal-fade-right.in-view, .reveal-zoom.in-view { opacity: 1; transform: none; } /* Stagger delays */ .stagger-1 { transition-delay: 0.08s; } .stagger-2 { transition-delay: 0.16s; } .stagger-3 { transition-delay: 0.24s; } .stagger-4 { transition-delay: 0.32s; } .stagger-5 { transition-delay: 0.40s; } .stagger-6 { transition-delay: 0.48s; } .stagger-7 { transition-delay: 0.56s; } .stagger-8 { transition-delay: 0.64s; } /* ============================================================ 02. CUSTOM CURSOR GLOW ============================================================ */ .cursor-glow { position: fixed; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(34,197,94,0.07) 0%, transparent 65%); pointer-events: none; z-index: 99999; top: 0; left: 0; transform: translate(-50%, -50%); transition: opacity 0.4s ease; mix-blend-mode: multiply; } /* ============================================================ 03. PAGE LOAD OVERLAY ============================================================ */ .page-loader { position: fixed; inset: 0; background: #fff; z-index: 999999; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease, visibility 0.5s ease; } .page-loader.loaded { opacity: 0; visibility: hidden; } .loader-bar { width: 220px; height: 3px; background: #e5e7eb; border-radius: 99px; overflow: hidden; } .loader-fill { height: 100%; background: linear-gradient(90deg, #16a34a, #22c55e); border-radius: 99px; animation: loaderFill 0.9s cubic-bezier(0.4,0,0.2,1) forwards; } @keyframes loaderFill { from { width: 0; } to { width: 100%; } } /* ============================================================ 04. HEADER ENHANCEMENTS ============================================================ */ .logo { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); } .logo:hover { transform: scale(1.05); } /* Animated underline on desktop nav */ .nav-menu > ul > li > a { position: relative; } .nav-menu > ul > li > a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #16a34a, #22c55e); border-radius: 2px; transition: width 0.35s cubic-bezier(0.16,1,0.3,1); } .nav-menu > ul > li > a:hover::after, .nav-menu > ul > li > a.active::after { width: 100%; } /* Scrolled state */ .header.scrolled { padding: 10px 0; box-shadow: 0 4px 32px rgba(0,0,0,0.09); transition: padding 0.35s ease, box-shadow 0.35s ease; } /* Chevron rotation for dropdown */ .dropdown .fa-chevron-down { transition: transform 0.3s ease; display: inline-block; } .dropdown:hover .fa-chevron-down { transform: rotate(180deg); } /* ============================================================ 05. HERO — BACKGROUND EFFECTS ============================================================ */ /* Animated blobs */ .hero-blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(80px); will-change: transform; } .hero-blob-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(34,197,94,0.10) 0%, transparent 70%); top: -150px; left: -150px; animation: blobFloat1 10s ease-in-out infinite; } .hero-blob-2 { width: 450px; height: 450px; background: radial-gradient(circle, rgba(22,163,74,0.07) 0%, transparent 70%); bottom: -80px; right: -80px; animation: blobFloat2 12s ease-in-out infinite; } .hero-blob-3 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(34,197,94,0.06) 0%, transparent 70%); top: 40%; left: 60%; animation: blobFloat1 8s ease-in-out infinite 2s; } @keyframes blobFloat1 { 0%,100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(35px,-28px) scale(1.06); } 66% { transform: translate(-22px,18px) scale(0.96); } } @keyframes blobFloat2 { 0%,100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-30px,22px) scale(1.08); } 70% { transform: translate(20px,-15px) scale(0.95); } } /* Floating decorative shapes */ .floating-shape { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0.18; border: 2px solid #22c55e; will-change: transform; } .shape-1 { width: 60px; height: 60px; top: 15%; left: 8%; animation: shapeFloat 6s ease-in-out infinite 0s; } .shape-2 { width: 30px; height: 30px; top: 30%; right: 12%; border-radius: 6px; animation: shapeFloat 5s ease-in-out infinite 1s; } .shape-3 { width: 45px; height: 45px; bottom: 20%; left: 15%; animation: shapeFloat 7s ease-in-out infinite 2s; border-style: dashed; } .shape-4 { width: 20px; height: 20px; top: 65%; right: 20%; border-radius: 4px; transform: rotate(45deg); animation: shapeFloat 4s ease-in-out infinite 0.5s; } @keyframes shapeFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(10deg); } } /* Light rays */ .light-ray { position: absolute; pointer-events: none; z-index: 0; opacity: 0.04; background: linear-gradient(180deg, #22c55e 0%, transparent 100%); transform-origin: top center; width: 2px; animation: rayPulse 4s ease-in-out infinite; } .ray-1 { height: 300px; left: 20%; top: 0; animation-delay: 0s; } .ray-2 { height: 250px; left: 50%; top: 0; animation-delay: 1s; } .ray-3 { height: 200px; right: 20%; top: 0; animation-delay: 2s; } @keyframes rayPulse { 0%,100% { opacity: 0.03; } 50% { opacity: 0.08; } } /* ============================================================ 06. HERO TITLE — CHARACTER ANIMATION ============================================================ */ .char-anim { display: inline-block; opacity: 0; transform: translateY(40px) rotateX(-40deg); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1); } .char-anim.char-in { opacity: 1; transform: translateY(0) rotateX(0deg); } /* Space chars */ .char-space { display: inline-block; width: 0.28em; } /* ============================================================ 07. CTA BUTTONS — ENHANCED ============================================================ */ .cta-primary, .cta-secondary, .consult-btn, .contact-submit-btn { position: relative; overflow: hidden; } /* Ripple */ .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.30); transform: scale(0); animation: rippleAnim 0.7s linear; pointer-events: none; } @keyframes rippleAnim { to { transform: scale(5); opacity: 0; } } /* Arrow moves right */ .cta-primary i, .view-services i, .contact-submit-btn i { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); } .cta-primary:hover i, .view-services:hover i, .contact-submit-btn:hover i { transform: translateX(8px); } /* Shine sweep on consult btn */ .consult-btn { position: relative; overflow: hidden; } .consult-btn::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transform: skewX(-20deg); transition: left 0.55s ease; } .consult-btn:hover::before { left: 130%; } /* Gradient border glow on primary CTA */ .cta-primary { transition: background 0.25s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease; } .cta-primary:hover { box-shadow: 0 16px 40px rgba(22,163,74,0.40), 0 0 0 4px rgba(34,197,94,0.15); } /* ============================================================ 08. ROLE CARDS — 3D TILT + GLOW ============================================================ */ .role-card { transition: transform 0.2s ease, box-shadow 0.35s ease, border-color 0.35s ease; transform-style: preserve-3d; will-change: transform; } .role-card:hover { border-color: rgba(34,197,94,0.35); box-shadow: 0 24px 48px rgba(0,0,0,0.14), 0 0 0 1px rgba(34,197,94,0.15); } .role-card:hover .role-icon-wrap { animation: iconBounce 0.55s cubic-bezier(0.34,1.56,0.64,1); } @keyframes iconBounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 70% { transform: translateY(-4px); } } /* Animated divider expand */ .role-divider { transition: width 0.4s cubic-bezier(0.16,1,0.3,1); } .role-card:hover .role-divider { width: 60px; } /* ============================================================ 09. SALESFORCE SERVICE CARDS — BORDER GLOW + SHINE ============================================================ */ .sf-service-card { position: relative; overflow: hidden; } /* Animated gradient border */ .sf-service-card::after { content: ''; position: absolute; inset: -2px; border-radius: 26px; background: linear-gradient(135deg, #16a34a, #22c55e, #16a34a); background-size: 200% 200%; z-index: -1; opacity: 0; transition: opacity 0.4s ease; animation: borderSpin 3s linear infinite; } .sf-service-card:hover::after { opacity: 1; } /* White inner fill to cover the animated border except at edges */ .sf-service-card::before { content: ''; position: absolute; inset: 2px; border-radius: 22px; background: #fff; z-index: 0; } .sf-service-card > * { position: relative; z-index: 1; } @keyframes borderSpin { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .sf-service-card:hover .sf-icon { animation: iconPulse 0.55s ease; } @keyframes iconPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } } /* ============================================================ 10. INDUSTRY CARDS — SHINE + 3D TILT ============================================================ */ .industry-card { position: relative; overflow: hidden; transform-style: preserve-3d; will-change: transform; } .industry-card::after { content: ''; position: absolute; top: -50%; left: -80%; width: 50%; height: 200%; background: linear-gradient(90deg, transparent, rgba(22,163,74,0.09), transparent); transform: skewX(-20deg); transition: left 0.65s ease; pointer-events: none; } .industry-card:hover::after { left: 145%; } .industry-card:hover i { animation: iconSpin 0.45s ease; } @keyframes iconSpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(-14deg) scale(1.25); } 100% { transform: rotate(0deg) scale(1); } } /* ============================================================ 11. FEATURE BOXES (Talent) ============================================================ */ .feature-box:hover .feature-icon { animation: featurePulse 0.55s ease; } @keyframes featurePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); box-shadow: 0 0 20px rgba(34,197,94,0.4); } } /* ============================================================ 12. TRUST BAR ============================================================ */ .trust-bar div { transition: transform 0.3s ease; } .trust-bar div:hover { transform: translateY(-5px); } .trust-bar div:hover i { animation: trustBounce 0.5s ease; } @keyframes trustBounce { 0%,100% { transform: scale(1); } 50% { transform: scale(1.40); } } /* ============================================================ 13. AI NETWORK — ENHANCED CENTER HUB ============================================================ */ .ai-center-logo { position: relative; } .ai-center-logo::before, .ai-center-logo::after { content: ''; position: absolute; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; animation: centerPulse 3s ease-out infinite; } .ai-center-logo::before { width: 130px; height: 130px; border: 2px solid rgba(16,185,129,0.35); animation-delay: 0s; } .ai-center-logo::after { width: 175px; height: 175px; border: 1.5px solid rgba(16,185,129,0.20); animation-delay: 1s; } @keyframes centerPulse { 0% { opacity: 0.9; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.75); } } /* Third ring added via JS */ .ai-ring-3 { position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(16,185,129,0.12); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; animation: centerPulse 3s ease-out infinite 1.8s; } /* Icon hover glow */ .ai-icon { transition: transform 0.3s ease, box-shadow 0.3s ease; } .ai-icon:hover { transform: scale(1.2); box-shadow: 0 0 28px rgba(34,197,94,0.35); } /* ============================================================ 14. CONTACT FORM ENHANCEMENTS ============================================================ */ .contact-field label { transition: color 0.3s ease, letter-spacing 0.3s ease; } .contact-field:focus-within label { color: #22c55e; letter-spacing: 2px; } .contact-field input, .contact-field textarea { transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease, background 0.25s ease; } .contact-field input:focus, .contact-field textarea:focus { transform: translateY(-2px); } .contact-info-icon { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease; } .contact-info-item:hover .contact-info-icon { transform: scale(1.15) rotate(-8deg); background: rgba(34,197,94,0.2); } /* ============================================================ 15. COUNTER NUMBER ANIMATION ============================================================ */ .count-up { display: inline-block; font-variant-numeric: tabular-nums; } /* ============================================================ 16. FOOTER ENHANCEMENTS ============================================================ */ .social-links a { transition: background 0.3s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease; } .social-links a:hover { box-shadow: 0 0 24px rgba(22,163,74,0.50); } .footer-col a { position: relative; } .footer-col a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: #22c55e; transition: width 0.3s ease; } .footer-col a:hover::after { width: 100%; } .salesforce-title-logo { animation: logoFloat 5s ease-in-out infinite; } @keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ============================================================ 17. SCROLL-TO-TOP BUTTON ============================================================ */ .scroll-top-btn { position: fixed; bottom: 32px; right: 32px; width: 50px; height: 50px; background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; z-index: 9997; opacity: 0; transform: translateY(20px) scale(0.8); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease; box-shadow: 0 4px 20px rgba(22,163,74,0.40); } .scroll-top-btn.visible { opacity: 1; transform: translateY(0) scale(1); } .scroll-top-btn:hover { transform: translateY(-6px) scale(1.08); box-shadow: 0 12px 32px rgba(22,163,74,0.55); } /* ============================================================ 18. SECTION TAG ENTRANCE ============================================================ */ .talent-tag, .contact-tag, .section-tag { transition: opacity 0.5s ease, transform 0.5s ease; } /* ============================================================ 19. SALESFORCE SECTION — BOTTOM PADDING FIX ============================================================ */ .salesforce-services { padding-bottom: 80px; } /* ============================================================ 20. ANIMATED SECTION DIVIDER (between talent & AI section) ============================================================ */ .section-divider-wave { width: 100%; height: 60px; position: relative; overflow: hidden; margin: 0; line-height: 0; } .section-divider-wave svg { display: block; width: 100%; height: 100%; } /* ============================================================ 21. GLOWING SKILL / STAT BADGES (trust bar) ============================================================ */ .trust-bar { position: relative; z-index: 2; } .trust-bar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(34,197,94,0.04) 50%, transparent 100%); animation: trustGlow 4s ease-in-out infinite; pointer-events: none; } @keyframes trustGlow { 0%,100% { opacity: 0; } 50% { opacity: 1; } }