/* ============================================================ * DevBreak — global motion layer * Subtle scroll reveals, hover lift, native page transitions. * Respects prefers-reduced-motion. * ============================================================ */ /* Native cross-page fade — Chrome/Safari 18+ */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; animation-timing-function: cubic-bezier(.2,.8,.2,1); } /* Reveal-on-scroll base */ .reveal { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveal.visible { opacity: 1; transform: translate3d(0, 0, 0); } /* Free up GPU once animation finishes */ .reveal.done { will-change: auto; } /* Soft fade-in for the whole page on first paint (CSS-only — safe if JS fails). * Opacity only, no transform — `transform` on turns the body into a * containing block for position:fixed children, breaking the chat widget. */ @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } body { animation: pageFadeIn .45s cubic-bezier(.2,.8,.2,1) both; } /* Parallax-friendly */ [data-parallax] { will-change: transform; } /* Reduced motion — turn everything off */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal.visible, body, [data-parallax] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.01ms !important; } }