/* ================================================================ AMEERAH LEGACY FOUNDATION — ANIMATION LAYER (v2.0) Custom reveal classes driven by GSAP ScrollTrigger + AOS (both CDN, initialised in main.js). CSS transitions/hover live in style.css. Every effect degrades to "visible, static" when JS is off or the user prefers reduced motion. ================================================================ */ /* --------------------------------------------------------------- GSAP REVEAL PRIMITIVES main.js adds .is-revealed (or GSAP tweens directly) when the element enters the viewport. Default (pre-JS) state is HIDDEN, so we guard with .js-anim on to avoid a flash-of-hidden content when JavaScript is unavailable. --------------------------------------------------------------- */ .js-anim [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--duration-slower) var(--ease-out-expo), transform var(--duration-slower) var(--ease-out-expo); will-change: opacity, transform; } .js-anim [data-reveal].is-revealed { opacity: 1; transform: none; } /* Directional variants */ .js-anim [data-reveal="left"] { transform: translateX(-32px); } .js-anim [data-reveal="right"] { transform: translateX(32px); } .js-anim [data-reveal="scale"] { transform: scale(0.94); } .js-anim [data-reveal="left"].is-revealed, .js-anim [data-reveal="right"].is-revealed, .js-anim [data-reveal="scale"].is-revealed { transform: none; } /* Staggered children (card grids) — main.js sets --stagger-i per child */ .js-anim [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-slow) var(--ease-out-expo), transform var(--duration-slow) var(--ease-out-expo); transition-delay: calc(var(--stagger-i, 0) * 80ms); } .js-anim [data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; } /* --------------------------------------------------------------- PAGE-TRANSITION MASK (fade out on internal nav, fade in on load) Body opacity is driven by main.js; this just supplies the easing. --------------------------------------------------------------- */ .js-anim body { opacity: 0; } .js-anim body.page-ready { opacity: 1; transition: opacity 300ms var(--ease-in-out); } body.page-leaving { opacity: 0 !important; transition: opacity 200ms var(--ease-in-out); } /* --------------------------------------------------------------- KEYFRAME UTILITIES (used sparingly — e.g. nav overlay items) --------------------------------------------------------------- */ @keyframes alf-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes alf-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes alf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .anim-fade-up { animation: alf-fade-up var(--duration-slow) var(--ease-out-expo) both; } .anim-fade-in { animation: alf-fade-in var(--duration-slow) var(--ease-in-out) both; } .anim-float { animation: alf-float 4s var(--ease-in-out) infinite; } /* --------------------------------------------------------------- AOS OVERRIDES — align the CDN library with our motion tokens. --------------------------------------------------------------- */ [data-aos] { pointer-events: none; } [data-aos].aos-animate { pointer-events: auto; } /* --------------------------------------------------------------- REDUCED MOTION / NO-JS FALLBACK — everything visible, no motion. (tokens.css already neutralises durations; here we also force the pre-JS hidden states back to visible so content never disappears.) --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .js-anim [data-reveal], .js-anim [data-reveal-stagger] > *, .js-anim body { opacity: 1 !important; transform: none !important; } .anim-float { animation: none !important; } }