/* * Vendored motion layer for the standalone Lead Caravan site. * * The repo motion system (`@wa-aas/ui-kit/primitives`) is React-only, and this site is * vanilla Astro served as a flat nginx web root — so the React wrappers cannot * be used here. Instead we consume the *token* layer of that system: the motion * custom properties below are vendored verbatim from * design_system/tokens/CSS/primitives/motion.css (generated from * design_system/tokens/JSON/core.tokens.json). They are inlined for the same * reason as tokens.css: a cross-repo @import escapes the served root and 404s. * * If the source motion tokens change, re-sync the :root block below. * * The utility classes underneath are the vanilla equivalents of the system's * RevealOnScroll / Stagger / FadeIn primitives. They animate purely from the * vendored tokens and are activated by the IntersectionObserver in app.js, which * adds `.is-revealed` to `[data-reveal]` elements when they scroll into view. */ /* --- Vendored motion tokens (from design_system/tokens/CSS/primitives/motion.css) --- */ :root { --motion-distance-lg: 1rem; --motion-distance-md: 0.75rem; --motion-distance-sm: 0.5rem; --motion-duration-fast: 120ms; --motion-duration-instant: 0ms; --motion-duration-normal: 180ms; --motion-duration-reduced: 0.01ms; --motion-duration-scroll: 420ms; --motion-duration-slow: 260ms; --motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); --motion-ease-in: cubic-bezier(0.4, 0, 1, 1); --motion-ease-out: cubic-bezier(0, 0, 0.2, 1); --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1); --motion-spring-damping: 32; --motion-spring-mass: 1; --motion-spring-stiffness: 420; --motion-stagger-fast: 30ms; --motion-stagger-normal: 50ms; --motion-stagger-slow: 80ms; } /* --- Reveal-on-scroll primitive (vanilla RevealOnScroll equivalent) --- */ /* * Elements opt in with `data-reveal`. They start hidden + offset and settle to * their resting state once app.js adds `.is-revealed`. Direction is controlled * with `data-reveal="up|down|left|right"` (default: up). Stagger within a group * is applied as an inline `--reveal-delay` by app.js. */ [data-reveal] { opacity: 0; transform: translate3d(0, var(--motion-distance-lg), 0); transition: opacity var(--motion-duration-scroll) var(--motion-ease-out), transform var(--motion-duration-scroll) var(--motion-ease-emphasized); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } [data-reveal="down"] { transform: translate3d(0, calc(-1 * var(--motion-distance-lg)), 0); } [data-reveal="left"] { transform: translate3d(var(--motion-distance-lg), 0, 0); } [data-reveal="right"] { transform: translate3d(calc(-1 * var(--motion-distance-lg)), 0, 0); } [data-reveal="scale"] { transform: scale(0.96); } [data-reveal].is-revealed { opacity: 1; transform: none; } /* * No-JS / pre-hydration safety net: if app.js never runs (script blocked, JS * disabled), reveal content after a short delay so nothing stays invisible. * `.reveal-ready` is set on by app.js the moment it boots, which cancels * this fallback and hands control to the observer. */ @media (prefers-reduced-motion: no-preference) { html:not(.reveal-ready) [data-reveal] { animation: lc-reveal-failsafe 0ms linear 1200ms forwards; } } @keyframes lc-reveal-failsafe { to { opacity: 1; transform: none; } } /* --- Reduced motion: respect the system's reduced duration token --- */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal].is-revealed { opacity: 1; transform: none; transition-duration: var(--motion-duration-reduced); transition-delay: 0ms; animation: none; } }