/* ============================================================ APICAL ERP — SITE-WIDE ANIMATION ENHANCEMENT v2.0 Targets exact class names from: index, manufacturing, trading, jobwork, features, blog, contact pages. ADD TO EVERY PAGE (in , AFTER your existing styles): ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .anim { opacity: 1 !important; transform: none !important; } } /* === BASE SCROLL-TRIGGER CLASS (applied by JS) === */ .anim { opacity: 0; will-change: opacity, transform; transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .anim.in { opacity: 1 !important; transform: translate(0,0) scale(1) rotate(0deg) !important; } .anim-up { transform: translateY(45px); } .anim-down { transform: translateY(-40px); } .anim-left { transform: translateX(50px); } .anim-right { transform: translateX(-50px); } .anim-scale { transform: scale(0.88); } /* ============================================================ HERO — PAGE-LOAD STAGGER (all pages) ============================================================ */ @keyframes heroReveal { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } @keyframes badgePop { 0% { opacity: 0; transform: translateY(-10px) scale(0.9); } 60% { transform: translateY(2px) scale(1.03); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ctaPulse { 0%, 100% { box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3); } 50% { box-shadow: 0 4px 30px rgba(249, 115, 22, 0.55); } } .hero-badge { animation: badgePop 0.6s ease-out 0.15s both; } .hero h1 { animation: heroReveal 0.8s ease-out 0.3s both; } .hero h1 .accent { animation: heroReveal 0.7s ease-out 0.5s both; } .hero-desc { animation: heroReveal 0.7s ease-out 0.45s both; } .hero-features { animation: heroReveal 0.7s ease-out 0.55s both; } .hero-feature:nth-child(1) { animation: heroReveal 0.5s ease-out 0.6s both; } .hero-feature:nth-child(2) { animation: heroReveal 0.5s ease-out 0.72s both; } .hero-feature:nth-child(3) { animation: heroReveal 0.5s ease-out 0.84s both; } .hero-feature:nth-child(4) { animation: heroReveal 0.5s ease-out 0.96s both; } .hero-cta { animation: heroReveal 0.7s ease-out 0.8s both; } .hero-cta .btn-primary { animation: heroReveal 0.7s ease-out 0.8s both, ctaPulse 3s ease-in-out 2.5s infinite; } /* Subpage heroes */ .page-header, .features-hero, .features-hero-content, .contact-hero, .contact-hero-content, .contact-badge { animation: heroReveal 0.7s ease-out 0.2s both; } .breadcrumb { animation: heroReveal 0.5s ease-out 0.1s both; } /* ============================================================ STAT BOXES (index hero-right) ============================================================ */ @keyframes statPop { from { opacity: 0; transform: translateY(25px) scale(0.85); } to { opacity: 1; transform: translateY(0) scale(1); } } .stat-box:nth-child(1) { animation: statPop 0.6s ease-out 0.5s both; } .stat-box:nth-child(2) { animation: statPop 0.6s ease-out 0.7s both; } .stat-box:nth-child(3) { animation: statPop 0.6s ease-out 0.9s both; } .stat-value.counted { animation: statPop 0.4s ease-out both; } /* ============================================================ BENTO GRID — INDUSTRY CARDS (index #industries) ============================================================ */ .bento-item.anim:nth-child(1) { transition-delay: 0s; } .bento-item.anim:nth-child(2) { transition-delay: 0.12s; } .bento-item.anim:nth-child(3) { transition-delay: 0.24s; } .bento-item.anim:nth-child(4) { transition-delay: 0.36s; } .bento-item:hover .bento-icon { transform: scale(1.12) rotate(-3deg); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .bento-item .tag { transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; } .bento-item .tag:hover { transform: scale(1.08); } /* ============================================================ MODULE CARDS (index #modules .module-card-modern) ============================================================ */ @keyframes numberPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } } .module-card-modern.anim:nth-child(1) { transition-delay: 0s; } .module-card-modern.anim:nth-child(2) { transition-delay: 0.1s; } .module-card-modern.anim:nth-child(3) { transition-delay: 0.2s; } .module-card-modern.anim:nth-child(4) { transition-delay: 0.3s; } .module-card-modern.anim:nth-child(5) { transition-delay: 0.4s; } .module-card-modern.anim:nth-child(6) { transition-delay: 0.5s; } .module-card-modern.in .module-number-modern { animation: numberPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; } /* ============================================================ DIFFERENTIATOR CARDS (index #why-us .diff-card-modern) ============================================================ */ .diff-card-modern.anim:nth-child(1) { transition-delay: 0s; } .diff-card-modern.anim:nth-child(2) { transition-delay: 0.07s; } .diff-card-modern.anim:nth-child(3) { transition-delay: 0.14s; } .diff-card-modern.anim:nth-child(4) { transition-delay: 0.21s; } .diff-card-modern.anim:nth-child(5) { transition-delay: 0.28s; } .diff-card-modern.anim:nth-child(6) { transition-delay: 0.07s; } .diff-card-modern.anim:nth-child(7) { transition-delay: 0.14s; } .diff-card-modern.anim:nth-child(8) { transition-delay: 0.21s; } .diff-card-modern.anim:nth-child(9) { transition-delay: 0.28s; } .diff-card-modern.anim:nth-child(10) { transition-delay: 0.35s; } .diff-card-modern:hover .diff-icon-modern { transform: scale(1.15); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================================ TESTIMONIALS (index) ============================================================ */ @keyframes starShimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; filter: brightness(1.4); } } .testimonial-card.active .testimonial-rating { animation: starShimmer 2s ease-in-out 0.4s; } .carousel-dots .dot { transition: all 0.35s cubic-bezier(0.4,0,0.2,1); } /* ============================================================ CLIENT MARQUEE (index) ============================================================ */ .clients-marquee-track:hover { animation-play-state: paused; } .client-logo-item { transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .client-logo-item:hover { transform: translateY(-5px) scale(1.02); } /* ============================================================ INTEGRATION CARDS (index) ============================================================ */ .integration-card.anim:nth-child(1) { transition-delay: 0s; } .integration-card.anim:nth-child(2) { transition-delay: 0.1s; } .integration-card.anim:nth-child(3) { transition-delay: 0.2s; } .integration-card.anim:nth-child(4) { transition-delay: 0.3s; } .integration-card:hover .integration-icon { transform: scale(1.15); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================================ FAQ (index) ============================================================ */ .faq-item.anim:nth-child(1) { transition-delay: 0s; } .faq-item.anim:nth-child(2) { transition-delay: 0.06s; } .faq-item.anim:nth-child(3) { transition-delay: 0.12s; } .faq-item.anim:nth-child(4) { transition-delay: 0.18s; } .faq-item.anim:nth-child(5) { transition-delay: 0.24s; } .faq-item.anim:nth-child(6) { transition-delay: 0.30s; } .faq-item.anim:nth-child(7) { transition-delay: 0.36s; } .faq-item.anim:nth-child(8) { transition-delay: 0.42s; } .faq-item { transition: box-shadow 0.3s ease, border-color 0.3s ease; } .faq-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); } .faq-icon { transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ============================================================ TRUST SECTION (index) ============================================================ */ .trust-item.anim:nth-child(1) { transition-delay: 0s; } .trust-item.anim:nth-child(2) { transition-delay: 0.1s; } .trust-item.anim:nth-child(3) { transition-delay: 0.2s; } .trust-item.anim:nth-child(4) { transition-delay: 0.3s; } /* ============================================================ CTA SECTION (index .cta-section-modern) ============================================================ */ @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .cta-section-modern .btn-white { position: relative; overflow: hidden; } .cta-section-modern .btn-white::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(249,115,22,0.12), transparent); background-size: 200% 100%; animation: shimmer 3.5s ease-in-out infinite; pointer-events: none; } /* ============================================================ BLOG UPDATE CARDS (index .update-card) ============================================================ */ .update-card.anim:nth-child(1) { transition-delay: 0s; } .update-card.anim:nth-child(2) { transition-delay: 0.12s; } .update-card.anim:nth-child(3) { transition-delay: 0.24s; } .update-card .update-image { transition: transform 0.5s ease; } .update-card:hover .update-image { transform: scale(1.04); } /* ============================================================ SECTION HEADERS (index) ============================================================ */ .section-tag-modern.anim, .updates-tag.anim { transform: translateY(-10px) scale(0.9); } .section-tag-modern.in, .updates-tag.in { animation: badgePop 0.5s ease-out both; } .section-title-modern.anim, .updates-title.anim { transform: translateY(30px); } .section-desc-modern.anim, .updates-desc.anim { transform: translateY(20px); } /* ============================================================ NAVBAR SCROLL (all pages — header is sticky) ============================================================ */ header { transition: padding 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, background 0.35s ease; } header.scrolled { padding: 0.7rem 2rem !important; box-shadow: 0 4px 24px rgba(0,0,0,0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255,255,255,0.95); } /* ============================================================ SUBPAGE CARDS — manufacturing / trading / jobwork (.card) ============================================================ */ .section .card { transition: transform 0.35s ease, box-shadow 0.35s ease; } .section .card:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(0,0,0,0.1); } .section .card:hover .card-icon { transform: scale(1.15); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .section .card.anim:nth-child(1) { transition-delay: 0s; } .section .card.anim:nth-child(2) { transition-delay: 0.1s; } .section .card.anim:nth-child(3) { transition-delay: 0.15s; } .section .card.anim:nth-child(4) { transition-delay: 0.2s; } .section .card.anim:nth-child(5) { transition-delay: 0.25s; } .section .card.anim:nth-child(6) { transition-delay: 0.3s; } .industries .tag { transition: transform 0.2s ease, background 0.2s ease; } .industries .tag:hover { transform: scale(1.08); } /* ============================================================ FEATURES PAGE (.feature-item, .module-container) ============================================================ */ .feature-item { transition: transform 0.35s ease, box-shadow 0.35s ease; } .feature-item:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.08); } .feature-item.anim:nth-child(1) { transition-delay: 0s; } .feature-item.anim:nth-child(2) { transition-delay: 0.08s; } .feature-item.anim:nth-child(3) { transition-delay: 0.16s; } .feature-item.anim:nth-child(4) { transition-delay: 0.24s; } .feature-item.anim:nth-child(5) { transition-delay: 0.32s; } .feature-item.anim:nth-child(6) { transition-delay: 0.40s; } .module-container.anim { transform: translateY(40px); } .module-container.in .module-number { animation: numberPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both; } /* ============================================================ BLOG PAGE (.blog-card) ============================================================ */ .blog-card { transition: transform 0.35s ease, box-shadow 0.35s ease; } .blog-card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(0,0,0,0.1); } .blog-card:hover .blog-image { transform: scale(1.06); } .blog-card .blog-image { transition: transform 0.5s ease; } .blog-card.anim:nth-child(1) { transition-delay: 0s; } .blog-card.anim:nth-child(2) { transition-delay: 0.08s; } .blog-card.anim:nth-child(3) { transition-delay: 0.16s; } .blog-card.anim:nth-child(4) { transition-delay: 0.24s; } .blog-card.anim:nth-child(5) { transition-delay: 0.32s; } .blog-card.anim:nth-child(6) { transition-delay: 0.40s; } .blog-card.anim:nth-child(7) { transition-delay: 0.48s; } .blog-card.anim:nth-child(8) { transition-delay: 0.56s; } .blog-card.anim:nth-child(9) { transition-delay: 0.64s; } .blog-card.anim:nth-child(10) { transition-delay: 0.72s; } .blog-card.anim:nth-child(11) { transition-delay: 0.80s; } .blog-card.anim:nth-child(12) { transition-delay: 0.88s; } .blog-card.anim:nth-child(13) { transition-delay: 0.96s; } /* ============================================================ BLOG POST ARTICLES (individual blog pages) ============================================================ */ .article-header { animation: heroReveal 0.7s ease-out 0.2s both; } .article-header-content { animation: heroReveal 0.7s ease-out 0.25s both; } .article-category.anim { transform: translateY(-10px) scale(0.9); } .article-category.in { animation: badgePop 0.5s ease-out both; } /* Step flows within blog posts */ [class$="-step"], .step, .process-step, .timeline-item { transition: transform 0.35s ease, box-shadow 0.35s ease; } [class$="-step"]:hover, .step:hover, .process-step:hover, .timeline-item:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.06); } /* Cards within blog articles */ .accounting-card, .warehouse-card, .planning-card, .strategy-card, .benefit-box, .metric-box, .sign-card { transition: transform 0.35s ease, box-shadow 0.35s ease; } .accounting-card:hover, .warehouse-card:hover, .planning-card:hover, .strategy-card:hover, .benefit-box:hover, .metric-box:hover, .sign-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); } /* Related post cards */ .related-card { transition: transform 0.35s ease, box-shadow 0.35s ease; } .related-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); } /* Highlight boxes */ .highlight-box { transition: transform 0.3s ease; } .highlight-box:hover { transform: translateX(4px); } /* CTA buttons in blog posts */ .cta-button { transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .cta-button:hover { transform: translateY(-2px); } .cta-button:active { transform: translateY(0) scale(0.97); transition-duration: 0.1s; } /* ============================================================ CONTACT PAGE (.info-item) ============================================================ */ .info-item { transition: transform 0.3s ease; } .info-item:hover { transform: translateX(6px); } .info-item.anim:nth-child(1) { transition-delay: 0s; } .info-item.anim:nth-child(2) { transition-delay: 0.08s; } .info-item.anim:nth-child(3) { transition-delay: 0.16s; } .info-item.anim:nth-child(4) { transition-delay: 0.24s; } /* ============================================================ GLOBAL ENHANCEMENTS (all pages) ============================================================ */ .btn:active, .btn-primary:active, .btn-white:active, .btn-linkedin:active { transform: translateY(0) scale(0.97) !important; transition-duration: 0.1s; } .social-link { transition: background 0.3s ease, transform 0.3s ease; } .social-link:hover { transform: translateY(-3px); } .footer-links a { transition: color 0.25s ease, padding-left 0.25s ease; } .footer-links a:hover { padding-left: 4px; } .back-to-top { transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.3s ease, background 0.3s ease; }