@import url('theme.css');

/* auth.css only adds what's specific to login/signup — colors now come from theme.css */

.auth-shell {
    display: flex;
    min-height: 100vh;
}

/* ── LEFT: animated visual panel ── */
.auth-visual {
    flex: 1 1 55%;
    background: linear-gradient(150deg, var(--black) 0%, var(--black-mid) 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 40px;
}

    .auth-visual::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(ellipse 60% 50% at 50% 42%, rgba(255,90,31,.18) 0%, transparent 70%);
    }

.auth-visual-inner {
    position: relative;
    z-index: 1;
    max-width: 420px;
    text-align: center;
}

.auth-anim {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.auth-visual h2 {
    font-family: var(--fd);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 20px;
    line-height: 1.35;
}

.auth-visual p {
    color: var(--slate);
    font-size: .875rem;
    margin-top: 10px;
    line-height: 1.6;
}

/* ── RIGHT: form panel ── */
.auth-panel {
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 40px 24px;
}

.auth-card {
    width: 100%;
    max-width: 380px;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fd);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    margin-bottom: 30px;
}

.auth-card h1 {
    font-family: var(--fd);
    font-size: 1.5rem;
    margin-bottom: 6px;
}

.auth-sub {
    color: var(--muted);
    font-size: .875rem;
    margin-bottom: 26px;
}

.field {
    margin-bottom: 16px;
}

    .field label {
        display: block;
        font-size: .85rem;
        font-weight: 500;
        margin-bottom: 6px;
    }

    .field input {
        width: 100%;
        padding: 10px 13px;
        border: 1.5px solid var(--border-light);
        border-radius: 8px;
        font-size: .875rem;
        font-family: inherit;
    }

        .field input:focus {
            outline: none;
            border-color: var(--orange);
            box-shadow: 0 0 0 3px rgba(255,90,31,.12);
        }

.auth-error {
    color: var(--red);
    font-size: .82rem;
    margin-bottom: 10px;
    min-height: 1em;
}

.auth-btn {
    width: 100%;
    background: var(--orange);
    color: #fff;
    border: none;
    padding: 13px;
    border-radius: 10px;
    font-family: var(--fd);
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity .2s;
}

    .auth-btn:hover:not(:disabled) {
        opacity: .88;
    }

    .auth-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.auth-switch {
    text-align: center;
    font-size: .85rem;
    color: var(--muted);
    margin-top: 20px;
}

    .auth-switch a {
        color: var(--orange);
        font-weight: 600;
        text-decoration: none;
    }

@media (max-width: 900px) {
    .auth-shell {
        flex-direction: column;
    }

    .auth-visual {
        flex: 0 0 auto;
        padding: 44px 24px 28px;
    }

    .auth-anim {
        max-width: 240px;
    }

    .auth-visual h2 {
        font-size: 1.15rem;
    }
}

/* ══════════════════════════════
   ANIMATED "AI ↔ HUMAN" VISUAL — retoned to orange
   ══════════════════════════════ */
.anim-link {
    stroke: rgba(255,90,31,.35);
    stroke-width: 1.5;
    stroke-dasharray: 4 6;
    animation: dash-flow 1.6s linear infinite;
}

@keyframes dash-flow {
    to {
        stroke-dashoffset: -20;
    }
}

.anim-pulse-dot {
    fill: var(--orange);
    filter: drop-shadow(0 0 4px rgba(255,90,31,.8));
}

.anim-node {
    transform-box: fill-box;
    transform-origin: center;
}

.anim-node-ai {
    fill: rgba(255,90,31,.16);
    stroke: rgba(255,90,31,.55);
    stroke-width: 1.5;
}

.anim-node-human {
    fill: rgba(255,255,255,.1);
    stroke: rgba(255,255,255,.4);
    stroke-width: 1.5;
}

.anim-ring {
    fill: none;
    stroke-width: 1.2;
    transform-box: fill-box;
    transform-origin: center;
    animation: ring-pulse 2.6s ease-out infinite;
}

.anim-ring-ai {
    stroke: rgba(255,90,31,.5);
}

.anim-ring-human {
    stroke: rgba(255,255,255,.4);
}

.ring-2 {
    animation-delay: 1.3s;
}

@keyframes ring-pulse {
    0% {
        transform: scale(1);
        opacity: .55;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

.anim-icon-wave .wv {
    fill: var(--orange);
    transform-box: fill-box;
    transform-origin: center;
    animation: wv-bounce 1.4s ease-in-out infinite;
}

.wv1 {
    animation-delay: 0s
}

.wv2 {
    animation-delay: .12s
}

.wv3 {
    animation-delay: .24s
}

.wv4 {
    animation-delay: .36s
}

.wv5 {
    animation-delay: .48s
}

@keyframes wv-bounce {
    0%,100% {
        transform: scaleY(.55);
    }

    50% {
        transform: scaleY(1);
    }
}

.anim-icon-person circle, .anim-icon-person path {
    fill: rgba(255,255,255,.85);
}

.particle {
    fill: rgba(255,90,31,.55);
    animation: particle-float 6s ease-in-out infinite;
}

.p1 {
    animation-delay: 0s
}

.p2 {
    animation-delay: 1s
}

.p3 {
    animation-delay: 2s
}

.p4 {
    animation-delay: 3s
}

.p5 {
    animation-delay: 4s
}

.p6 {
    animation-delay: 5s
}

@keyframes particle-float {
    0%,100% {
        transform: translateY(0);
        opacity: .4;
    }

    50% {
        transform: translateY(-14px);
        opacity: .9;
    }
}