/* ========================================================================== Aeyhaye scroll animations - Activated by JS adding `.aey-anim-ready` to . - Without JS or before boot, content is fully visible (no FOUC, no broken state). - Honors prefers-reduced-motion. ========================================================================== */ html.aey-anim-ready [data-anim] { opacity: 0; will-change: opacity, transform; transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); } html.aey-anim-ready [data-anim="fade-up"] { transform: translate3d(0, 28px, 0); } @media (max-width: 640px) { html.aey-anim-ready [data-anim="fade-up"] { transform: translate3d(0, 20px, 0); } } html.aey-anim-ready [data-anim="fade"] { transform: none; } html.aey-anim-ready [data-anim="rise"] { transform: translate3d(0, 60px, 0) scale(0.985); } @media (max-width: 640px) { html.aey-anim-ready [data-anim="rise"] { transform: translate3d(0, 36px, 0) scale(0.99); } } /* Stagger: parent gets data-anim="stagger", direct children animate */ html.aey-anim-ready [data-anim="stagger"] > * { opacity: 0; transform: translate3d(0, 24px, 0); will-change: opacity, transform; transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); } /* Visible state */ html.aey-anim-ready [data-anim].is-visible, html.aey-anim-ready [data-anim="stagger"].is-visible > * { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } /* Reduced motion: disable all transitions and reveal immediately */ @media (prefers-reduced-motion: reduce) { html.aey-anim-ready [data-anim], html.aey-anim-ready [data-anim="stagger"] > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Initial-load fade for primary nav (one-time, non-scroll). Opacity-only — the pill nav uses Tailwind -translate-x-1/2 for centering and CSS allows only one `transform` per element. */ .aey-nav-intro { opacity: 0; transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1) 80ms; } .aey-nav-intro.is-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .aey-nav-intro { opacity: 1 !important; transition: none !important; } }