/* Smooth fade for all page transitions. */ body { transition: opacity 0.4s ease; } /* Body starts invisible when arriving via a page-transition link. The page-transitioning class is set by the inline script. JS uses inline styles (which always beat CSS specificity) to reveal it, because html.page-transitioning body has specificity (0,1,2) — higher than any single class selector on body — so a class alone cannot override. */ html.page-transitioning body { opacity: 0; }