html.pt-is-leaving {
    pointer-events: none;
}

html.pt-preload .topbar > div:not(.mobile-menu-panel),
html.pt-preload .topbar > nav,
html.pt-preload .hero-portrait,
html.pt-preload .portrait-wrap,
html.pt-preload .hero-name,
html.pt-preload .hero-title,
html.pt-preload .hero-subtitle,
html.pt-preload .intro-copy-stage,
html.pt-preload .fullscreen-image-section,
html.pt-preload .portrait-gallery-item,
html.pt-preload .gallery-image,
html.pt-preload .hover-project-preview,
html.pt-preload .hover-project-kicker,
html.pt-preload .hover-project-list,
html.pt-preload .hover-project-links,
html.pt-preload .project-switch,
html.pt-preload .cta-panel,
html.pt-preload .site-footer-name,
html.pt-preload .site-footer-meta > *,
html.pt-preload .work-list,
html.pt-preload .work-row,
html.pt-preload .work-preview,
html.pt-preload .work-mobile-preview,
html.pt-preload .archive-gallery,
html.pt-preload .archive-image,
html.pt-preload .project-title,
html.pt-preload .project-image,
html.pt-preload .project-go-back,
html.pt-preload .project-scroll-hint,
html.pt-preload .project-footer > * {
    opacity: 0;
}

.pt-managed {
    backface-visibility: hidden;
    transform-origin: center;
    will-change: opacity, transform, filter;
}

@media (prefers-reduced-motion: reduce) {
    html.pt-is-leaving {
        pointer-events: auto;
    }

    html.pt-preload .topbar > div:not(.mobile-menu-panel),
    html.pt-preload .topbar > nav,
    html.pt-preload .hero-portrait,
    html.pt-preload .portrait-wrap,
    html.pt-preload .hero-name,
    html.pt-preload .hero-title,
    html.pt-preload .hero-subtitle,
    html.pt-preload .intro-copy-stage,
    html.pt-preload .fullscreen-image-section,
    html.pt-preload .portrait-gallery-item,
    html.pt-preload .gallery-image,
    html.pt-preload .hover-project-preview,
    html.pt-preload .hover-project-kicker,
    html.pt-preload .hover-project-list,
    html.pt-preload .hover-project-links,
    html.pt-preload .project-switch,
    html.pt-preload .cta-panel,
    html.pt-preload .site-footer-name,
    html.pt-preload .site-footer-meta > *,
    html.pt-preload .work-list,
    html.pt-preload .work-row,
    html.pt-preload .work-preview,
    html.pt-preload .work-mobile-preview,
    html.pt-preload .archive-gallery,
    html.pt-preload .archive-image,
    html.pt-preload .project-title,
    html.pt-preload .project-image,
    html.pt-preload .project-go-back,
    html.pt-preload .project-scroll-hint,
    html.pt-preload .project-footer > * {
        opacity: 1;
    }

    .pt-managed {
        will-change: auto;
    }
}