:root {
    --page-transition-background: #e9e9e9;
    --page-transition-duration: 720ms;
    --page-reveal-duration: 780ms;
    --page-reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

html,
body {
    background-color: var(--page-transition-background);
}

.page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

.page-transition-overlay::before {
    content: "";
    position: absolute;
    left: var(--page-transition-x, 50vw);
    top: var(--page-transition-y, 50vh);
    width: var(--page-transition-size, 0px);
    height: var(--page-transition-size, 0px);
    border-radius: 50%;
    background-color: var(--page-transition-background);
    transform: translate(-50%, -50%) scale(0);
    transform-origin: center;
    will-change: transform;
}

.page-transition-overlay.is-expanding::before {
    animation: page-transition-expand var(--page-transition-duration)
        cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

html.page-transition-preparing body > .header,
html.page-transition-preparing body > header,
html.page-transition-preparing .hero-content,
html.page-transition-preparing .hero-product-stage,
html.page-transition-preparing .site-main .topbar,
html.page-transition-preparing .site-main .catalog-message,
html.page-transition-preparing .site-main .empty,
html.page-transition-preparing .page > .container > .back,
html.page-transition-preparing .page > .container > .card > .image-box,
html.page-transition-preparing .page > .container > .card > div:not(.image-box),
html.page-transition-preparing body > .min-h-screen > nav,
html.page-transition-preparing body > .min-h-screen > header,
html.page-transition-preparing body > .min-h-screen > main,
html.page-transition-preparing body > .min-h-screen > div {
    opacity: 0 !important;
    transform: translateY(18px) !important;
    filter: blur(3px) !important;
}

html.page-transition-preparing body > .header,
html.page-transition-preparing body > header,
html.page-transition-preparing body > .min-h-screen > nav {
    transform: translateY(-12px) !important;
}

.page-transition-reveal {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(3px);
    will-change: opacity, transform, filter;
}

.page-transition-reveal.page-transition-reveal-header {
    transform: translateY(-12px);
}

html.page-transition-arriving .page-transition-reveal {
    animation: page-transition-content-in var(--page-reveal-duration)
        var(--page-reveal-easing) var(--page-transition-delay, 0ms) both;
}

html.page-transition-arriving .page-transition-reveal.page-transition-reveal-header {
    animation-name: page-transition-header-in;
}

@keyframes page-transition-expand {
    to {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes page-transition-content-in {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes page-transition-header-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-transition-overlay {
        display: none !important;
    }

    html.page-transition-preparing .page-transition-reveal,
    .page-transition-reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}