/** * Railway City Epoxy - scroll reveal + entrance animations * Enqueued by the "RCE Animations" snippet in Code Snippets. * * Elements only hide while carries .rce-anim, which an inline head * script adds before first paint and a failsafe timer removes. If the JS never * boots, nothing is ever hidden. * * Anything inside a BricksExtras Pro Slider (.x-slider) or Pro Accordion * (.x-accordion) is force-shown: those widgets transform and hide their own * children, so a reveal state layered on top either fights their transforms or * never fires. Pro Slider clones its slides, and a clone parked offscreen in * the track may never intersect the viewport - it would stay invisible forever. * * NOTE: deliberately no will-change anywhere in this file. * * It was here originally and it broke mobile. There are ~450 animated elements * across the site and 48 on the home page alone; will-change promotes every one * of them to its own compositor layer, and the hint is only released once an * element finishes animating - so everything below the fold holds a layer * indefinitely. On a memory-constrained phone the compositor runs out and stops * painting tiles, which renders as blank white blocks and knocks fixed-position * elements out of place. * * opacity and transform are already compositor-accelerated; the hint bought * nothing. will-change is a last-resort tool for a specific measured jank * problem on a couple of elements, not a default. */ :root { --rce-anim-duration: 0.85s; /* Expo-out: fast off the line, long glide to rest. Reads as "lively" where a symmetrical ease reads as "sluggish" at this distance. */ --rce-anim-easing: cubic-bezier(0.16, 1, 0.3, 1); --rce-anim-distance: 2.75rem; --rce-anim-scale: 0.96; --rce-anim-stagger: 0.11s; } /** * Hidden state, keyed on the author-applied class so it lands on first paint. * * The transition deliberately lives on .rce-anim-target (added later by JS) and * NOT here. Hiding and transitioning in one step makes the element render * visible and then animate OUT to opacity 0 before animating back in - a * visible flicker on every load. */ .rce-anim .rce-fade:not(.rce-revealed), .rce-anim .rce-fade-up:not(.rce-revealed), .rce-anim .rce-fade-down:not(.rce-revealed), .rce-anim .rce-fade-left:not(.rce-revealed), .rce-anim .rce-fade-right:not(.rce-revealed), .rce-anim .rce-zoom:not(.rce-revealed) { opacity: 0; } /* Movement is paired with a slight scale so elements arrive with a sense of depth rather than sliding flatly. */ .rce-anim .rce-fade-up:not(.rce-revealed) { transform: translate3d(0, var(--rce-anim-distance), 0) scale(var(--rce-anim-scale)); } .rce-anim .rce-fade-down:not(.rce-revealed) { transform: translate3d(0, calc(var(--rce-anim-distance) * -1), 0) scale(var(--rce-anim-scale)); } .rce-anim .rce-fade-left:not(.rce-revealed) { transform: translate3d(var(--rce-anim-distance), 0, 0) scale(var(--rce-anim-scale)); } .rce-anim .rce-fade-right:not(.rce-revealed) { transform: translate3d(calc(var(--rce-anim-distance) * -1), 0, 0) scale(var(--rce-anim-scale)); } .rce-anim .rce-zoom:not(.rce-revealed) { transform: scale(0.9); } /* JS has claimed this element, so it is safe to animate its state changes. */ .rce-anim-target { transition: opacity calc(var(--rce-anim-duration) * 0.7) ease-out var(--rce-anim-delay, 0s), transform var(--rce-anim-duration) var(--rce-anim-easing) var(--rce-anim-delay, 0s); } .rce-revealed { opacity: 1; transform: none; } /* Hard opt-outs: widgets that own their children's transform/visibility. */ .x-slider .rce-fade, .x-slider .rce-fade-up, .x-slider .rce-fade-down, .x-slider .rce-fade-left, .x-slider .rce-fade-right, .x-slider .rce-zoom, .splide__track .rce-fade, .splide__track .rce-fade-up, .splide__track .rce-fade-down, .splide__track .rce-fade-left, .splide__track .rce-fade-right, .splide__track .rce-zoom, .x-accordion .rce-fade, .x-accordion .rce-fade-up, .x-accordion .rce-fade-down, .x-accordion .rce-fade-left, .x-accordion .rce-fade-right, .x-accordion .rce-zoom { opacity: 1 !important; transform: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .rce-anim .rce-fade, .rce-anim .rce-fade-up, .rce-anim .rce-fade-down, .rce-anim .rce-fade-left, .rce-anim .rce-fade-right, .rce-anim .rce-zoom, .rce-anim-target { opacity: 1 !important; transform: none !important; transition: none !important; } }