/* ============================================================
   login.css — FID "QC Pipeline" animated auth hero.
   Purely presentational: replaces the left promo panel only.
   No login logic, IDs, or form markup depend on this file.
   ============================================================ */

.fid-hero {
    --navy0: #081426;
    --navy1: #0E1F3B;
    --navy2: #1B3860;
    --acc:  #2F80ED;
    --cyan: #5AC8FA;
    --green:#34C77B;
    --muted:#8FA6C9;
    --line: rgba(120,165,240,.28);

    color: #EAF1FB;
    background: radial-gradient(130% 120% at 12% -8%, var(--navy2) 0%, var(--navy1) 48%, var(--navy0) 100%), var(--navy0);
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    padding: 54px 56px;
}
.fid-hero .fid-hero-inner{ display:flex; flex-direction:column; justify-content:space-between; gap:26px; }
@media (max-width: 991.98px){ .fid-hero{ min-height: auto; padding: 40px 34px; } }
@media (max-width: 767.98px){ .fid-hero{ padding: 30px 26px; } }

/* blueprint grid, faded out toward edges */
.fid-hero-grid{
    position:absolute; inset:0; pointer-events:none; opacity:.55;
    background-image:
        linear-gradient(rgba(120,165,240,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,165,240,.10) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(120% 100% at 30% 15%, #000 42%, transparent 92%);
            mask-image: radial-gradient(120% 100% at 30% 15%, #000 42%, transparent 92%);
}
/* soft ambient glow */
.fid-hero::after{
    content:""; position:absolute; width:340px; height:340px; right:-90px; top:-70px;
    background: radial-gradient(circle, rgba(47,128,237,.35), transparent 70%);
    filter: blur(10px); pointer-events:none;
}

.fid-hero-inner{ position:relative; z-index:2; width:100%; }

/* eyebrow */
.fid-eyebrow{
    display:inline-flex; align-items:center; gap:.5rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
    color:#9FC2F5; border:1px solid var(--line); border-radius:999px;
    padding:.4rem .8rem; background:rgba(120,165,240,.08);
}
.fid-eyebrow-dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan);
    box-shadow:0 0 0 0 rgba(90,200,250,.6); animation:fidPulse 2.2s infinite; }
@keyframes fidPulse{ 70%{ box-shadow:0 0 0 8px rgba(90,200,250,0);} 100%{ box-shadow:0 0 0 0 rgba(90,200,250,0);} }

/* ============ THE PIPELINE ============
   One shared 10s timeline. Every element uses the SAME duration and NO
   animation-delay (timing is encoded as keyframe %), so the fill, the node
   lights, the green Approved and the stamp all stay in sync and reset together:
     0–54%  fill grows + chip travels + nodes light one by one (Approved greens at 54%)
     54–92% everything holds complete, stamp thumps in
     100%   loop resets cleanly
   ------------------------------------------------------------ */
.fid-pipe{ margin: 42px 0 40px; }
.fid-rail{
    position:relative; height:3px; border-radius:2px;
    background: rgba(120,165,240,.22); margin: 0 16px 0 16px;
}
.fid-rail .fill{
    position:absolute; inset:0; width:0; border-radius:2px;
    background: linear-gradient(90deg, var(--acc), var(--cyan));
    box-shadow: 0 0 12px rgba(90,200,250,.5);
    animation: fidFill 7s ease-in-out infinite;
}
@keyframes fidFill{ 0%{width:0} 54%{width:100%} 100%{width:100%} }

/* travelling memo chip with a comet tail */
.fid-chip{
    position:absolute; top:-12px; left:0; width:26px; height:26px; border-radius:8px;
    background: linear-gradient(135deg, #EAF6FF, #9AD7FB);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 0 0 5px rgba(90,200,250,.18), 0 8px 18px -5px rgba(90,200,250,.8);
    animation: fidTravel 7s ease-in-out infinite; z-index:3;
}
.fid-chip::before{ /* comet tail */
    content:""; position:absolute; right:100%; top:50%; transform:translateY(-50%);
    width:46px; height:8px; border-radius:8px;
    background: linear-gradient(90deg, transparent, rgba(90,200,250,.75));
}
.fid-chip svg{ width:13px; height:13px; stroke:#0E1F3B; fill:none; stroke-width:2.4; }
@keyframes fidTravel{
    0%{ left:0; opacity:0 }
    3%{ opacity:1 }
    54%{ left:100%; transform:translateX(-100%); opacity:1 }
    60%,100%{ left:100%; transform:translateX(-100%); opacity:0 }
}

/* stage nodes */
.fid-nodes{ display:flex; justify-content:space-between; margin: 0 2px; position:relative; top:-14px; }
.fid-node{ display:flex; flex-direction:column; align-items:center; gap:9px; width:20%; }
.fid-node .dot{
    position:relative; width:34px; height:34px; border-radius:50%;
    background:#12294d; border:2px solid var(--line);
    display:flex; align-items:center; justify-content:center;
}
.fid-node .dot svg{ width:15px; height:15px; stroke:#7FB3F5; fill:none; stroke-width:2; }
.fid-node small{
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:center;
}

/* light-up timing — per node, on the shared 7s clock (no delays) */
.fid-node.n1 .dot{ animation: fidN1 7s infinite; }
.fid-node.n2 .dot{ animation: fidN2 7s infinite; }
.fid-node.n3 .dot{ animation: fidN3 7s infinite; }
.fid-node.n4 .dot{ animation: fidN4 7s infinite; }
.fid-node.n5 .dot{ animation: fidN5 7s infinite; }
.fid-node.n1 .dot svg{ animation: fidI1 7s infinite; }
.fid-node.n2 .dot svg{ animation: fidI2 7s infinite; }
.fid-node.n3 .dot svg{ animation: fidI3 7s infinite; }
.fid-node.n4 .dot svg{ animation: fidI4 7s infinite; }
.fid-node.n5 .dot svg{ animation: fidI5 7s infinite; }

@keyframes fidN1{ 0%,6%{}  10%,100%{ background:var(--acc); border-color:var(--cyan); box-shadow:0 0 16px -2px rgba(90,200,250,.7); } }
@keyframes fidN2{ 0%,18%{} 22%,100%{ background:var(--acc); border-color:var(--cyan); box-shadow:0 0 16px -2px rgba(90,200,250,.7); } }
@keyframes fidN3{ 0%,30%{} 34%,100%{ background:var(--acc); border-color:var(--cyan); box-shadow:0 0 16px -2px rgba(90,200,250,.7); } }
@keyframes fidN4{ 0%,42%{} 46%,100%{ background:var(--acc); border-color:var(--cyan); box-shadow:0 0 16px -2px rgba(90,200,250,.7); } }
@keyframes fidN5{ 0%,52%{} 56%,100%{ background:var(--green); border-color:#7CE7B4; box-shadow:0 0 18px -2px rgba(52,199,123,.75); } }
@keyframes fidI1{ 0%,6%{stroke:#7FB3F5}  10%,100%{stroke:#fff} }
@keyframes fidI2{ 0%,18%{stroke:#7FB3F5} 22%,100%{stroke:#fff} }
@keyframes fidI3{ 0%,30%{stroke:#7FB3F5} 34%,100%{stroke:#fff} }
@keyframes fidI4{ 0%,42%{stroke:#7FB3F5} 46%,100%{stroke:#fff} }
@keyframes fidI5{ 0%,52%{stroke:#7FB3F5} 56%,100%{stroke:#fff} }

/* APPROVED stamp — lands right after Approved greens, holds, then resets */
.fid-stamp-wrap{ text-align:center; margin-top:26px; height:34px; }
.fid-stamp{
    display:inline-flex; align-items:center; gap:.5rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    letter-spacing:.26em; font-weight:700; font-size:.8rem; color:var(--green);
    border:2px solid var(--green); border-radius:9px; padding:.42rem .95rem;
    opacity:0; animation: fidStamp 7s infinite;
}
.fid-stamp svg{ width:14px; height:14px; stroke:var(--green); fill:none; stroke-width:2.6; }
@keyframes fidStamp{
    0%,56%{ opacity:0; transform:scale(1.4) rotate(-8deg); }
    62%{ opacity:1; transform:scale(1) rotate(-3deg); }
    92%{ opacity:1; } 100%{ opacity:0; }
}

/* ============ HERO COPY ============ */
.fid-hero-copy h3{
    font-size:1.55rem; line-height:1.16; margin:0 0 10px; letter-spacing:-.02em;
    font-weight:800; color:#F3F8FF; text-wrap:balance;
}
.fid-hero-copy h3 em{ font-style:normal; color:#7FB3F5; }
.fid-hero-copy h3 em.ok{ color:var(--green); }
.fid-hero-copy h3 em.bad{ color:#FF8A7A; }
.fid-hero-copy p{ margin:0; color:var(--muted); font-size:.9rem; line-height:1.55; max-width:44ch; }
.fid-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.fid-pills span{
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size:.64rem; letter-spacing:.05em; color:#C0D2ED;
    border:1px solid var(--line); background:rgba(255,255,255,.03);
    border-radius:8px; padding:.4rem .6rem; display:inline-flex; align-items:center; gap:.4rem;
}
.fid-pills span svg{ width:12px; height:12px; stroke:var(--cyan); fill:none; stroke-width:2; }

/* floating specks */
.fid-spark{ position:absolute; width:4px; height:4px; border-radius:50%; background:rgba(120,180,255,.5); z-index:1; }
.fid-spark.s1{ left:18%; bottom:12%; animation: fidDrift 7s ease-in-out infinite; }
.fid-spark.s2{ left:62%; bottom:22%; animation: fidDrift 8s ease-in-out infinite 1.5s; }
.fid-spark.s3{ left:82%; bottom:14%; animation: fidDrift 8s ease-in-out infinite .8s; }
@keyframes fidDrift{ 0%,100%{ transform:translateY(0); opacity:.2 } 50%{ transform:translateY(-16px); opacity:.7 } }

/* ============================================================
   FULL-PAGE SPLIT LAYOUT + professional form-side polish.
   Everything is scoped under .fid-auth so the rest of the app
   theme (light/dark) is never affected.
   ============================================================ */
.fid-auth{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    min-height:100vh;
    width:100%;
}
.fid-auth-form{
    display:flex; align-items:center; justify-content:center;
    padding:48px 40px;
    background:var(--phoenix-body-bg,#fff);
}
.fid-auth .auth-form-box{ width:100%; max-width:384px; }

@media (max-width: 991.98px){
    .fid-auth{ grid-template-columns:1fr; }
    .fid-auth-form{ padding:40px 24px; }
}

/* ---- typography ---- */
.fid-auth .auth-form-box h3{ font-weight:800; letter-spacing:-.02em; }
.fid-auth .form-label{
    font-weight:700; font-size:.74rem; letter-spacing:.04em;
    text-transform:uppercase; color:var(--phoenix-secondary-color); margin-bottom:.4rem;
}

/* ---- inputs ---- */
.fid-auth .form-control{
    border-radius:11px; border-width:1.5px;
    padding-top:.62rem; padding-bottom:.62rem;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.fid-auth .form-control:focus{
    border-color:#2F80ED;
    box-shadow:0 0 0 .22rem rgba(47,128,237,.18);
}
.fid-auth .form-check-input:checked{ background-color:#1B6FE3; border-color:#1B6FE3; }
.fid-auth .form-check-input:focus{ box-shadow:0 0 0 .22rem rgba(47,128,237,.18); }

/* ---- primary button ---- */
.fid-auth .btn-primary{
    background:linear-gradient(135deg,#2F80ED,#0B4FB0);
    border:0; border-radius:12px; padding:.8rem 1rem;
    font-weight:700; letter-spacing:.01em;
    box-shadow:0 12px 26px -12px rgba(27,111,227,.85);
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.fid-auth .btn-primary:hover{
    transform:translateY(-1px); filter:brightness(1.04);
    box-shadow:0 18px 32px -12px rgba(27,111,227,.95);
}
.fid-auth .btn-primary:active{ transform:translateY(0); }

/* ---- links ---- */
.fid-auth .auth-form-box a:not(.d-flex){ color:#1B6FE3; font-weight:600; text-decoration:none; }
.fid-auth .auth-form-box a:not(.d-flex):hover{ text-decoration:underline; }

/* ---- OTP digit boxes ---- */
.fid-auth .otp-digit{
    width:46px; height:54px; font-size:1.2rem; font-weight:700;
    border-radius:11px; border-width:1.5px;
    -moz-appearance:textfield;
}
.fid-auth .otp-digit::-webkit-outer-spin-button,
.fid-auth .otp-digit::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.fid-auth .otp-digit:focus{ border-color:#2F80ED; box-shadow:0 0 0 .22rem rgba(47,128,237,.18); }

@media (prefers-reduced-motion: reduce){
    .fid-hero *{ animation:none !important; }
    .fid-rail .fill{ width:100%; }
    .fid-chip{ display:none; }
    .fid-node .dot{ background:var(--acc); border-color:var(--cyan); }
    .fid-node.n5 .dot{ background:var(--green); border-color:#7CE7B4; }
    .fid-node .dot svg{ stroke:#fff; }
    .fid-stamp{ opacity:1; transform:none; }
}