@view-transition {
    navigation: auto;
}

html.auth-pending body {
    min-height: 100vh;
}

html.auth-pending body > * {
    visibility: hidden;
}

html.auth-pending body::before {
    position: fixed;
    inset: 50% auto auto 50%;
    z-index: 2147483647;
    width: 2.25rem;
    height: 2.25rem;
    margin: -1.125rem 0 0 -1.125rem;
    visibility: visible;
    content: '';
    pointer-events: none;
    border: 3px solid rgba(79, 70, 229, 0.18);
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: serva-auth-pending-spin 700ms linear infinite;
}

::view-transition-old(root) {
    animation: serva-page-fade-out 120ms ease-out both;
}

::view-transition-new(root) {
    animation: serva-page-fade-in 180ms ease-out both;
}

@keyframes serva-page-fade-out {
    to { opacity: 0; }
}

@keyframes serva-page-fade-in {
    from { opacity: 0; }
}

@keyframes serva-auth-pending-spin {
    to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }

    html.auth-pending body::before {
        animation: none;
    }
}