/* ============================================================================ motion.css — Oyang Archive motion foundation Styles for the ink-veil view-transition overlay, the upgraded (tapered, brush-stroke) reading-progress bar, and the .oa-motion gate that motion-core.js adds to once GSAP/ScrollTrigger/Lenis are live and the visitor has not asked for reduced motion. Everything here degrades to nothing when .oa-motion is absent: no-JS and reduced-motion visitors keep the plain instant view-switch and the flat vermilion progress bar that already existed in index.html/script.js. Theme-aware via [data-theme="dark"], matching theme.css's token names. ============================================================================ */ /* --------------------------------------------------------------------------- 1. Reading progress — tapered brush-stroke trailing edge Only applied once .oa-motion is on ; otherwise the original flat inline background (#9e2b25 / dark override in theme.css) stands untouched. --------------------------------------------------------------------------- */ html.oa-motion #readingProgress { background: linear-gradient(90deg, rgba(158, 43, 37, 0) 0%, rgba(158, 43, 37, .5) 12%, #9e2b25 46%, #b23a33 100%) !important; box-shadow: 0 0 10px 1px rgba(158, 43, 37, .30), 0 0 3px rgba(158, 43, 37, .55); border-radius: 0 2px 2px 0; } html[data-theme="dark"].oa-motion #readingProgress { background: linear-gradient(90deg, rgba(228, 106, 96, 0) 0%, rgba(228, 106, 96, .45) 12%, #e46a60 46%, #d1483f 100%) !important; box-shadow: 0 0 12px 1px rgba(228, 106, 96, .40), 0 0 4px rgba(228, 106, 96, .65); } /* --------------------------------------------------------------------------- 2. Ink-veil view-transition overlay Created and animated entirely by motion-core.js (#oaVeil, appended to ); absent for no-JS visitors, so it never needs a static fallback. Paper-colour panel with a soft blurred ink edge + a thin vermilion seal line at the wiping edge. transform-origin: bottom + scaleY lets the top edge retreat downward, revealing the new view from the top down. --------------------------------------------------------------------------- */ #oaVeil { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: var(--color-bg, #f6f5f2); opacity: 0; transform: scaleY(0); transform-origin: bottom; will-change: transform, opacity; } #oaVeil::before { /* soft ink bleed just ahead of the retreating (top) edge */ content: ""; position: absolute; left: 0; right: 0; top: -56px; height: 56px; background: linear-gradient(180deg, rgba(246, 245, 242, 0) 0%, var(--color-bg, #f6f5f2) 100%); filter: blur(11px); } #oaVeil::after { /* thin vermilion seal-ink line riding the wiping edge */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #9e2b25; box-shadow: 0 0 10px 2px rgba(158, 43, 37, .5); opacity: .75; } html[data-theme="dark"] #oaVeil { background: var(--d-bg, #17130f); } html[data-theme="dark"] #oaVeil::before { background: linear-gradient(180deg, rgba(23, 19, 15, 0) 0%, var(--d-bg, #17130f) 100%); } html[data-theme="dark"] #oaVeil::after { background: #e46a60; box-shadow: 0 0 12px 2px rgba(228, 106, 96, .55); } /* --------------------------------------------------------------------------- 3. Lenis / native-scroll handoff motion-core.js adds this class to once Lenis is driving the page, so the CSS `scroll-behavior: smooth` set in style.css (html{scroll-behavior :smooth}) stops fighting Lenis's own easing on programmatic scrollIntoView / scrollTo calls. --------------------------------------------------------------------------- */ html.oa-lenis { scroll-behavior: auto !important; } /* --------------------------------------------------------------------------- 4. Reduced motion — neutralize everything above Belt-and-braces: motion-core.js already refuses to add .oa-motion / build the veil / init Lenis when this query matches, so in practice these rules are a defensive fallback (e.g. a stale .oa-motion class left on by a bfcache restore). --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.oa-motion #readingProgress { background: #9e2b25 !important; box-shadow: none; border-radius: 0; } html[data-theme="dark"].oa-motion #readingProgress { background: var(--d-accent, #e46a60) !important; box-shadow: none; } #oaVeil, #oaVeil::before, #oaVeil::after { display: none !important; } html.oa-lenis { scroll-behavior: smooth !important; } }