.bshPageTransition {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    place-items: center;
    color: var(--bsh-color-pastel-2);
    background: #fff;
    visibility: hidden;
    pointer-events: none;
    clip-path: inset(0 0 0 100%);
    will-change: clip-path, opacity;
    transition: clip-path 720ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 720ms;
}

.bshPageTransition::before,
.bshPageTransition::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

.bshPageTransition::before {
    inset: 0;
    background: #fff;
    opacity: 1;
}

.bshPageTransition::after {
    right: 0;
    bottom: 0;
    width: min(34vw, 520px);
    height: 1px;
    background: currentColor;
    opacity: .32;
    transform-origin: right center;
}

.bshPageTransition__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(22px, 2vw, 34px);
    place-items: center;
    text-align: center;
}

.bshPageTransition__logo {
    position: relative;
    width: clamp(170px, 17vw, 270px);
    color: var(--bsh-color-pastel-2);
    transform-origin: center;
    will-change: transform, opacity;
}

.bshPageTransition__logo::after {
    position: absolute;
    inset: -24px;
    border: 1px solid transparent;
    border-top-color: currentColor;
    border-right-color: rgb(184 175 170 / .3);
    border-radius: 50%;
    content: '';
    opacity: .68;
    animation: bshLoaderOrbit 1.15s linear infinite;
}

@keyframes bshLoaderOrbit {
    to { transform: rotate(360deg); }
}

.bshPageTransition__logo svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.bshPageTransition__logo svg path,
.bshPageTransition__logo svg circle,
.bshPageTransition__logo svg ellipse,
.bshPageTransition__logo svg polygon,
.bshPageTransition__logo svg polyline,
.bshPageTransition__logo svg line,
.bshPageTransition__logo svg rect {
    fill: transparent;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

html.bsh-page-transitioning,
html.bsh-page-transitioning body {
    overflow: hidden;
}

.transition-app {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    background: var(--bsh-color-bg);
    will-change: transform, opacity;
    transition: transform 720ms cubic-bezier(.22, 1, .36, 1), opacity 420ms ease;
}

html.bsh-page-transition-out .bshPageTransition,
html.bsh-page-transition-in .bshPageTransition {
    visibility: visible;
    transition-delay: 0s;
}

html.bsh-page-transition-out .bshPageTransition {
    clip-path: inset(0 0 0 0);
}

html.bsh-page-transition-out .transition-app {
    transform: translate3d(-100%, 0, 0);
}

html.bsh-page-transition-in .bshPageTransition {
    clip-path: inset(0 100% 0 0);
}

html.bsh-page-transition-in .transition-app,
.transition-app.is-bsh-page-incoming {
    transform: translate3d(100%, 0, 0);
}

html.bsh-page-transition-in .transition-app {
    transform: translate3d(0, 0, 0);
}

html.bsh-page-transitioning .bshPageTransition__logo svg path,
html.bsh-page-transitioning .bshPageTransition__logo svg circle,
html.bsh-page-transitioning .bshPageTransition__logo svg ellipse,
html.bsh-page-transitioning .bshPageTransition__logo svg polygon,
html.bsh-page-transitioning .bshPageTransition__logo svg polyline,
html.bsh-page-transitioning .bshPageTransition__logo svg line,
html.bsh-page-transitioning .bshPageTransition__logo svg rect {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: bshLoaderLine 1.35s ease-in-out infinite;
}

/* Keep every logo contour as one continuous line. The previous short dash
   pattern made the loader look striped instead of like the original mark. */
@keyframes bshLoaderLine {
    0%, 100% { opacity: .42; }
    50% { opacity: 1; }
}

@media (max-width: 767px) {
    .bshPageTransition__logo {
        width: clamp(132px, 39vw, 176px);
    }

    .bshPageTransition::after {
        width: 52vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bshPageTransition,
    .bshPageTransition__logo,
    .transition-app {
        will-change: auto;
    }

    .bshPageTransition__logo::after {
        animation: none;
    }

    html.bsh-page-transitioning .bshPageTransition__logo svg * {
        animation: none;
    }
}