/* BIZVERSE page transitions. Pairs with scripts/page-transitions.js — CSS owns the ENTER reveal, JS owns the EXIT. */ :root { --pt-in: 0.78s; --pt-out: 0.62s; --pt-ease: cubic-bezier(0.7, 0, 0.2, 1); --pt-bg: #0f1115; } /* Paint the canvas before the Tailwind CDN injects its JIT CSS, so the reveal wipes onto the real page colour instead of a white flash. .dark scopes this to the styled pages — about/events/event have no stylesheet and would end up black-on-black. */ html.dark { background-color: var(--pt-bg); } /* ENTER — every load wipes up from the bottom edge. `backwards` (not `both`): the clip is gone once the animation ends, otherwise body stays a containing block and the fixed navbar detaches from the viewport on scroll. clip-path is paint-only, so ScrollTrigger/AOS still measure true rects while this runs. */ /* Phones opt out: animating clip-path on repaints the whole document each frame, and scripts/page-transitions.js already skips the matching exit there, so this would be a lone wipe with nothing to hand off from. */ @media (prefers-reduced-motion: no-preference) and (min-width: 768px) { body { animation: pt-enter var(--pt-in) var(--pt-ease) backwards; } } @keyframes pt-enter { from { clip-path: inset(100% 0% 0% 0%); } to { clip-path: inset(0% 0% 0% 0%); } } /* EXIT — the veil is a child of , not : body is mid-transform on the way out and would drag a fixed child along with it. */ #pt-veil { position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; clip-path: inset(100% 0% 0% 0%); will-change: clip-path; } html.pt-leaving, html.pt-leaving body { overflow: hidden !important; } html.pt-leaving body { pointer-events: none; will-change: transform, opacity; }