/* ── Background Animation (Modern CSS Properties) ────────────── */
@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(217, 100%, 30%, 1)
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 38.584065253664996%
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 93%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 63%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1)
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 33%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -7%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.10878124098502%
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.558651527792346%
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 84%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1)
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1)
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 14%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.558651527792346%
}

@property --c-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1)
}

@property --x-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%
}

@property --y-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 96%
}

@property --s-start-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.558651527792346%
}

@property --s-start-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 22.558651527792346%
}

@property --y-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 90%
}

@property --x-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 93%
}

@property --c-5 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1)
}

@property --s-start-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 39.67138181429644%
}

@property --x-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --y-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 61%
}

@property --c-6 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(279, 67%, 27%, 1)
}

@property --s-start-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 49.58090142552271%
}

@property --y-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 59%
}

@property --x-7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 94%
}

@property --c-7 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(279, 67%, 27%, 1)
}

@property --c-8 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(217, 100%, 39%, 1)
}

@property --y-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 63%
}

@property --x-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 48%
}

@property --s-start-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-8 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 34.815367581495366%
}

@property --c-9 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(217, 100%, 30%, 1)
}

@property --s-start-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 31.77166380372925%
}

@property --x-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 96%
}

@property --y-9 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 78%
}

@keyframes ani-login-bg {
    0% {
        --c-0: hsla(217, 100%, 30%, 1);
        --s-start-0: 8.39%;
        --s-end-0: 38.58%;
        --x-0: 93%;
        --y-0: 63%;
        --c-1: hsla(0, 0%, 0%, 1);
        --x-1: 33%;
        --y-1: -7%;
        --s-start-1: 8.39%;
        --s-end-1: 22.10%;
        --s-start-2: 8.39%;
        --s-end-2: 22.55%;
        --y-2: 7%;
        --x-2: 84%;
        --c-2: hsla(0, 0%, 0%, 1);
        --c-3: hsla(0, 0%, 0%, 1);
        --x-3: 14%;
        --y-3: 5%;
        --s-start-3: 8.39%;
        --s-end-3: 22.55%;
        --c-4: hsla(0, 0%, 0%, 1);
        --x-4: 7%;
        --y-4: 96%;
        --s-start-4: 8.39%;
        --s-end-4: 22.55%;
        --s-start-5: 8.39%;
        --s-end-5: 22.55%;
        --y-5: 90%;
        --x-5: 93%;
        --c-5: hsla(0, 0%, 0%, 1);
        --s-start-6: 8.39%;
        --s-end-6: 39.67%;
        --x-6: 3%;
        --y-6: 61%;
        --c-6: hsla(279, 67%, 27%, 1);
        --s-start-7: 8.39%;
        --s-end-7: 49.58%;
        --y-7: 59%;
        --x-7: 94%;
        --c-7: hsla(279, 67%, 27%, 1);
        --c-8: hsla(217, 100%, 39%, 1);
        --y-8: 63%;
        --x-8: 48%;
        --s-start-8: 8.39%;
        --s-end-8: 34.81%;
        --c-9: hsla(217, 100%, 30%, 1);
        --s-start-9: 8.39%;
        --s-end-9: 31.77%;
        --x-9: 96%;
        --y-9: 78%;
    }

    50% {
        --c-0: hsla(217, 100%, 30%, 1);
        --s-start-0: 12.89%;
        --s-end-0: 42.94%;
        --x-0: 2%;
        --y-0: 59%;
        --c-1: hsla(0, 0%, 0%, 1);
        --x-1: 42%;
        --y-1: 10%;
        --s-start-1: 8.39%;
        --s-end-1: 41.69%;
        --s-start-2: 8.39%;
        --s-end-2: 20.48%;
        --y-2: 29%;
        --x-2: 75%;
        --c-2: hsla(0, 0%, 0%, 1);
        --c-3: hsla(0, 0%, 0%, 1);
        --x-3: 5%;
        --y-3: 16%;
        --s-start-3: 8.39%;
        --s-end-3: 30.09%;
        --c-4: hsla(0, 0%, 0%, 1);
        --x-4: 36%;
        --y-4: 91%;
        --s-start-4: 8.39%;
        --s-end-4: 24.59%;
        --s-start-5: 8.39%;
        --s-end-5: 24.59%;
        --y-5: 91%;
        --x-5: 70%;
        --c-5: hsla(0, 0%, 0%, 1);
        --s-start-6: 9%;
        --s-end-6: 26.82%;
        --x-6: 54%;
        --y-6: 73%;
        --c-6: hsla(279, 67%, 27%, 1);
        --s-start-7: 9%;
        --s-end-7: 49.05%;
        --y-7: 76%;
        --x-7: 57%;
        --c-7: hsla(279, 67%, 27%, 1);
        --c-8: hsla(217, 100%, 39%, 1);
        --y-8: 53%;
        --x-8: 11%;
        --s-start-8: 9%;
        --s-end-8: 26.16%;
        --c-9: hsla(217, 100%, 30%, 1);
        --s-start-9: 9%;
        --s-end-9: 22.15%;
        --x-9: 70%;
        --y-9: 70%;
    }

    100% {
        --c-1: hsla(0, 0%, 0%, 1);
        --x-1: 76%;
        --y-1: -3%;
        --s-start-1: 8.39%;
        --s-end-1: 59.32%;
        --s-start-2: 8.39%;
        --s-end-2: 28.52%;
        --y-2: 18%;
        --x-2: 97%;
        --c-2: hsla(0, 0%, 0%, 1);
        --c-3: hsla(0, 0%, 0%, 1);
        --x-3: 42%;
        --y-3: 18%;
        --s-start-3: 8.39%;
        --s-end-3: 28.52%;
        --c-4: hsla(0, 0%, 0%, 1);
        --x-4: 66%;
        --y-4: 95%;
        --s-start-4: 8.39%;
        --s-end-4: 28.52%;
        --s-start-5: 8.39%;
        --s-end-5: 28.52%;
        --y-5: 92%;
        --x-5: 46%;
        --c-5: hsla(0, 0%, 0%, 1);
        --s-start-6: 24.72%;
        --s-end-6: 47.49%;
        --x-6: 102%;
        --y-6: 16%;
        --c-6: hsla(279, 67%, 27%, 1);
        --s-start-7: 10.20%;
        --s-end-7: 50.46%;
        --y-7: 52%;
        --x-7: 22%;
        --c-7: hsla(279, 67%, 27%, 1);
        --c-9: hsla(217, 100%, 31%, 1);
        --s-start-9: 6.29%;
        --s-end-9: 20.79%;
        --x-9: 97%;
        --y-9: 51%;
    }
}

