/* Bear Park — fluid page transitions (site/transition.js). Leaving: a forest panel grows out of the clicked link and covers the page. Arriving: the new page opens from a small rounded window inside that same dark, so navigation reads as one continuous move (the centres-overlay expand-and-navigate vocabulary, generalised to every page and CTA). The dark is #1b201a to match .cx-panel exactly. */ /* Pre-paint cover on the arriving page — transition.js adds this class on while parsing , so the page never flashes before the reveal. */ html.bp-t-enter::before { content: ""; position: fixed; inset: 0; z-index: 2147483000; background: #1b201a; } /* The leaving curtain (rises from the bottom over the page). */ .bpt-cover { position: fixed; inset: 0; z-index: 2147483001; background: #1b201a; pointer-events: none; will-change: transform; transform: translateY(102%); overflow: hidden; } /* Travelling to a centre page: the curtain is that centre's photograph under the band's veil (the image then lifts off the settled arrival). */ .bpt-cover--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .bpt-cover--img::after { content: ""; position: absolute; inset: 0; background: rgba(24, 30, 23, .54); } /* The arriving cover: the same dark panel, lifting off the settled page. */ .bpt-lift { position: fixed; inset: 0; z-index: 2147483000; background: #1b201a; pointer-events: none; will-change: transform; } /* Image-held arrival (next-centre travel): the cover is the destination's photograph under the band's veil, so travel is content the whole way. */ .bpt-lift--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .bpt-lift--img .bpt-veil { position: absolute; inset: 0; display: block; background: rgba(24, 30, 23, .54); } .bpt-lift--img { will-change: clip-path; } @media (prefers-reduced-motion: reduce) { html.bp-t-enter::before { display: none; } }