From 06c7592f9d3872ce3ec064d45681103394035247 Mon Sep 17 00:00:00 2001 From: LucaP Date: Sun, 11 Oct 2026 01:28:03 +0300 Subject: [PATCH] style: clear the plates before the headings when a sign takes the frame --- src/styles/gantry.css | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/styles/gantry.css b/src/styles/gantry.css index af87955..7d9388c 100644 --- a/src/styles/gantry.css +++ b/src/styles/gantry.css @@ -729,28 +729,30 @@ html .drive-controls__audio-status { /* ---------- The interlude under the gantry ---------- */ /* While a sign approaches (environment.ts sets data-interlude='on'), the - reading plates step up and out in 180 ms, so the road and the sign have - the frame to themselves; the headings follow once the plates are gone, so - a departing plate never ghosts over an arriving title. Then ('rise', about + reading plates step up and out in 160 ms (front-loaded, so most of the + plate is gone in the first 60 ms) and the road and the sign have the frame + to themselves; the headings follow from 60 ms and are gone by 190 ms, so a + departing plate never ghosts over a title, and the chapters a navigator + scroll passes are already dark when they go by. Then ('rise', about 180 ms before the sign docks) they come back up from below in sequence. Headings only fade: journey and audio measure them. */ @media (prefers-reduced-motion: no-preference) { html[data-interlude='on'] .reading-stage .portfolio-main > * > * { opacity: 0; - transition: opacity 200ms cubic-bezier(0.5, 0, 0.75, 0) 160ms; + transition: opacity 130ms cubic-bezier(0.5, 0, 0.75, 0) 60ms; } html[data-interlude='on'] .reading-stage .portfolio-main > * > :not(h1, h2, :has(h1, h2)) { transform: translateY(-24px); transition: - opacity 180ms cubic-bezier(0.5, 0, 0.75, 0), - transform 180ms cubic-bezier(0.5, 0, 0.75, 0); + opacity 160ms cubic-bezier(0.2, 0.7, 0.3, 1), + transform 160ms cubic-bezier(0.5, 0, 0.75, 0); } /* The exit tag's strike-on animation restarts as the plates return. */ html[data-interlude='on'] .reading-stage .portfolio-section::before, html[data-interlude='on'] .reading-stage .portfolio-section[data-exit='08']::after { opacity: 0; animation: none; - transition: opacity 180ms cubic-bezier(0.5, 0, 0.75, 0); + transition: opacity 160ms cubic-bezier(0.2, 0.7, 0.3, 1); } html[data-interlude='rise'] .reading-stage .portfolio-section[data-exit='08']::after, html[data-interlude='rise'] .reading-stage .portfolio-main > .portfolio-section > *,