/*
 * ReneNeme global page curtain
 * A dependency-free clip-wipe inspired by Motion's curtains transition.
 */

:root {
    --page-curtain-cover-duration: 500ms;
    --page-curtain-reveal-duration: 620ms;
    --page-curtain-ease: cubic-bezier(0.76, 0, 0.24, 1);
}

/*
 * The curtain owns the whole navigation animation. Do not opt into the
 * browser's cross-document View Transition as well: its snapshot lifecycle
 * depends on when each destination finishes loading and can briefly replay
 * the logo/edge on slower pages.
 */

html.page-transition-pending::after {
    position: fixed;
    z-index: 2147483646;
    inset: 0;
    background:
        radial-gradient(circle at 74% 38%, rgba(212, 163, 64, 0.22), transparent 28rem),
        linear-gradient(135deg, #17140f 0%, #080807 64%, #12100c 100%);
    content: "";
    pointer-events: auto;
}

html.page-transition-pending::before {
    position: fixed;
    z-index: 2147483647;
    top: 50%;
    left: 50%;
    width: min(18rem, 54vw);
    aspect-ratio: 1283 / 354;
    background: #d4a340;
    content: "";
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
    -webkit-mask: var(--page-curtain-logo-mask, url("logo-reneneme-navbar-360.webp?v=1")) center / contain no-repeat;
    mask: var(--page-curtain-logo-mask, url("logo-reneneme-navbar-360.webp?v=1")) center / contain no-repeat;
}

.page-transition-curtain,
.page-transition-curtain[popover] {
    position: fixed;
    z-index: 2147483646;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    border: 0;
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 74% 38%, rgba(212, 163, 64, 0.22), transparent 28rem),
        linear-gradient(135deg, #17140f 0%, #080807 64%, #12100c 100%);
    color: #d4a340;
    clip-path: polygon(-24% 0, -18% 0, -10% 24%, -4% 50%, -10% 76%, -18% 100%, -24% 100%);
    contain: strict;
    pointer-events: auto;
    user-select: none;
    will-change: clip-path;
}

.page-transition-curtain::backdrop {
    background: transparent;
}

.page-transition-curtain::before {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(115deg, transparent 0 46px, rgba(255, 255, 255, 0.012) 47px 48px),
        linear-gradient(90deg, transparent 0%, rgba(212, 163, 64, 0.07) 72%, transparent 100%);
    content: "";
}

.page-transition-curtain::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(212, 163, 64, 0.4), transparent);
    content: "";
    opacity: 0.5;
}

.page-transition-curtain__brand {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: min(18rem, 54vw);
    place-items: center;
    opacity: 0;
    transform: translate3d(-50%, calc(-50% + 12px), 0);
}

.page-transition-curtain__brand::before {
    width: 100%;
    aspect-ratio: 1283 / 354;
    background: currentColor;
    content: "";
    -webkit-mask: var(--page-curtain-logo-mask, url("logo-reneneme-navbar-360.webp?v=1")) center / contain no-repeat;
    mask: var(--page-curtain-logo-mask, url("logo-reneneme-navbar-360.webp?v=1")) center / contain no-repeat;
}

.page-transition-curtain.is-covering {
    animation: page-curtain-cover var(--page-curtain-cover-duration) var(--page-curtain-ease) both;
}

.page-transition-curtain.is-covering .page-transition-curtain__brand {
    animation: page-curtain-brand-in 300ms 170ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-transition-curtain.is-covered {
    clip-path: polygon(0 0, 112% 0, 120% 24%, 124% 50%, 120% 76%, 112% 100%, 0 100%);
}

.page-transition-curtain.is-covered .page-transition-curtain__brand {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0);
}

.page-transition-curtain.is-revealing {
    animation: page-curtain-reveal var(--page-curtain-reveal-duration) var(--page-curtain-ease) both;
}

.page-transition-curtain.is-revealing .page-transition-curtain__brand {
    animation: page-curtain-brand-out 220ms 40ms ease both;
}

html[data-theme="light"] .page-transition-curtain,
html[data-theme="light"] .page-transition-curtain[popover],
html[data-theme="light"].page-transition-pending::after {
    background:
        radial-gradient(circle at 74% 38%, rgba(91, 60, 48, 0.18), transparent 28rem),
        linear-gradient(135deg, #fff9f1 0%, #f7efe5 64%, #ecddcc 100%);
    color: #5b3c30;
}

html[data-theme="light"].page-transition-pending::before {
    background: #5b3c30;
}

@keyframes page-curtain-cover {
    from {
        clip-path: polygon(-24% 0, -18% 0, -10% 24%, -4% 50%, -10% 76%, -18% 100%, -24% 100%);
    }

    to {
        clip-path: polygon(0 0, 112% 0, 120% 24%, 124% 50%, 120% 76%, 112% 100%, 0 100%);
    }
}

@keyframes page-curtain-reveal {
    from {
        clip-path: polygon(-4% 0, 112% 0, 120% 0, 120% 100%, 112% 100%, -4% 100%, 2% 76%, 8% 50%, 2% 24%);
    }

    to {
        clip-path: polygon(112% 0, 124% 0, 124% 0, 124% 100%, 124% 100%, 112% 100%, 118% 76%, 124% 50%, 118% 24%);
    }
}

@keyframes page-curtain-brand-in {
    from {
        opacity: 0;
        transform: translate3d(-50%, calc(-50% + 12px), 0);
    }

    to {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0);
    }
}

@keyframes page-curtain-brand-out {
    from {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(-50%, calc(-50% - 8px), 0);
    }
}

@media (max-width: 767px), (pointer: coarse) {
    :root {
        --page-curtain-cover-duration: 420ms;
        --page-curtain-reveal-duration: 500ms;
    }

    html.page-transition-pending::before,
    .page-transition-curtain__brand {
        width: min(14.5rem, 58vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.page-transition-pending::before,
    html.page-transition-pending::after,
    .page-transition-curtain,
    .page-transition-curtain[popover] {
        display: none !important;
        animation: none !important;
    }
}