/* ── Body ───────────────────────────────────────────────────── */
.login-body {
    font-family: var(--font-family, 'Inter', sans-serif);
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4, 1rem);
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;

    /* Dynamic Background */
    --c-0: hsla(217, 100%, 30%, 1);
    --x-0: 93%;
    --y-0: 63%;
    --c-1: hsla(0, 0%, 0%, 1);
    --x-1: 33%;
    --y-1: -7%;
    --y-2: 7%;
    --x-2: 84%;
    --c-2: hsla(0, 0%, 0%, 1);
    --c-3: hsla(0, 0%, 0%, 1);
    --x-3: 14%;
    --y-3: 5%;
    --c-4: hsla(0, 0%, 0%, 1);
    --x-4: 7%;
    --y-4: 96%;
    --y-5: 90%;
    --x-5: 93%;
    --c-5: hsla(0, 0%, 0%, 1);
    --x-6: 3%;
    --y-6: 61%;
    --c-6: hsla(279, 67%, 27%, 1);
    --y-7: 59%;
    --x-7: 94%;
    --c-7: hsla(279, 67%, 27%, 1);
    --c-8: hsla(217, 100%, 39%, 1);
    --y-8: 63%;
    --x-8: 48%;
    --c-9: hsla(217, 100%, 30%, 1);
    --x-9: 96%;
    --y-9: 78%;

    background-color: hsla(262, 82%, 3%, 1);
    background-image:
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)),
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)),
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)),
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)),
        radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)),
        radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5)),
        radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6)),
        radial-gradient(circle at var(--x-7) var(--y-7), var(--c-7) var(--s-start-7), transparent var(--s-end-7)),
        radial-gradient(circle at var(--x-8) var(--y-8), var(--c-8) var(--s-start-8), transparent var(--s-end-8)),
        radial-gradient(circle at var(--x-9) var(--y-9), var(--c-9) var(--s-start-9), transparent var(--s-end-9));
    animation: ani-login-bg 15s linear infinite alternate-reverse;
    background-blend-mode: normal;
    will-change: transform, opacity;
    contain: paint;
}

