/* ============================================================ Scroll reveal — shared, opt-in motion for marketing sections. Paired with static/js/components/scroll_reveal.js. Opt in by adding `data-animate` to an element: data-animate="fade-up" (default) data-animate="fade" data-animate="fade-down" data-animate="fade-left" (enters from the right) data-animate="fade-right" data-animate="zoom-in" Stagger a group's direct children by adding `data-stagger` (ms step, default 90) to the parent; each direct `[data-animate]` child is delayed incrementally. The hidden initial state applies ONLY when scroll_reveal.js has added the `sr-enabled` class to . So if this CSS is ever present on a page where the JS does not run (e.g. a reused partial), content stays fully visible — no permanently-hidden content and no FOUC. ============================================================ */ .sr-enabled [data-animate] { opacity: 0; transform: translate3d(0, 28px, 0); /* default variant = fade-up */ transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } .sr-enabled [data-animate="fade"] { transform: none; } .sr-enabled [data-animate="fade-down"] { transform: translate3d(0, -28px, 0); } .sr-enabled [data-animate="fade-left"] { transform: translate3d(40px, 0, 0); } /* slides in from the right */ .sr-enabled [data-animate="fade-right"]{ transform: translate3d(-40px, 0, 0); } .sr-enabled [data-animate="zoom-in"] { transform: scale(0.94); } /* Revealed state (added by the observer, one-shot). */ .sr-enabled [data-animate].reveal-in { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } /* ---- GPU-friendly hover lift (opt-in via .reveal-hover) ---- */ .reveal-hover { transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease; } .reveal-hover:hover { transform: translateY(-6px); } /* ---- Accessibility: respect reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .sr-enabled [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; } .reveal-hover { transition: none !important; } .reveal-hover:hover { transform: none !important; } }