/* ===== Scroll reveal: fade elements in as they enter the viewport ===== */ /* The hidden state is scoped to `html.js`, set by an inline script before first paint, so content is only ever hidden while JS is running to reveal it — if JS is off/slow, everything stays visible. NOTE: this deliberately animates OPACITY ONLY (no transl/transform). On iOS Safari, transformed elements inside an `overflow-x: hidden` page can flicker in and then get dropped by the compositor on scroll (they "disappear"), and tall sections may never paint. Opacity-only sidesteps that bug entirely. */ .js .fade-in-on-scroll { opacity: 0; } .js .fade-in-on-scroll.in-view { animation: fade-in 0.7s ease forwards; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* Gentle cascade so the hero block fades in in sequence on load. */ .js .intro-body > p.fade-in-on-scroll.in-view { animation-delay: 0.08s; } .js .intro-actions.fade-in-on-scroll.in-view { animation-delay: 0.16s; } /* Same cascade for Let's Connect: heading → copy → links. */ .js .contact > p.fade-in-on-scroll.in-view { animation-delay: 0.08s; } .js .contact > .contact-list.fade-in-on-scroll.in-view { animation-delay: 0.16s; } /* ===== Floating mobile dock: fade in on reload only ===== */ /* The `dock-animate` class is added (before paint) by the inline script only when the page is freshly reloaded — never when navigating between pages via the nav tabs — so switching tabs leaves the dock sitting still. Opacity-only, `backwards` fill (no forwards) so it holds hidden during the delay, then reverts to normal styling — leaving hide-on-scroll untouched. */ @media (max-width: 640px) { .js.dock-animate .mobile-dock { animation: dock-fade-in 0.6s ease 0.1s backwards; } } @keyframes dock-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Respect users who prefer reduced motion: show everything, no animation. */ @media (prefers-reduced-motion: reduce) { .js .fade-in-on-scroll { opacity: 1; animation: none; } .js.dock-animate .mobile-dock { animation: none; } }