.brandButton,
.startupLogo {
    --brand-logo-accent: var(--c-accent);
    --brand-logo-finish: var(--c-font);
    --brand-logo-path-length: 7821.54638671875px;
    --brand-logo-complete-offset: 15643.0927734375px;
    --brand-logo-duration: 1.5s;
    --brand-logo-ease: ease-in-out;
}

.brandButton {
    --brand-logo-base: color-mix(in srgb, var(--c-font) 16%, transparent);
}

.brandLogo {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.startupLogoGlow {
    width: clamp(360px, 70vmin, 800px);
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--c-accent) 16%, transparent) 0%,
        color-mix(in srgb, var(--c-accent) 10%, transparent) 28%,
        color-mix(in srgb, var(--c-accent) 4%, transparent) 55%,
        transparent 82%
    );
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.72);
    transform-origin: center;
}

.appStartup {
    /* Startup intro timing. */
    --startup-logo-reveal-duration: .66s;
    --startup-logo-reveal-hold-duration: 330ms;
    --startup-logo-erase-duration: 1s;
    --startup-logo-reveal-ease: cubic-bezier(0.5, 0, 0.75, 0);
    --startup-logo-erase-ease: ease-in-out;
    --startup-logo-reveal-offset-1: 100ms;
    --startup-logo-reveal-offset-2: 200ms;
    --startup-logo-reveal-offset-3: 300ms;
    --startup-logo-reveal-offset-4: 400ms;
    --startup-logo-erase-offset-1: -100ms;
    --startup-logo-erase-offset-2: -200ms;
    --startup-logo-erase-offset-3: -300ms;
    --startup-logo-erase-offset-4: -400ms;
}

.startupLogo {
    width: clamp(180px, 28vmin, 360px);
    height: auto;
    display: block;
    overflow: visible;
    pointer-events: none;
}

.appShell {
    --startup-intro-fade-duration: 333ms;
    --startup-intro-fade-ease: ease;
}

.appStartup {
    display: none;
}

html.has-js .appStartup {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transition:
        opacity var(--startup-intro-fade-duration) var(--startup-intro-fade-ease),
        visibility 0s linear var(--startup-intro-fade-duration);
}

html.has-js .appShell > :not(.appBackgroundCanvas):not(.appStartup) {
    transition: opacity var(--startup-intro-fade-duration) var(--startup-intro-fade-ease);
}

html.has-js .appShell:not(.is-ready) > :not(.appBackgroundCanvas):not(.appStartup) {
    opacity: 0;
    pointer-events: none;
}

html.has-js .appShell.is-ready .appStartup {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.brandLogo__base,
.brandLogo__reveal {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brandLogo__base {
    stroke: var(--brand-logo-base);
    stroke-width: 110px;
}

.brandLogo__reveal {
    stroke-dasharray: var(--brand-logo-path-length);
    stroke-dashoffset: var(--brand-logo-path-length);
    animation-fill-mode: both;
}

.brandLogo__reveal--1 {
    stroke: var(--brand-logo-accent);
    stroke-width: 20px;
    --brand-logo-forward-delay: 100ms;
    --brand-logo-erase-delay: -100ms;
}

.brandLogo__reveal--2 {
    stroke: var(--brand-logo-accent);
    stroke-width: 50px;
    --brand-logo-forward-delay: 200ms;
    --brand-logo-erase-delay: -200ms;
}

.brandLogo__reveal--3 {
    stroke: var(--brand-logo-accent);
    stroke-width: 80px;
    --brand-logo-forward-delay: 300ms;
    --brand-logo-erase-delay: -300ms;
}

.brandLogo__reveal--4 {
    stroke: var(--brand-logo-finish);
    stroke-width: 110px;
    --brand-logo-forward-delay: 400ms;
    --brand-logo-erase-delay: -400ms;
}

.startupLogo .brandLogo__reveal--1 {
    --startup-logo-reveal-delay: var(--startup-logo-reveal-offset-1);
    --startup-logo-erase-delay: var(--startup-logo-erase-offset-1);
}

.startupLogo .brandLogo__reveal--2 {
    --startup-logo-reveal-delay: var(--startup-logo-reveal-offset-2);
    --startup-logo-erase-delay: var(--startup-logo-erase-offset-2);
}

.startupLogo .brandLogo__reveal--3 {
    --startup-logo-reveal-delay: var(--startup-logo-reveal-offset-3);
    --startup-logo-erase-delay: var(--startup-logo-erase-offset-3);
}

.startupLogo .brandLogo__reveal--4 {
    --startup-logo-reveal-delay: var(--startup-logo-reveal-offset-4);
    --startup-logo-erase-delay: var(--startup-logo-erase-offset-4);
}

.startupLogo.is-forward + .startupLogoGlow {
    animation: startup-logo-glow-reveal calc(
        var(--startup-logo-reveal-duration) + var(--startup-logo-reveal-offset-4)
    ) var(--startup-logo-reveal-ease) both;
}

.startupLogo.is-complete + .startupLogoGlow {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
}

.startupLogo.is-erasing + .startupLogoGlow {
    animation: startup-logo-glow-erase var(--startup-logo-erase-duration) var(--startup-logo-erase-ease) both;
}

.brandLogo.is-complete .brandLogo__reveal,
.startupLogo.is-complete .brandLogo__reveal {
    stroke-dashoffset: var(--brand-logo-complete-offset);
}

.brandLogo.is-forward .brandLogo__reveal {
    animation-name: brand-logo-forward;
    animation-duration: var(--brand-logo-duration);
    animation-timing-function: var(--brand-logo-ease);
    animation-delay: var(--brand-logo-forward-delay);
}

.startupLogo.is-forward .brandLogo__reveal {
    animation-name: brand-logo-forward;
    animation-duration: var(--startup-logo-reveal-duration);
    animation-timing-function: var(--startup-logo-reveal-ease);
    animation-delay: var(--startup-logo-reveal-delay);
}

.brandLogo.is-erasing .brandLogo__reveal {
    animation-name: brand-logo-erase;
    animation-duration: var(--brand-logo-duration);
    animation-timing-function: var(--brand-logo-ease);
    animation-delay: var(--brand-logo-erase-delay);
}

.startupLogo.is-erasing .brandLogo__reveal {
    animation-name: brand-logo-erase;
    animation-duration: var(--startup-logo-erase-duration);
    animation-timing-function: var(--startup-logo-erase-ease);
    animation-delay: var(--startup-logo-erase-delay);
}

@keyframes brand-logo-forward {
    from {
        stroke-dashoffset: var(--brand-logo-path-length);
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes brand-logo-erase {
    from {
        stroke-dashoffset: var(--brand-logo-complete-offset);
    }

    to {
        stroke-dashoffset: var(--brand-logo-path-length);
    }
}

@keyframes startup-logo-glow-reveal {
    0%, 24% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72);
    }

    72% {
        opacity: 0.18;
        transform: translate(-50%, -50%) scale(0.92);
    }

    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes startup-logo-glow-erase {
    from {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.16);
    }
}

@media (prefers-reduced-motion: reduce) {
    .startupLogo.is-forward + .startupLogoGlow,
    .startupLogo.is-complete + .startupLogoGlow,
    .startupLogo.is-erasing + .startupLogoGlow {
        animation: none;
        opacity: 0;
    }
}