/* =========================================================== iTumbuh — shared page-transition animation Applied on across index.html / login.html / register.html =========================================================== */ /* Native cross-document view transitions (Chromium 126+): the browser itself crossfades old→new document during real navigation, closing the gap that in-page JS/CSS can never reach. Silently ignored in browsers that don't support it yet — they fall back to the JS fade below. */ @view-transition { navigation: auto; } /* Default browser crossfade duration is long enough (~300-400ms) that on pages with different chart content (e.g. switching between the Height/ Weight/BMI/Head-Circ pages), you can visibly see the old chart blended with the new one mid-transition — looking like a flash of a "wrong" graph before it snaps to correct. Shortening this closes that window without bringing back the original jump/spike this feature fixed. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.12s; } /* Opacity only, and short. This used to also translateY(10px) over .32s, which meant every navigation put the ENTIRE page into a transformed compositing layer and held it there — on a long page (the homepage is ten sections) that reads as a visible stall of roughly a second before anything responds, especially stacked on top of the browser's own view transition above. Fading opacity alone costs nothing to composite, and .16s is enough to avoid a hard flash without being something you wait for. */ body{ opacity:0; transition:opacity .16s ease; } body.page-enter{ opacity:1; } body.page-exit{ opacity:0; transition:opacity .1s ease; } @media (prefers-reduced-motion: reduce){ body{transition:none;opacity:1;transform:none;} }