/* ky-flow — arrival + scroll polish (companion stylesheet for ky/ky-flow.js). Nothing here invents a new design direction: the veil is the page's own paper (--color-accent-200), the hairline is the deep accent already in the palette (--color-accent-600), and every curve is the site's cubic-bezier(.51,.92,.24,1.15) or a plain ease. All overlays are pointer-events:none and sit far below the editor band (2147482000). */ /* ---- arrival veil ---------------------------------------------------------- html.ky-flow is stamped by a one-line inline script in , so the veil paints from the very first frame (a deferred script would be too late). The veil is a pseudo-element: no DOM node, so ky-edit's structural tag:nth-of-type paths are untouched. Its opacity is driven ONLY by the animation; ky-flow.js "lifts" it early by swapping in a zero-delay run of the same keyframes the moment the hero name settles. If the script never runs, the 1.45s-delayed run fades it anyway — the page can never be left covered. */ html.ky-flow::before { content: ""; position: fixed; inset: 0; background: var(--color-accent-200, #e8e8e3); z-index: 12000; pointer-events: none; animation: ky-flow-veil 0.5s cubic-bezier(0.51, 0.92, 0.24, 1.15) 1.45s forwards; } html.ky-flow.ky-flow-lift::before { animation: ky-flow-veil 0.45s cubic-bezier(0.51, 0.92, 0.24, 1.15) 0s forwards; } html.ky-flow.ky-flow-done::before { content: none; } @keyframes ky-flow-veil { from { opacity: 1; } to { opacity: 0; } } /* ---- staggered header entrance --------------------------------------------- The header items already arrive through the site's own "transition-all duration-500 ease-in" opacity-0 wrappers (React drops the opacity-0 class after hydration). While html.ky-entering is on we only add transition-delay, so the four nav items ripple in left-to-right using the site's own transition. ky-flow.js removes the class ~2.5s in, so the delay can never taint later hover/theme transitions on those wrappers. */ html.ky-entering header nav ul > div:nth-child(1) { transition-delay: 0.06s; } html.ky-entering header nav ul > div:nth-child(2) { transition-delay: 0.14s; } html.ky-entering header nav ul > div:nth-child(3) { transition-delay: 0.22s; } html.ky-entering header nav ul > div:nth-child(4) { transition-delay: 0.30s; } /* ---- once-only section reveals --------------------------------------------- ky-flow.js marks a target .ky-rv only when it is safely below the fold, so nothing the visitor is already looking at can blink. The rise is 22px and 280ms — inside the site's gentle register, well short of parallax. */ .ky-rv { opacity: 0; transform: translateY(22px); } .ky-rv.ky-rv-in { opacity: 1; transform: none; transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.51, 0.92, 0.24, 1.15); } /* ---- images fade in as they decode ----------------------------------------- Width/height attributes are already on every , so opacity is the only thing that moves: zero CLS. ky-imgin is declared after ky-imgwait so the finished state always wins. */ img.ky-imgwait { opacity: 0; } img.ky-imgin { opacity: 1; transition: opacity 0.35s ease; } /* ---- scroll progress hairline ----------------------------------------------- A 2px line at the very top edge in the deep accent, scaled by scroll position (transform only, rAF-driven). Sits under the veil (12000) so the arrival stays clean, and miles under ky-edit / the goo overlay. */ #ky-flow-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--color-accent-600, #8c8c73); transform: scaleX(0); transform-origin: 0 0; z-index: 11900; pointer-events: none; opacity: 0.9; } /* ---- work-card parallax ----------------------------------------------------- The slot is nudged by JS (translateY <= 2.4% with a 1.05 scale so the clip never shows an edge). This class only promotes it to its own layer. */ .ky-media-slot.ky-plx { will-change: transform; } /* ---- reduced motion: instant everything ------------------------------------- No veil, no delays, no hidden states, no parallax (JS also bows out). The hairline stays — it is position feedback, not decoration, and never moves on its own. */ @media (prefers-reduced-motion: reduce) { html.ky-flow::before { content: none; } html.ky-entering header nav ul > div { transition-delay: 0s; } .ky-rv, .ky-rv.ky-rv-in { opacity: 1 !important; transform: none !important; transition: none !important; } img.ky-imgwait { opacity: 1; } img.ky-imgin { transition: none; } .ky-media-slot.ky-plx { will-change: auto; transform: none !important; } }