/* ============================================================================ 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. The home hero's opening — intro gate + striking stage The page opens on the mark alone. It spins, throws the title out in 漢字, turns that into English, and only then does the rest of the hero arrive; the nav, the buttons and the free-cue line wait for a scroll (or six seconds). Two pieces of CSS make that possible: a) `html.oa-intro` — set by the head bootstrap before first paint, so the elements motion-hero.js is about to choreograph are already invisible on the very first frame. Priming them from JS at the end of would let the finished hero paint and then blink out. Released again by motion-hero.js (both its success and its bail-out path) and by an 8s failsafe timer, so no route through the page can leave content hidden. Note the `!important`: the hero is authored with inline styles, and the lead paragraph's own `opacity` would otherwise win the cascade. b) `.oa-hero-stage` — the medallion + 漢字 layer, sitting absolutely over the h1 so the Chinese and the English occupy exactly the same box and the conversion between them reads as one surface turning. It is keyed on `html.oa-hero-live`, which motion-hero.js adds itself, in the same synchronous stretch as (and immediately after) it primes the 漢字 to invisible — deliberately NOT on `html.oa-motion`, which motion-core.js owns. Those are two separate