/* ========================================================================== MSME EXPERTS — Animations Subtle only: fade-in, slide-up, hover-lift, counters. No flashy motion. ========================================================================== */ /* ---------- Scroll reveal base state ---------- Content is visible by default so it never depends on JavaScript to be seen (no-JS / blocked-script / slow-network users still get full content). animations.js adds "js-anim" to before arming the hidden-until-scrolled state, so only capable browsers animate. */ .reveal, .reveal-fade { opacity: 1; transform: none; } .js-anim .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; will-change: opacity, transform; } .js-anim .reveal.is-visible { opacity: 1; transform: translateY(0); } .js-anim .reveal-fade { opacity: 0; transition: opacity 0.7s ease; } .js-anim .reveal-fade.is-visible { opacity: 1; } /* Stagger helper delays for grids */ .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } .reveal-delay-4 { transition-delay: 0.32s; } .reveal-delay-5 { transition-delay: 0.40s; } .reveal-delay-6 { transition-delay: 0.48s; } .reveal-delay-7 { transition-delay: 0.56s; } .reveal-delay-8 { transition-delay: 0.64s; } /* ---------- Hover lift (applied via utility class) ---------- */ .hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; } .hover-lift:hover { transform: translateY(-6px); } /* ---------- Fade in keyframe (used for hero on load) ---------- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .animate-hero-in { animation: fadeInUp 0.7s ease both; } .animate-hero-in.delay-1 { animation-delay: 0.12s; } .animate-hero-in.delay-2 { animation-delay: 0.24s; } .animate-hero-in.delay-3 { animation-delay: 0.36s; } /* ---------- Back to top fade ---------- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ---------- Reduced motion: respect user preference ---------- */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-fade, .animate-hero-in { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } .hover-lift:hover, .service-card:hover, .stat-card:hover, .join-benefit-card:hover { transform: none !important; } }