/* ai.sodstr.ru — login-stage в info-стиле (ракета + звёзды + glassmorphism). */

:root {
    --c-sro-blue: #0f3460;
    --c-sro-blue-light: #1d4ed8;
    --c-sro-green: #22c55e;
    --c-sro-bg-dark: #050b1f;
}

.login-stage {
    min-height: 100vh;
    background: radial-gradient(ellipse at top, #0f3460 0%, #050b1f 70%);
    color: #e2e8f0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    padding: 50px 20px 30px;
    position: relative; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.login-stars {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 60% 70%, #fff, transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,.5), transparent),
        radial-gradient(2px 2px at 80% 20%, #fff, transparent),
        radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 90% 60%, #fff, transparent),
        radial-gradient(1px 1px at 35% 15%, rgba(255,255,255,.6), transparent),
        radial-gradient(2px 2px at 75% 85%, #fff, transparent),
        radial-gradient(1px 1px at 45% 90%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 25% 60%, #fff, transparent);
    background-size: 250px 250px;
    animation: stars-twinkle 6s ease-in-out infinite alternate;
}
@keyframes stars-twinkle {
    0%   { opacity: .5; }
    100% { opacity: 1; }
}

/* ракета */
.login-rocket {
    position: relative;
    margin-bottom: 28px;
    animation: rocket-land 1.6s cubic-bezier(.16, 1.2, .3, 1) both,
               rocket-bounce 1.8s ease-out 1.6s both;
}
@keyframes rocket-land {
    0%   { transform: translateY(-110vh) rotate(-10deg) scale(.5); opacity: 0; }
    35%  { opacity: 1; }
    72%  { transform: translateY(20px) rotate(0deg) scale(1); }
    100% { transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes rocket-bounce {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-8px); }
    50%  { transform: translateY(0); }
    75%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

.login-rocket__logo {
    filter: drop-shadow(0 8px 24px rgba(34, 197, 94, .35))
            drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
    position: relative; z-index: 2;
    animation: logo-float 4s ease-in-out infinite 2.5s;
}
.login-rocket__logo img {
    display: block;
    border-radius: 50%;
    background: #fff;
    width: 96px; height: 96px;
    padding: 6px;
}
@keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.login-rocket__fire {
    position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 50px; height: 70px;
    background: linear-gradient(180deg, #fbbf24 0%, #f97316 40%, #ef4444 80%, transparent 100%);
    border-radius: 50% 50% 30% 30%;
    filter: blur(5px);
    opacity: 0; z-index: 1;
    animation: fire-burn 1.6s ease-out both;
    transform-origin: top center;
}
@keyframes fire-burn {
    0%   { opacity: 0; transform: translateX(-50%) scaleY(0); }
    20%  { opacity: 1; transform: translateX(-50%) scaleY(2.5); }
    70%  { opacity: 1; transform: translateX(-50%) scaleY(1.5); }
    100% { opacity: 0; transform: translateX(-50%) scaleY(.3); }
}

.login-rocket__shadow {
    position: absolute;
    bottom: -22px; left: 50%; transform: translateX(-50%);
    width: 130px; height: 16px;
    background: radial-gradient(ellipse, rgba(34, 197, 94, .35) 0%, transparent 70%);
    border-radius: 50%;
    animation: shadow-grow 1.6s cubic-bezier(.16, 1.2, .3, 1) both;
}
@keyframes shadow-grow {
    0%   { transform: translateX(-50%) scale(.2); opacity: 0; }
    70%  { transform: translateX(-50%) scale(1.2); opacity: 1; }
    100% { transform: translateX(-50%) scale(1); opacity: .8; }
}

/* glassmorphism-карточка */
.login-card {
    position: relative; z-index: 3;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 32px 36px 28px;
    width: 100%; max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5),
                0 0 0 1px rgba(34, 197, 94, .08) inset;
    animation: card-in 1s ease-out 1.4s both;
}
@keyframes card-in {
    from { opacity: 0; transform: translateY(20px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-card__brand {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.login-card__title {
    font-weight: 800; letter-spacing: .8px; font-size: 16px;
    background: linear-gradient(120deg, #fff 0%, #c7d2fe 50%, #fff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer-login 4s linear infinite 2s;
}
@keyframes shimmer-login {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.login-card__sub {
    font-size: 11px; color: #94a3b8; margin-top: 6px;
    text-transform: uppercase; letter-spacing: .5px;
}
.login-card__welcome {
    text-align: center; font-size: 14px; color: #cbd5e1;
    margin-bottom: 22px;
}

.login-error {
    background: rgba(220, 38, 38, .15);
    border: 1px solid rgba(220, 38, 38, .35);
    color: #fca5a5;
    padding: 10px 14px; border-radius: 8px;
    font-size: 13px; margin-bottom: 16px;
    animation: shake .4s ease-out;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.login-form__label {
    display: block; font-size: 11px; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .8px;
    margin-bottom: 6px; font-weight: 600;
}
.login-form__input {
    width: 100%;
    padding: 11px 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: #fff; font-size: 14px;
    transition: border-color .2s, background .2s, box-shadow .2s;
    margin-bottom: 14px;
    font-family: inherit;
}
.login-form__input:focus {
    outline: none;
    border-color: rgba(34, 197, 94, .55);
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .12);
}

.login-form__submit {
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 6px 18px rgba(34, 197, 94, .35);
    text-transform: uppercase;
    margin-top: 4px;
}
.login-form__submit:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(34, 197, 94, .5); }
.login-form__submit-arrow { transition: transform .2s; font-weight: 400; }
.login-form__submit:hover .login-form__submit-arrow { transform: translateX(4px); }

.login-card__foot {
    margin-top: 20px;
    text-align: center;
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.login-note {
    margin-top: 24px;
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    max-width: 380px;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .login-rocket, .login-rocket__logo, .login-rocket__fire,
    .login-rocket__shadow, .login-stars, .login-card,
    .login-card__title { animation: none !important; }
}