body.load-out {
    pointer-events: none;
}

/* curtain */

.curtain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --translate-y: -100%;
    transform: translateY(var(--translate-y));
    transition: .8s cubic-bezier(.61, -0.01, .37, .99) all;
    transition-delay: .4s;
}

/* .curtain {
    animation: translate-y-reveal 1s cubic-bezier(.61, -0.01, .37, .99) reverse forwards;
} */

body.page-loaded .curtain {
    animation: unset;
}

body.page-loaded:not(.from-sister) .curtain {
    transform: translateY(calc(-1 * var(--translate-y)));
}

body:is(.offcanvas-open, .load-out, .curtain-open).page-loaded .curtain {
    transform: translateY(0);
    transition-delay: 0s;
}

/* offcanvas */

.offcanvas {
    --base-delay: 0.6s;
    width: 100vw;
    transform: translateY(-100%);
    transition: 0s linear all;
    transition-delay: var(--base-delay);
}

.offcanvas-open .offcanvas {
    transform: translateY(0%);
    transition-delay: 0s;
}

/* nav menu */
.offcanvas ul li {
    overflow: hidden;
    transition: .4s cubic-bezier(.61, -0.01, .37, .99) all;
    --delay: calc((.05s * var(--stagger-index)) + var(--base-delay));
}

.offcanvas ul li :is(a, span) {
    display: block;
    transform: translateY(100%);
    transition: .8s cubic-bezier(.61, -0.01, .37, .99) all;
    transition-delay: 0s;
}

.offcanvas-open .offcanvas ul li :is(a, span) {
    display: block;
    transform: translateY(0%);
    transition-delay: var(--delay);
}

.offcanvas ul:hover li {
    opacity: .4;
}

.offcanvas ul li:hover {
    opacity: 1;
    transform: translateX(.25rem);
}

/* divider */

.offcanvas hr.divider {
    transform: scaleX(0);
    transform-origin: left;
    transition: .8s cubic-bezier(.61, -0.01, .37, .99) all;
    transition-delay: 0s;
}

.offcanvas-open .offcanvas hr.divider {
    transform: scaleX(1);
    transition-delay: var(--base-delay);
}

/* stagger index */
.offcanvas ul li:nth-child(1) {
    --stagger-index: 1;
}

.offcanvas ul li:nth-child(2) {
    --stagger-index: 2;
}

.offcanvas ul li:nth-child(3) {
    --stagger-index: 3;
}

.offcanvas ul li:nth-child(4) {
    --stagger-index: 4;
}

.offcanvas ul li:nth-child(5) {
    --stagger-index: 5;
}

.offcanvas ul li:nth-child(6) {
    --stagger-index: 6;
}

.offcanvas ul li:nth-child(7) {
    --stagger-index: 7;
}

/* sister interaction */
body.load-out .curtain {
    background: var(--sister);
    transition-delay: .4s;
}

body .curtain.from-sister {
    transform: translateY(0%);
}

body.load-out .hamburger {
    opacity: 0;
}