/* Page-transition sweep: four ink columns rise to cover, then reveal upward. The incoming page starts covered when is set by the inline head script — no white flash between documents. */ #sweep { position: fixed; inset: 0; z-index: 60; display: none; gap: 0; pointer-events: none; } #sweep.on { display: flex; } #sweep .sc { flex: 45 0 0; height: 100%; background: var(--ink); transform: translateY(103%); transition: transform 0.55s var(--ease-sweep); } #sweep .sc:nth-child(2) { flex-grow: 120; transition-duration: 0.72s; transition-delay: 0.07s; } #sweep .sc:nth-child(3) { transition-delay: 0.14s; } #sweep .sc:nth-child(4) { transition-delay: 0.21s; } #sweep.in .sc { transform: translateY(0); } #sweep.out .sc { transform: translateY(-103%); } /* incoming cover state: columns already down before first paint */ html.sweep-cover #sweep { display: flex; } html.sweep-cover #sweep .sc { transform: translateY(0); transition: none; } .sw-label { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; color: var(--bone); opacity: 0; transition: opacity 0.3s ease; } .sw-label.show { opacity: 1; } .sw-label b { font-weight: 800; font-stretch: 87%; font-size: var(--fs-mega); line-height: 1; text-transform: lowercase; } .sw-label span { font-size: var(--fs-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--smoke); } @media (prefers-reduced-motion: reduce) { #sweep, html.sweep-cover #sweep { display: none; } }