/*===================================================== VIEWPORT ANIMATIONS - Initial States & Helpers ======================================================*/ /* GSAP will handle initial states - keep content visible by default */ /* This prevents content from being hidden if GSAP doesn't load */ /* To temporarily disable animations, add class 'no-animations' to */ body.no-animations * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } /* Initial states ONLY for custom animation classes */ .animate-fade-up, .animate-fade-in, .animate-slide-left, .animate-slide-right, .animate-scale-up, .animate-rotate-in, .animate-bounce-in, .animate-flip, .animate-stagger-item { /* Content remains visible - GSAP will animate from current state */ } /* Prevent layout shift during animation */ .animate-reveal { overflow: hidden; } /* Smooth transitions */ * { will-change: auto; } /* Override only when animations are active */ .gsap-active { will-change: transform, opacity; } /* ============================================ CUSTOM ANIMATION CLASSES (Optional Use) ============================================ */ /* Fade Up - Apply to any element */ .fade-up-on-scroll { opacity: 0; transform: translateY(60px); } /* Slide from sides */ .slide-left-on-scroll { opacity: 0; transform: translateX(-100px); } .slide-right-on-scroll { opacity: 0; transform: translateX(100px); } /* Scale animations */ .scale-up-on-scroll { opacity: 0; transform: scale(0.8); } /* Rotation */ .rotate-in-on-scroll { opacity: 0; transform: rotate(-15deg); } /* For better performance - GPU acceleration */ .animate-fade-up, .animate-fade-in, .animate-slide-left, .animate-slide-right, .animate-scale-up, .animate-rotate-in, .animate-bounce-in, .animate-flip, .why-choose-us__item, .services-section__card, .portfolio-showcase__item, .process-two__single, .testimonial-two__single { transform: translateZ(0); backface-visibility: hidden; } /* Responsive adjustments */ @media (max-width: 767px) { /* Reduce animation distance on mobile for better performance */ .animate-fade-up { transform: translateY(30px) !important; } .animate-slide-left, .animate-slide-right { transform: translateX(0) !important; } } /* Prefers reduced motion - respect user preferences */ @media (prefers-reduced-motion: reduce) { .animate-fade-up, .animate-fade-in, .animate-slide-left, .animate-slide-right, .animate-scale-up, .animate-rotate-in, .animate-bounce-in, .animate-flip, .animate-stagger-item, .why-choose-us__item, .services-section__card, .portfolio-showcase__item, .process-two__single, .testimonial-two__single, .blog-two__single, .blog-two__single-two { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } }