/** * Railway City Epoxy - first-visit preloader + cross-document page transitions * Enqueued by the "RCE Animations" snippet in Code Snippets. * * The overlay is inert by default. It only appears when the head script adds * .rce-preload to , which it does once per session and never when the * visitor has asked for reduced motion. Everything here is scoped to that * class, so a page that never sets it renders as if the preloader did not * exist. */ /* Inert unless the head script opts this page in. */ #rce-preloader { display: none; } html.rce-preload #rce-preloader { display: grid; place-items: center; position: fixed; inset: 0; z-index: 999999; background: var(--black, #000); opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0s linear 0.5s; } /** * No scroll lock here, deliberately. * * overflow:hidden on body removes the scrollbar, which widens the viewport by * ~15-20px. The Pro Slider initialises on 'load' - while this overlay is still * up - so Splide would measure and cache its slide widths at that inflated * width. When the overlay lifted and the scrollbar returned, the track stayed * too wide and the next slide peeked out along the right edge. * * The overlay is fixed and opaque, so anything scrolling behind it is invisible * anyway; the lock bought us nothing and cost a layout shift. */ html.rce-preload #rce-preloader img { width: min(260px, 55vw); height: auto; /* Entrance first, then breathe on a loop until the overlay lifts. The pulse is deliberately slow and shallow - a fast or deep pulse reads as a spinner, which makes a quick load feel slower than it is. */ animation: rce-preloader-logo 0.6s cubic-bezier(0.16, 1, 0.3, 1) both, rce-preloader-pulse 1.8s ease-in-out 0.6s infinite; } @keyframes rce-preloader-logo { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } } @keyframes rce-preloader-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.72; transform: scale(1.06); } } /* Lifted. visibility trails opacity so it cannot swallow clicks mid-fade. */ html.rce-preload-done #rce-preloader { opacity: 0; visibility: hidden; pointer-events: none; } /** * Cross-document view transitions. * * Deliberately NOT a JS router (Barba/Swup). Those swap page content over AJAX, * so Bricks never re-runs its element scripts on the incoming page - the Pro * Sliders, Pro Tabs, Pro Accordion and the map would all initialise once and be * dead after the first navigation. This is pure CSS: the browser handles it, * the DOM lifecycle is untouched, and browsers without support (Firefox, at * time of writing) simply navigate instantly with no transition. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: rce-page-out 0.28s ease both; } ::view-transition-new(root) { animation: rce-page-in 0.32s ease both; } @keyframes rce-page-out { from { opacity: 1; } to { opacity: 0; } } @keyframes rce-page-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } html.rce-preload #rce-preloader, html.rce-preload #rce-preloader img { animation: none; transition: none; } }