/* =========================== GSAP Animation Base States Elements start in these states and GSAP animates them to their final state. The .gsap-ready class is added to by main.js when GSAP loads successfully. Without it, everything stays visible. =========================== */ /* Fade up (default reveal animation) */ .gsap-ready .anim-fade-up { opacity: 0; transform: translateY(30px); } /* Fade in only */ .gsap-ready .anim-fade { opacity: 0; } /* Stagger children */ .gsap-ready .anim-stagger > * { opacity: 0; transform: translateY(20px); } /* Hero specific */ .gsap-ready .hero__name, .gsap-ready .hero__title, .gsap-ready .hero__tagline { opacity: 0; transform: translateY(40px); } .gsap-ready .hero__scroll { opacity: 0; } /* Principle animation states */ .gsap-ready .principle__number { opacity: 0; transform: translateY(20px); } .gsap-ready .principle__heading { opacity: 0; transform: translateY(15px); } .gsap-ready .principle__body { opacity: 0; transform: translateY(15px); } /* Timeline entries */ .gsap-ready .timeline__entry { opacity: 0; transform: translateX(-20px); } /* Strengths */ .gsap-ready .strength { opacity: 0; transform: translateY(20px); } /* Contact links */ .gsap-ready .contact__link { opacity: 0; transform: translateY(15px); } /* =========================== Reduced motion =========================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .anim-fade-up, .anim-fade, .anim-stagger > *, .hero__name, .hero__title, .hero__tagline, .hero__scroll, .principle__number, .principle__heading, .principle__body, .timeline__entry, .strength, .contact__link { opacity: 1 !important; transform: none !important; } }