/* Motion: the page-load sequence, scroll reveals, and the reduced-motion opt-out. Everything here is gated behind .js on , so with scripting off the page renders static and fully visible. */ @view-transition { navigation: auto; } /* Load sequence ----------------------------------------------------------- */ /* No splash screen: the page composes itself instead. The header settles in, the rail hairline draws down the page, and the hero follows it — about a second end to end, with nothing ever covering the content. */ .js .site-header { opacity: 0; transform: translateY(-8px); } .js .is-ready .site-header { opacity: 1; transform: none; transition: opacity 460ms var(--ease), transform 560ms var(--ease-out); } /* The rail hairline is a background gradient on main (see layout.css), so it draws by growing its own background-size rather than by any extra element. */ .js main { background-size: 1px 0%; } .js .is-ready main { background-size: 1px 100%; transition: background-size 1000ms var(--ease-out) 120ms; } /* Headline: each line slides up out of its own clipped box. */ .line { display: block; overflow: hidden; padding-bottom: 0.08em; } .js .line__inner { display: block; transform: translateY(115%); } .js .is-ready .line__inner { transform: none; transition: transform var(--t-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 95ms + 200ms); } /* Everything else in the hero fades up behind the headline. */ .js [data-enter] { opacity: 0; transform: translateY(10px); } .js .is-ready [data-enter] { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 95ms + 200ms); } /* Scroll reveals ---------------------------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translateY(14px); } .js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 680ms var(--ease), transform 680ms var(--ease-out); transition-delay: calc(var(--i, 0) * 75ms); } /* Reduced motion ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .site-header, .js .line__inner, .js [data-enter], .js [data-reveal] { opacity: 1; transform: none; transition: none; } .js main { background-size: 1px 100%; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }