html {
    overflow-x: hidden;
}

html.page-exit-left,
html.page-exit-left body,
html.page-exit-right,
html.page-exit-right body {
    overflow: hidden !important;
}

.page-current-layer,
.page-preview-frame {
    transition: transform 1.18s cubic-bezier(.65, 0, .35, 1);
}

.page-current-layer {
    width: 100%;
    min-width: 100vw;
    min-height: 100vh;
}

.page-current-layer .bg-glow {
    transition: opacity .68s cubic-bezier(.4, 0, .2, 1);
}

html.page-glow-entering .bg-glow {
    opacity: .35 !important;
}

html.page-exit-left .page-current-layer,
html.page-exit-right .page-current-layer {
    background: #0e0f10;
}

html.page-exit-left .page-current-layer .bg-glow,
html.page-exit-right .page-current-layer .bg-glow {
    opacity: .35 !important;
}

.page-static-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 7000 !important;
    width: 100%;
    margin: 0 !important;
    transform: none !important;
    transition: opacity .3s ease;
}

.page-nav-placeholder {
    width: 100%;
    pointer-events: none;
}

body.intro-open .page-static-nav {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

html.page-exit-left .page-current-layer,
html.page-exit-left .page-preview-next {
    transform: translate3d(-100vw, 0, 0);
    will-change: transform;
}

html.page-exit-right .page-current-layer,
html.page-exit-right .page-preview-previous {
    transform: translate3d(100vw, 0, 0);
    will-change: transform;
}

.page-preview-frame {
    position: fixed;
    top: 0;
    z-index: 4000;
    width: 100vw;
    min-width: 100vw;
    max-width: none;
    height: 100svh;
    display: block;
    border: 0;
    background: #0e0f10;
    pointer-events: none;
}

.page-preview-next { left: 100vw; }
.page-preview-previous { left: -100vw; }

@media (prefers-reduced-motion: reduce) {
    .page-current-layer,
    .page-preview-frame {
        transition-duration: .01ms;
    }

    .page-static-nav { transition: none; }
}