/** * Page transition animations (driven by data-page-transition on ). * Respects prefers-reduced-motion via JS disabling transitions. */ html.is-page-transitioning main { transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1), transform 420ms cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; } /* Fade */ html.page-transition-fade.page-transition-phase-enter:not(.page-transition-active) main { opacity: 0; } html.page-transition-fade.page-transition-phase-exit.page-transition-active main { opacity: 0; } /* Slide up */ html.page-transition-slide_up.page-transition-phase-enter:not(.page-transition-active) main { opacity: 0; transform: translateY(28px); } html.page-transition-slide_up.page-transition-phase-exit.page-transition-active main { opacity: 0; transform: translateY(-16px); } /* Slide down */ html.page-transition-slide_down.page-transition-phase-enter:not(.page-transition-active) main { opacity: 0; transform: translateY(-28px); } html.page-transition-slide_down.page-transition-phase-exit.page-transition-active main { opacity: 0; transform: translateY(16px); } /* Slide from right */ html.page-transition-slide_left.page-transition-phase-enter:not(.page-transition-active) main { opacity: 0; transform: translateX(32px); } html.page-transition-slide_left.page-transition-phase-exit.page-transition-active main { opacity: 0; transform: translateX(-24px); } /* Zoom */ html.page-transition-zoom.page-transition-phase-enter:not(.page-transition-active) main { opacity: 0; transform: scale(0.97); } html.page-transition-zoom.page-transition-phase-exit.page-transition-active main { opacity: 0; transform: scale(1.02); } html.page-transition-phase-enter.page-transition-active main, html.page-transition-phase-exit:not(.page-transition-active) main { opacity: 1; transform: none; } html.is-page-transitioning { background: var(--cream, #f9f5f0); }