/* ── Scene (hidden as background is now on body) ────────────── */
.login-scene {
    display: none;
}

/* ── Container ──────────────────────────────────────────────── */
.login-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
}

/* ── Card ───────────────────────────────────────────────────── */
.login-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    animation: cardIn .5s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Brand Section ──────────────────────────────────────────── */
.login-brand {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo {
    font-size: 3rem;
    line-height: 1;
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin-bottom: .5rem;
    animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 8px rgba(99, 102, 241, .5));
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(139, 92, 246, .7));
    }
}

.login-app-name {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #1e293b;
    margin-bottom: .25rem;
}

.login-tagline {
    font-size: .875rem;
    color: #64748b;
    font-weight: 400;
}

/* ── Alerts ─────────────────────────────────────────────────── */
.login-alert {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem 1rem;
    border-radius: .75rem;
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    animation: slideIn .3s ease both;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-alert svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.login-alert--error {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .3);
    color: #fca5a5;
}

.login-alert--success {
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .3);
    color: #6ee7b7;
}

/* ── Form ───────────────────────────────────────────────────── */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Input wrapper */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: .875rem;
    width: 18px;
    height: 18px;
    color: #64748b;
    pointer-events: none;
    flex-shrink: 0;
    transition: color 200ms;
}

.form-input {
    width: 100%;
    padding: .8125rem 1rem .8125rem 2.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    color: #1e293b;
    font-size: .9375rem;
    font-family: inherit;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    min-height: 48px;
    /* touch friendly */
}

.form-input::placeholder {
    color: #94a3b8;
}

.form-input:hover {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
}

.form-input:focus {
    border-color: #6366f1;
    background: rgba(99, 102, 241, .06);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .2);
}

.form-input:focus+.input-icon,
.input-wrapper:focus-within .input-icon {
    color: #6366f1;
}

/* Password has eye button → padding right */
#password.form-input {
    padding-right: 3rem;
}

/* Field error */
.field-error {
    font-size: .8rem;
    color: #fca5a5;
    font-weight: 500;
    min-height: 1em;
}

/* Show/hide password button */
.input-eye {
    position: absolute;
    right: .75rem;
    padding: .375rem;
    border-radius: .5rem;
    color: #64748b;
    transition: color 200ms, background 200ms;
    display: flex;
    align-items: center;
    min-width: 32px;
    min-height: 32px;
    justify-content: center;
}

.input-eye:hover {
    color: #94a3b8;
    background: rgba(255, 255, 255, .06);
}

.eye-icon {
    width: 18px;
    height: 18px;
}

/* Form group state: error */
.form-group--error .form-input {
    border-color: rgba(239, 68, 68, .6);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}

/* ── Submit Button ──────────────────────────────────────────── */
.btn-login {
    position: relative;
    padding: .9375rem 1.5rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: .875rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .25rem;
    min-height: 52px;
    touch-action: manipulation;
    letter-spacing: .01em;
}

.btn-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .1), transparent);
    opacity: 0;
    transition: opacity 200ms;
}

.btn-login:hover:not(:disabled)::before {
    opacity: 1;
}

.btn-login:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, .45);
}

.btn-login:active:not(:disabled) {
    transform: translateY(0);
}

.btn-login:disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* Spinner */
.btn-login__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

.btn-login.loading .btn-login__text {
    opacity: 0;
    position: absolute;
}

.btn-login.loading .btn-login__spinner {
    display: block;
}

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

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .login-card {
        padding: 2rem 1.25rem;
        border-radius: 1.25rem;
    }

    .login-app-name {
        font-size: 1.5rem;
    }
}

@media (max-width: 360px) {
    .login-card {
        padding: 1.5rem 1rem;
    }
}