/* ============================================================ Fifth Asset Management — Motion ============================================================ */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* Stagger children within a revealed group */ [data-reveal-group] > * { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } [data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); } [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; } [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 70ms; } [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 140ms; } [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 210ms; } [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 280ms; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Page load fade Note: intentionally opacity-only. A transform on would create a containing block for all position:fixed descendants (e.g. .site-header), breaking fixed positioning for the lifetime of the page. */ .page-transition { animation: pageIn 640ms var(--ease-out) both; } @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .page-transition { animation: none; } }