/* Adapted from SpinKit Flow by Tobias Ahlin (MIT): https://github.com/tobiasahlin/SpinKit */
.auth-transition {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    color: #252525;
    background: #f5f5f3;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}
.auth-transition.is-active,
html.auth-login-arrival .auth-transition {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.auth-transition-content { display: grid; justify-items: center; gap: 1.1rem; }
.auth-transition-content > span { font-size: .875rem; font-weight: 600; letter-spacing: .02em; }
.sk-flow { display: flex; justify-content: space-between; width: 52px; height: 52px; }
.sk-flow-dot {
    width: 25%;
    height: 25%;
    background: #2865d8;
    border-radius: 50%;
    animation: sk-flow 1.4s cubic-bezier(.455,.03,.515,.955) 0s infinite both;
}
.sk-flow-dot:nth-child(1) { animation-delay: -.30s; }
.sk-flow-dot:nth-child(2) { animation-delay: -.15s; }
@keyframes sk-flow {
    0%, 80%, 100% { transform: scale(.3); }
    40% { transform: scale(1); }
}
html[data-theme="claude"] .auth-transition { background: #f8efe6; }
html[data-theme="claude"] .sk-flow-dot { background: #71472f; }
@media (prefers-reduced-motion: reduce) {
    .auth-transition { transition-duration: .01ms; }
    .sk-flow-dot { animation: none; transform: scale(.75); }
}