/** * Pre-hide hero elements before GSAP runs. * Loaded in so these rules apply before first paint, * preventing the "flash of unstyled content → animate" problem. * * Body class .page-gsap-hero = inner pages with navbar + full hero timeline * Body class .page-gsap-about = about page (hero only, no navbar animation) */ /* Navbar slide-down */ .page-gsap-hero .navbar-3.w-nav { opacity: 0; transform: translate3d(0, -30px, 0); } /* Hero badge */ .page-gsap-hero .ln-hero .ln-badge, .page-gsap-about .ln-hero .ln-badge { opacity: 0; transform: translate3d(0, 20px, 0); } /* Hero title */ .page-gsap-hero .ln-hero h2, .page-gsap-about .ln-hero h2 { opacity: 0; transform: translate3d(0, 40px, 0); } /* Hero subtitle */ .page-gsap-hero .ln-hero .ln-hero-sub, .page-gsap-about .ln-hero .ln-hero-sub { opacity: 0; transform: translate3d(0, 30px, 0); } /* Hero pills */ .page-gsap-hero .forex-hero-points li { opacity: 0; transform: translate3d(0, 20px, 0); } /* Hero CTA button */ .page-gsap-hero .forex-hero-cta { opacity: 0; transform: translate3d(0, 20px, 0); } /* Skip all of the above if user prefers reduced motion */ @media (prefers-reduced-motion: reduce) { .page-gsap-hero .navbar-3.w-nav, .page-gsap-hero .ln-hero .ln-badge, .page-gsap-hero .ln-hero h2, .page-gsap-hero .ln-hero .ln-hero-sub, .page-gsap-hero .forex-hero-points li, .page-gsap-hero .forex-hero-cta, .page-gsap-about .ln-hero .ln-badge, .page-gsap-about .ln-hero h2, .page-gsap-about .ln-hero .ln-hero-sub { opacity: 1 !important; transform: none !important; } }