/* ============================================ ANIMATIONS.CSS - Premium Animation System Apple / Stripe / Linear style ADDS to existing style.css — does NOT replace ============================================ */ /* ---- PERFORMANCE BASE ---- */ /* Applied to all animated elements via JS */ .anim-active { will-change: transform, opacity; } .anim-done { will-change: auto; } /* ---- SCROLL PROGRESS BAR ---- */ /* ADD in HTML:

right after */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--accent), #FFD180); z-index: 10000; transform-origin: left; transform: scaleX(0); pointer-events: none; } /* ============================================ 1. HEADER — STICKY BLUR ON SCROLL JS adds .scrolled to .header after 60px scroll ============================================ */ .header { backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 0.5s cubic-bezier(0.22, 1, 0.36, 1), -webkit-backdrop-filter 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .header.scrolled { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 20px rgba(0, 0, 0, 0.06); } /* ============================================ 2. HERO — SUBTLE BACKGROUND SHIMMER CSS-only, no JS needed ============================================ */ .hero { position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 50%, rgba(245, 166, 35, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(26, 43, 74, 0.03) 0%, transparent 50%); animation: heroShimmer 25s ease-in-out infinite; pointer-events: none; z-index: 0; } .hero-inner { position: relative; z-index: 1; } @keyframes heroShimmer { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(1.5%, -1%); } 66% { transform: translate(-1%, 0.5%); } } /* Hero text elements — start hidden, GSAP reveals them */ .hero-text h1, .hero-text .subtitle { opacity: 0; } .hero-buttons .btn { opacity: 0; } .hero-image img { opacity: 0; } /* ============================================ 3. BUTTONS — HOVER MICRO-INTERACTIONS CSS-only, cubic-bezier easing ============================================ */ .btn { position: relative; overflow: hidden; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease; } /* Shine sweep on hover */ .btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); transition: left 0.5s ease; pointer-events: none; } .btn:hover::after { left: 100%; } .btn-primary { box-shadow: 0 2px 8px rgba(245, 166, 35, 0.25); } .btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 25px rgba(245, 166, 35, 0.35), 0 0 0 0 rgba(245, 166, 35, 0); } .btn-primary:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; } .btn-outline:hover { transform: translateY(-2px) scale(1.03); } /* CTA glow pulse — add class .btn-glow to CTA buttons */ .btn-glow { animation: btnGlow 3s ease-in-out infinite; } @keyframes btnGlow { 0%, 100% { box-shadow: 0 2px 8px rgba(245, 166, 35, 0.25); } 50% { box-shadow: 0 4px 20px rgba(245, 166, 35, 0.45), 0 0 40px rgba(245, 166, 35, 0.08); } } /* ============================================ 4. CARDS — HOVER LIFT EFFECT CSS-only, smooth cubic-bezier ============================================ */ .product-card, .feature-card, .testimonial-card, .custom-item, .industry-card { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .product-card:hover, .feature-card:hover, .industry-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04); } /* Product card image zoom on hover */ .product-card .card-image { overflow: hidden; } .product-card .card-image img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .product-card:hover .card-image img { transform: scale(1.06); } /* Feature card icon pulse on hover */ .feature-card .feature-icon { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease; } .feature-card:hover .feature-icon { transform: scale(1.1); box-shadow: 0 8px 20px rgba(245, 166, 35, 0.25); } /* ============================================ 5. GALLERY — HOVER ZOOM + OVERLAY ============================================ */ .gallery-item { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .gallery-item:hover { transform: scale(1.03); } .gallery-item img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .gallery-item:hover img { transform: scale(1.08); } .gallery-overlay { transition: opacity 0.4s ease; } .gallery-item:hover .gallery-overlay { opacity: 1; } /* ============================================ 6. NAV LINKS — UNDERLINE SLIDE ============================================ */ .nav a { position: relative; transition: color 0.3s ease; } .nav a::after { content: ''; position: absolute; bottom: -4px; left: 50%; width: 0; height: 2px; background: var(--accent); transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), left 0.35s cubic-bezier(0.22, 1, 0.36, 1); border-radius: 1px; } .nav a:hover::after, .nav a.active::after { width: 100%; left: 0; } /* ============================================ 7. FOOTER LINKS — SLIDE ON HOVER ============================================ */ .footer a { transition: color 0.3s ease, padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .footer a:hover { color: var(--accent); padding-left: 6px; } /* ============================================ 8. PROCESS STEPS — NUMBER HOVER ============================================ */ .step-number { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; } .process-step:hover .step-number { transform: scale(1.1); box-shadow: 0 8px 25px rgba(245, 166, 35, 0.35); } /* ============================================ 9. CTA SECTION — GRADIENT GLOW ============================================ */ .cta-section { position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: -50%; right: -20%; width: 60%; height: 200%; background: radial-gradient(ellipse, rgba(245, 166, 35, 0.08) 0%, transparent 70%); animation: ctaGlow 10s ease-in-out infinite; pointer-events: none; } @keyframes ctaGlow { 0%, 100% { transform: translate(0, 0); opacity: 0.5; } 50% { transform: translate(-5%, 5%); opacity: 1; } } /* ============================================ 10. FORM INPUTS — FOCUS LIFT ============================================ */ .contact-form input, .contact-form textarea, .contact-form select { transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.2s ease; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { transform: translateY(-1px); border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.1), 0 4px 12px rgba(0, 0, 0, 0.04); } /* ============================================ 11. FAQ ACCORDION ============================================ */ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .faq-question::after { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease; } .faq-item.active .faq-question::after { transform: rotate(180deg); } /* ============================================ 12. WHATSAPP FLOAT — PULSE ============================================ */ .bs-wa { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; } .bs-wa:hover { transform: scale(1.12); box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4); } .bs-wa svg { transition: transform 0.3s ease; } .bs-wa:hover svg { transform: rotate(-8deg) scale(1.05); } .bs-wa .pulse { animation: waPulse 2s cubic-bezier(0.22, 1, 0.36, 1) infinite; } @keyframes waPulse { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(1.8); opacity: 0; } } /* ============================================ 13. MOBILE BOTTOM BAR ============================================ */ .bs-mbar { transition: transform 0.3s ease; } .bs-mbar a { transition: background 0.2s ease, color 0.2s ease; } .bs-mbar a:active { background: rgba(255, 255, 255, 0.1); } /* ============================================ 14. URGENT BANNER — SLIDE DOWN ============================================ */ .urgent-banner { opacity: 0; animation: bannerSlide 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards; } @keyframes bannerSlide { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ============================================ 15. STAT COUNTER — GLOW ON HOVER ============================================ */ .stat-number { transition: color 0.3s ease, text-shadow 0.3s ease; } .stat-box:hover .stat-number { color: #FFD180; text-shadow: 0 0 20px rgba(245, 166, 35, 0.25); } /* ============================================ 16. TESTIMONIAL — QUOTE HOVER ============================================ */ .testimonial-card::before { transition: opacity 0.4s ease, transform 0.4s ease; } .testimonial-card:hover::before { opacity: 0.5; transform: scale(1.1); } /* ============================================ 17. PAGE HERO — GRADIENT DRIFT ============================================ */ .page-hero { position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; top: 0; left: -50%; width: 200%; height: 100%; background: radial-gradient(ellipse at 50% 50%, rgba(245, 166, 35, 0.06) 0%, transparent 60%); animation: pageHeroGlow 15s ease-in-out infinite; pointer-events: none; } @keyframes pageHeroGlow { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10%, 0); } } /* Page hero elements — start hidden */ .page-hero h1, .page-hero p { opacity: 0; } /* ============================================ 18. SCROLL-TRIGGERED ELEMENTS These start hidden and GSAP reveals them ============================================ */ [data-anim] { opacity: 0; } [data-anim].anim-visible { opacity: 1; } /* ============================================ ACCESSIBILITY — REDUCED MOTION ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-anim], .hero-text h1, .hero-text .subtitle, .hero-buttons .btn, .hero-image img, .page-hero h1, .page-hero p { opacity: 1 !important; transform: none !important; } .urgent-banner { opacity: 1; animation: none; } html { scroll-behavior: auto; } } /* ============================================ MOBILE — SIMPLIFIED ANIMATIONS ============================================ */ @media (max-width: 768px) { /* Disable hover transforms on mobile */ .btn:hover { transform: none; } .btn-primary:hover { transform: none; } /* Reduce card lift */ .product-card:hover, .feature-card:hover, .industry-card:hover { transform: translateY(-3px); } /* Disable background animations */ .hero::before { animation: none; background: radial-gradient(ellipse at 30% 50%, rgba(245, 166, 35, 0.03) 0%, transparent 50%); } .cta-section::before { animation: none; } .page-hero::before { animation: none; } } @media (max-width: 480px) { .product-card:hover, .feature-card:hover, .industry-card:hover { transform: none; } .gallery-item:hover { transform: none; } .gallery-item:hover img { transform: scale(1.03); } }