.s-login__glow {
    animation: s-panel-in 1.4s cubic-bezier(0.22, 0.8, 0.3, 1) backwards;
}

.s-login__form {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.s-login__pane {
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.s-login__pane.is-leaving-pane,
.s-login__pane.is-entering-pane {
    opacity: 0;
    transform: translateY(8px);
}

.s-btn.is-loading .s-btn__spin {
    animation: s-spin 0.7s linear infinite;
}

.s-alert {
    animation: s-shake 0.42s ease both;
}

.s-alert--ok {
    animation-name: s-rise;
}

.s-login.is-leaving .s-login__form {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

.s-login.is-leaving .s-login__glow {
    filter: brightness(1.6);
    transition: filter 0.45s ease;
}

.s-rise {
    animation: s-rise 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes s-panel-in {
    from { opacity: 0; transform: scale(1.04); }
    to { opacity: 1; transform: none; }
}

@keyframes s-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes s-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@keyframes s-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .s-login *,
    .s-login *::before,
    .s-login *::after {
        animation: none !important;
        transition: none !important;
    }
}