/* Only the content changes; the header and page background stay live. */
html[data-public-page-motion='true'] { --public-page-motion-duration: 150ms; }
html[data-public-page-motion='true'] .main { animation: none; }
html.public-page-arriving .main { animation: public-page-arrive var(--public-page-motion-duration) ease-out both; }

@keyframes public-page-arrive {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes public-page-depart {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; types: public-page; }
}

/* Display-preference transitions keep their own styling outside page navigation. */
html:active-view-transition-type(public-page) { view-transition-name: none; }
html:active-view-transition-type(public-page) .main { view-transition-name: public-content; }
/* Form steps retain their own transition only within the contact page. */
html:active-view-transition-type(public-page) body .contact-page .contact-form-panel { view-transition-name: none; }
html:active-view-transition-type(public-page)::view-transition { pointer-events: none; }
html:active-view-transition-type(public-page)::view-transition-group(public-content) { animation: none; }
html:active-view-transition-type(public-page)::view-transition-old(public-content) {
    animation: public-page-depart var(--public-page-motion-duration) ease-out both;
}
html:active-view-transition-type(public-page)::view-transition-new(public-content) {
    animation: public-page-arrive var(--public-page-motion-duration) ease-out both;
}

/* Welcome has its own timing; restored history entries keep their reading position. */
html:is(.home-intro-pending,.home-intro-running) .main { animation: none; }
@media (prefers-reduced-motion: reduce) {
    html.public-page-arriving .main { animation: none; }
}