/* BLUR — page transition: two-layer veil. Loaded AFTER styles.css, so it only ADDS rules and reuses the palette vars (--ink olive, --cream). A cream panel behind an olive one rise to cover the page, then lift to reveal the next; a centre-pinned cream logo rides the olive as parallax. Driven by js/transitions.js. */ :root { /* the site's signature easing (carousel curtain / plan viewer) */ --vt-ease: cubic-bezier(0.77, 0, 0.175, 1); } /* The veil is a fixed container holding two stacked panels; it's only displayed while a transition is running (is-armed / arriving). */ .vt-veil { position: fixed; inset: 0; z-index: 9999; display: none; pointer-events: none; } .vt-veil.is-armed { display: block; } /* While actively covering/revealing, the veil captures pointer events so taps and clicks can't leak through to the page hidden underneath (base is none, so at rest the off-screen container never blocks the page). */ .vt-veil.is-cover, .vt-veil.is-reveal, html.vt-arriving-veil .vt-veil { pointer-events: auto; } /* Two panels fill the container; both wait just below the viewport. CREAM sits BEHIND the OLIVE. On the way up the cream leads (a little faster), so its edge shows ahead of the olive; on the way out the olive lifts first and the cream lingers underneath before following — a two-tone veil coming and going. */ .vt-veil-panel { position: absolute; inset: 0; transform: translateY(101vh); /* waits just below the viewport */ } .vt-veil-cream { z-index: 1; background: var(--cream); } .vt-veil-olive { z-index: 2; background: var(--ink); /* olive */ overflow: hidden; /* clips the logo to the olive's current bounds */ } /* The logo is counter-translated by the exact inverse of the OLIVE panel, so its net screen position never changes: it stays pinned to the CENTRE OF THE SCREEN while the olive slides underneath it — a parallax reveal (overflow:hidden clips it to the olive's current bounds). Logo shares the olive's duration + easing. */ .vt-veil-logo { position: absolute; top: 50%; left: 50%; width: clamp(120px, 17vw, 190px); height: auto; fill: var(--cream); /* cream logo on the olive panel */ transform: translate(-50%, -50%) translateY(-101vh); } /* exit (cover): panels rise from below to cover; cream leads (faster) */ .vt-veil.is-cover .vt-veil-olive { transform: translateY(0); transition: transform 0.75s var(--vt-ease); } .vt-veil.is-cover .vt-veil-cream { transform: translateY(0); transition: transform 0.56s var(--vt-ease); } .vt-veil.is-cover .vt-veil-logo { transform: translate(-50%, -50%) translateY(0); transition: transform 0.75s var(--vt-ease); } /* entry (reveal): olive lifts first; cream lingers underneath, then follows */ .vt-veil.is-reveal .vt-veil-olive { transform: translateY(-101vh); transition: transform 0.75s var(--vt-ease); } .vt-veil.is-reveal .vt-veil-cream { transform: translateY(-101vh); transition: transform 0.95s var(--vt-ease); } .vt-veil.is-reveal .vt-veil-logo { transform: translate(-50%, -50%) translateY(101vh); transition: transform 0.75s var(--vt-ease); } /* arriving via the veil: render displayed with both panels already covering, so the incoming page is never seen uncovered before transitions.js takes over */ html.vt-arriving-veil .vt-veil { display: block; } html.vt-arriving-veil .vt-veil-panel { transform: translateY(0); } html.vt-arriving-veil .vt-veil-logo { transform: translate(-50%, -50%) translateY(0); } /* Backstop cover painted at the ROOT, before is parsed. The .vt-veil is the first child of , but this ::before on exists from the very first paint and covers everything olive, so even a sub-frame before the panels render shows no flash. The panels (z 9999) sit on top and take over for the reveal, so removing this backstop mid-transition is invisible. */ html.vt-arriving-veil::before { content: ""; position: fixed; inset: 0; z-index: 9998; background: var(--ink); pointer-events: none; } /* Reduced motion: transitions.js already skips the veil entirely (plain instant navigation); this is belt-and-braces so no panel ever animates. */ @media (prefers-reduced-motion: reduce) { .vt-veil-panel, .vt-veil-logo { transition: none !important; } } /* ---- Intro welcome veil (first non-transition load) --------------------- */ /* Reuses the two-panel veil. On a fresh load the pre-paint script adds html.vt-intro so the page renders already covered olive (no flash); transitions.js then adds .is-intro to draw the centred BLUR logo and lift the veil using the same reveal as a page transition. See js/transitions.js. */ /* First-paint covered state — mirrors html.vt-arriving-veil (panels up + olive backstop). Deliberately does NOT touch .vt-veil-logo: the solid logo stays parked off-screen so only the drawing intro logo is ever seen. */ html.vt-intro .vt-veil { display: block; pointer-events: auto; } html.vt-intro .vt-veil-panel { transform: translateY(0); } html.vt-intro::before { content: ""; position: fixed; inset: 0; z-index: 9998; background: var(--ink); /* olive backstop before parses */ pointer-events: none; } /* The centred self-drawing intro logo. Lives inside .vt-veil-olive (clipped by its overflow:hidden), shares the veil logo's centre-pin + olive parallax, and has its OWN class + mask id so it never collides with the header logo (.logo-draw-line / #logo-draw-mask) or the solid .vt-veil-logo. Shown only while .is-intro is set; the solid logo is hidden then so the two never stack. */ .vt-intro-logo { position: absolute; top: 50%; left: 50%; width: clamp(120px, 17vw, 190px); height: auto; fill: var(--cream); transform: translate(-50%, -50%) translateY(0); display: none; } .vt-veil.is-intro .vt-intro-logo { display: block; } .vt-veil.is-intro .vt-veil-logo { display: none; } /* reveal: rides the olive up, exactly like .vt-veil-logo (counter-parallax) */ .vt-veil.is-intro.is-reveal .vt-intro-logo { transform: translate(-50%, -50%) translateY(101vh); transition: transform 0.75s var(--vt-ease); } /* The stroke mask draws 0->100%, revealing the cream fill (same technique as the header logo, distinct class so header-replay logic never touches it). */ .vt-intro-draw-line { fill: none; stroke: #fff; /* white in the mask = reveal; colour comes from .vt-intro-logo fill */ stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .vt-veil.is-intro .vt-intro-draw-line { animation: vt-intro-draw 1.4s cubic-bezier(0.45, 0.05, 0.25, 1) forwards; } @keyframes vt-intro-draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .vt-intro-logo, .vt-intro-draw-line { transition: none !important; animation: none !important; } .vt-veil.is-intro .vt-intro-draw-line { stroke-dashoffset: 0; } }