html::before,
html::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    transform: translate3d(0, 101%, 0);
    transition: none;
}

html::before {
    z-index: 2147483646;
    background-color: var(--nicolau-color-cream, #F6F3E4);
}

html::after {
    z-index: 2147483647;
    background-color: var(--nicolau-color-green-dark, #022E22);
}

.nicolau-page-transition-shell {
	opacity: 1;
	transform: none;
	transition: none;
}

html.nicolau-page-transition-preflight::before,
html.nicolau-page-transition-preflight::after {
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition: none;
}

html.nicolau-page-transition-preflight .nicolau-page-transition-shell {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition: none;
}

html.nicolau-page-transition-entering::before {
    pointer-events: auto;
    transform: translate3d(0, -101%, 0);
    transition-property: transform;
    transition-duration: 600ms;
    transition-delay: 45ms;
    transition-timing-function: cubic-bezier(0.73, 0, 0.33, 1);
}

html.nicolau-page-transition-entering::after {
    pointer-events: auto;
    transform: translate3d(0, -101%, 0);
    transition-property: transform;
    transition-duration: 600ms;
    transition-delay: 0ms;
    transition-timing-function: cubic-bezier(0.73, 0, 0.33, 1);
}

html.nicolau-page-transition-entering .nicolau-page-transition-shell {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition: none;
}

html.nicolau-page-transition-entering .nicolau-page-transition-shell.nicolau-page-transition-shell-entering {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-property: opacity, transform;
    transition-duration: 600ms;
    transition-delay: 0ms;
    transition-timing-function: cubic-bezier(0.73, 0, 0.33, 1);
}

html.nicolau-page-transition-leaving::before {
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-property: transform;
    transition-duration: 520ms;
    transition-delay: 0ms;
    transition-timing-function: cubic-bezier(0.73, 0, 0.33, 1);
}

html.nicolau-page-transition-leaving::after {
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-property: transform;
    transition-duration: 520ms;
    transition-delay: 45ms;
    transition-timing-function: cubic-bezier(0.73, 0, 0.33, 1);
}

html.nicolau-page-transition-leaving .nicolau-page-transition-shell {
    opacity: 0;
    transform: translate3d(0, -24px, 0);
    transition-property: opacity, transform;
    transition-duration: 460ms;
    transition-delay: 0ms;
    transition-timing-function: cubic-bezier(0.73, 0, 0.33, 1);
}

@media (max-width: 768px) {
    html.nicolau-page-transition-preflight .nicolau-page-transition-shell,
    html.nicolau-page-transition-entering .nicolau-page-transition-shell {
        transform: translate3d(0, 22px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    html::before,
    html::after,
    html.nicolau-page-transition-preflight::before,
    html.nicolau-page-transition-preflight::after,
    html.nicolau-page-transition-entering::before,
    html.nicolau-page-transition-entering::after,
    html.nicolau-page-transition-leaving::before,
    html.nicolau-page-transition-leaving::after {
        pointer-events: none;
        transform: translate3d(0, 101%, 0);
        transition: none;
    }

    .nicolau-page-transition-shell,
    html.nicolau-page-transition-preflight .nicolau-page-transition-shell,
    html.nicolau-page-transition-entering .nicolau-page-transition-shell,
    html.nicolau-page-transition-entering .nicolau-page-transition-shell.nicolau-page-transition-shell-entering,
    html.nicolau-page-transition-leaving .nicolau-page-transition-shell {
        opacity: 1;
        transform: none;
        transition: none;
    }
}