/* ══════════════════════════════════════════════════════════════════
   FRPC CAD — Login redesign
   Dark fullscreen + animated workflow pipeline + staggered form
══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --accent:      #d4e157;
  --accent-glow: rgba(212,225,87,.4);
  --accent-dim:  rgba(212,225,87,.12);
  --dark:        #0d0d0d;
  --dark-2:      #131313;
  --dark-3:      #1c1c1c;
  --white:       #ffffff;
  --text:        #1a1a1a;
  --text-2:      #64748b;
  --text-3:      #94a3b8;
  --ease:        cubic-bezier(.16,1,.3,1);
  --spring:      cubic-bezier(.34,1.56,.64,1);
  --radius:      28px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { font-size:15px; -webkit-font-smoothing:antialiased; height:100%; overflow:hidden; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--dark); color:var(--text);
  height:100%; overflow:hidden; display:flex;
  align-items:center; justify-content:center;
}

/* ══════════════════════════════════════
   ANIMATED BACKGROUND
══════════════════════════════════════ */

.bg-glow {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 50%, rgba(212,225,87,.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 60%, rgba(212,225,87,.04) 0%, transparent 65%);
  animation:glowPulse 10s ease-in-out infinite alternate;
}
@keyframes glowPulse {
  from { opacity:.7; transform:scale(1); }
  to   { opacity:1;  transform:scale(1.04); }
}

.bg-particles { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.bg-particles i {
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--accent); opacity:0;
  animation:partFloat var(--d,20s) var(--delay,0s) linear infinite;
}
.bg-particles i:nth-child(1)  { left:8%;  --d:18s; --delay:0s;   }
.bg-particles i:nth-child(2)  { left:22%; --d:23s; --delay:-5s;  }
.bg-particles i:nth-child(3)  { left:38%; --d:16s; --delay:-2s;  }
.bg-particles i:nth-child(4)  { left:52%; --d:25s; --delay:-9s;  }
.bg-particles i:nth-child(5)  { left:67%; --d:19s; --delay:-3s;  }
.bg-particles i:nth-child(6)  { left:83%; --d:22s; --delay:-12s; }
.bg-particles i:nth-child(7)  { left:14%; --d:17s; --delay:-7s;  }
.bg-particles i:nth-child(8)  { left:33%; --d:24s; --delay:-15s; }
.bg-particles i:nth-child(9)  { left:58%; --d:15s; --delay:-8s;  }
.bg-particles i:nth-child(10) { left:77%; --d:20s; --delay:-4s;  }
.bg-particles i:nth-child(11) { left:4%;  --d:27s; --delay:-6s;  }
.bg-particles i:nth-child(12) { left:46%; --d:18s; --delay:-13s; }
.bg-particles i:nth-child(13) { left:71%; --d:21s; --delay:-2s;  }
.bg-particles i:nth-child(14) { left:91%; --d:14s; --delay:-10s; }
.bg-particles i:nth-child(15) { left:29%; --d:26s; --delay:-17s; }
@keyframes partFloat {
  0%   { opacity:0; top:108%; transform:translateX(0) scale(1); }
  8%   { opacity:.5; }
  92%  { opacity:.3; }
  100% { opacity:0; top:-8%;  transform:translateX(30px) scale(.4); }
}

/* ══════════════════════════════════════
   PAGE & CARD
══════════════════════════════════════ */

.page {
  width:100%; height:100%; display:flex;
  align-items:center; justify-content:center;
  padding:20px; position:relative; z-index:1;
}

.card {
  width:100%; max-width:1080px; min-height:620px;
  display:flex; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 48px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
  animation:cardIn 1s var(--ease) both;
}
@keyframes cardIn {
  from { opacity:0; transform:translateY(52px) scale(.95); filter:blur(12px); }
  to   { opacity:1; transform:none; filter:none; }
}

/* ══════════════════════════════════════
   LEFT PANEL
══════════════════════════════════════ */

.card-left {
  flex:1.05; background:var(--dark-2); position:relative;
  display:flex; flex-direction:column; padding:40px 36px; overflow:hidden;
}

/* Grid texture */
.card-left::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(212,225,87,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,225,87,.035) 1px, transparent 1px);
  background-size:48px 48px;
}
/* Glow orb */
.card-left::after {
  content:''; position:absolute; top:-120px; right:-120px; pointer-events:none;
  width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,225,87,.09) 0%, transparent 70%);
  animation:orbDrift 9s ease-in-out infinite alternate;
}
@keyframes orbDrift {
  from { transform:translate(0,0); }
  to   { transform:translate(-24px,32px); }
}
/* Bottom glow */
.card-left .left-status::before {
  display:none;
}

/* ── Brand ── */
.brand {
  display:flex; align-items:center; gap:12px;
  animation:slideDown .8s var(--ease) .1s both;
  position:relative; z-index:1;
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-14px); }
  to   { opacity:1; transform:none; }
}
.brand-icon {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px var(--accent-glow);
}
.brand-icon svg { width:20px; height:20px; stroke:var(--dark); stroke-width:2; }
.brand-name { font-size:.95rem; font-weight:700; color:#fff; letter-spacing:-.01em; }

/* ── Pipeline ── */
.pipeline {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:24px 0; position:relative; z-index:1;
  animation:slideUp .9s var(--ease) .25s both;
}
@keyframes slideUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:none; }
}
.pipe-title {
  font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin-bottom:22px;
}

.pipe-item {
  display:flex; align-items:center; gap:16px;
}
.pipe-node {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  position:relative; z-index:1;
}
/* Outer ring */
.pipe-node::before {
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid var(--accent); opacity:0; transform:scale(.7);
  transition:all .3s;
}
/* Inner dot */
.pipe-node::after {
  content:''; position:absolute; inset:5px; border-radius:50%;
  background:var(--accent); opacity:0; transform:scale(0);
  transition:all .25s;
}
.pipe-label {
  font-size:.76rem; font-weight:500;
  color:rgba(255,255,255,.3); letter-spacing:.01em;
}

/* Connector */
.pipe-conn {
  width:2px; height:20px; margin-left:12px;
  background:rgba(255,255,255,.07); border-radius:2px;
  position:relative; overflow:hidden;
}
.pipe-conn::after {
  content:''; position:absolute; top:-100%; left:0; width:100%; height:60%;
  background:linear-gradient(180deg, transparent, var(--accent), transparent);
  border-radius:2px;
}

/* ── Sequential node animations (8 states, 1s each, 8s cycle) ── */
@keyframes nodeOn {
  0%,12%,100% {
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.1);
    box-shadow:none;
  }
  13%,24% {
    background:rgba(212,225,87,.15);
    border-color:var(--accent);
    box-shadow:0 0 18px var(--accent-glow), 0 0 40px rgba(212,225,87,.15);
  }
}
@keyframes dotOn {
  0%,12%,100% { opacity:0; transform:scale(0); }
  13%,24%     { opacity:1; transform:scale(1); }
}
@keyframes ringOn {
  0%,12%,100% { opacity:0; transform:scale(.7); }
  13%,24%     { opacity:.6; transform:scale(1.2); }
}
@keyframes labelOn {
  0%,12%,100% { color:rgba(255,255,255,.3); }
  13%,24%     { color:var(--accent); }
}
@keyframes connFlow {
  0%   { top:-100%; }
  100% { top:200%; }
}

/* Apply per node */
.pipe-1 .pipe-node        { animation:nodeOn  8s ease-in-out 0s  infinite; }
.pipe-1 .pipe-node::after { animation:dotOn   8s ease-in-out 0s  infinite; }
.pipe-1 .pipe-node::before{ animation:ringOn  8s ease-in-out 0s  infinite; }
.pipe-1 .pipe-label       { animation:labelOn 8s ease-in-out 0s  infinite; }
.pipe-2 .pipe-node        { animation:nodeOn  8s ease-in-out 1s  infinite; }
.pipe-2 .pipe-node::after { animation:dotOn   8s ease-in-out 1s  infinite; }
.pipe-2 .pipe-node::before{ animation:ringOn  8s ease-in-out 1s  infinite; }
.pipe-2 .pipe-label       { animation:labelOn 8s ease-in-out 1s  infinite; }
.pipe-3 .pipe-node        { animation:nodeOn  8s ease-in-out 2s  infinite; }
.pipe-3 .pipe-node::after { animation:dotOn   8s ease-in-out 2s  infinite; }
.pipe-3 .pipe-node::before{ animation:ringOn  8s ease-in-out 2s  infinite; }
.pipe-3 .pipe-label       { animation:labelOn 8s ease-in-out 2s  infinite; }
.pipe-4 .pipe-node        { animation:nodeOn  8s ease-in-out 3s  infinite; }
.pipe-4 .pipe-node::after { animation:dotOn   8s ease-in-out 3s  infinite; }
.pipe-4 .pipe-node::before{ animation:ringOn  8s ease-in-out 3s  infinite; }
.pipe-4 .pipe-label       { animation:labelOn 8s ease-in-out 3s  infinite; }
.pipe-5 .pipe-node        { animation:nodeOn  8s ease-in-out 4s  infinite; }
.pipe-5 .pipe-node::after { animation:dotOn   8s ease-in-out 4s  infinite; }
.pipe-5 .pipe-node::before{ animation:ringOn  8s ease-in-out 4s  infinite; }
.pipe-5 .pipe-label       { animation:labelOn 8s ease-in-out 4s  infinite; }
.pipe-6 .pipe-node        { animation:nodeOn  8s ease-in-out 5s  infinite; }
.pipe-6 .pipe-node::after { animation:dotOn   8s ease-in-out 5s  infinite; }
.pipe-6 .pipe-node::before{ animation:ringOn  8s ease-in-out 5s  infinite; }
.pipe-6 .pipe-label       { animation:labelOn 8s ease-in-out 5s  infinite; }
.pipe-7 .pipe-node        { animation:nodeOn  8s ease-in-out 6s  infinite; }
.pipe-7 .pipe-node::after { animation:dotOn   8s ease-in-out 6s  infinite; }
.pipe-7 .pipe-node::before{ animation:ringOn  8s ease-in-out 6s  infinite; }
.pipe-7 .pipe-label       { animation:labelOn 8s ease-in-out 6s  infinite; }
.pipe-8 .pipe-node        { animation:nodeOn  8s ease-in-out 7s  infinite; }
.pipe-8 .pipe-node::after { animation:dotOn   8s ease-in-out 7s  infinite; }
.pipe-8 .pipe-node::before{ animation:ringOn  8s ease-in-out 7s  infinite; }
.pipe-8 .pipe-label       { animation:labelOn 8s ease-in-out 7s  infinite; }

/* Connector flows */
.conn-1::after { animation:connFlow 8s linear 0.5s infinite; }
.conn-2::after { animation:connFlow 8s linear 1.5s infinite; }
.conn-3::after { animation:connFlow 8s linear 2.5s infinite; }
.conn-4::after { animation:connFlow 8s linear 3.5s infinite; }
.conn-5::after { animation:connFlow 8s linear 4.5s infinite; }
.conn-6::after { animation:connFlow 8s linear 5.5s infinite; }
.conn-7::after { animation:connFlow 8s linear 6.5s infinite; }

/* ── Status pills ── */
.left-status {
  display:flex; gap:8px; flex-wrap:wrap;
  position:relative; z-index:1;
  animation:slideUp .8s var(--ease) .5s both;
}
.status-pill {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:100px; padding:6px 14px;
  font-size:.6rem; font-weight:600;
  color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.08em;
}
.status-dot {
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow:0 0 6px var(--accent); opacity:1; }
  50%     { box-shadow:0 0 16px var(--accent); opacity:.7; }
}

/* ══════════════════════════════════════
   RIGHT PANEL
══════════════════════════════════════ */

.card-right {
  flex:1; background:var(--white); display:flex;
  align-items:center; justify-content:center;
  padding:52px 48px; position:relative; overflow:hidden;
}

/* Decorative rings */
.card-right::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:210px; height:210px; border-radius:50%;
  border:30px solid var(--accent); opacity:.07;
  animation:ringRot 55s linear infinite;
  pointer-events:none;
}
.card-right::after {
  content:''; position:absolute; bottom:-60px; left:-60px;
  width:170px; height:170px; border-radius:50%;
  border:20px solid rgba(26,26,26,.06);
  animation:ringRot 75s linear infinite reverse;
  pointer-events:none;
}
@keyframes ringRot { to { transform:rotate(360deg); } }

.form-wrap {
  width:100%; max-width:320px; display:flex;
  flex-direction:column; position:relative; z-index:1;
}

/* Staggered entrance */
.form-logo    { animation:fadeUp .6s var(--ease) .35s both; }
.form-eyebrow { animation:fadeUp .6s var(--ease) .45s both; }
.form-heading { animation:fadeUp .6s var(--ease) .5s  both; }
.form-sub     { animation:fadeUp .6s var(--ease) .55s both; }
.error-msg    { animation:fadeUp .6s var(--ease) .55s both; }
.btn-ms       { animation:fadeUp .6s var(--ease) .6s  both; }
.form-divider { animation:fadeUp .6s var(--ease) .65s both; }
.btn-portal   { animation:fadeUp .6s var(--ease) .7s  both; }
.form-info    { animation:fadeUp .6s var(--ease) .75s both; }
.form-footer  { animation:fadeUp .6s var(--ease) .8s  both; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:none; }
}

/* ── Logo ── */
.form-logo {
  display:flex; align-items:center; gap:10px; margin-bottom:40px;
}
.form-logo-mark {
  width:36px; height:36px; border-radius:8px;
  background:var(--dark-2); display:flex; align-items:center; justify-content:center;
}
.form-logo-mark svg { width:18px; height:18px; stroke:var(--accent); stroke-width:2; }
.form-logo span { font-size:1.1rem; font-weight:700; letter-spacing:-.01em; color:var(--text); }

/* ── Eyebrow ── */
.form-eyebrow {
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.eyebrow-line { width:22px; height:2px; background:var(--accent); border-radius:2px; flex-shrink:0; }
.form-eyebrow span:last-child {
  font-size:.58rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--text-3);
}

/* ── Heading ── */
.form-heading {
  font-size:2.7rem; font-weight:800; letter-spacing:-.04em;
  color:var(--text); line-height:1.1; margin-bottom:10px;
}

/* ── Sub ── */
.form-sub {
  font-size:.8rem; color:var(--text-2); line-height:1.7; margin-bottom:32px;
}

/* ── Error ── */
.error-msg {
  display:none; margin-bottom:16px; padding:12px 16px;
  background:#fef2f2; border:1px solid #fecaca;
  border-radius:10px; font-size:.76rem; font-weight:600;
  color:#dc2626; text-align:center; line-height:1.5;
}
.error-msg.show { display:block; animation:shake .45s ease-out; }
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%,60% { transform:translateX(-6px); }
  40%,80% { transform:translateX(6px); }
}

/* ── Microsoft button ── */
.btn-ms {
  width:100%; padding:14px 20px; border-radius:10px;
  border:1.5px solid rgba(0,0,0,.1); background:var(--white);
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-size:.82rem; font-weight:600; color:var(--text); text-decoration:none;
  cursor:pointer; position:relative; overflow:hidden;
  transition:border-color .25s, box-shadow .25s, transform .2s var(--ease);
}
.btn-ms::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(0,164,239,.07) 50%, transparent 70%);
  transform:translateX(-110%); transition:transform .55s var(--ease);
}
.btn-ms:hover::before { transform:translateX(120%); }
.btn-ms:hover {
  border-color:#00a4ef;
  box-shadow:0 4px 24px rgba(0,164,239,.15);
  transform:translateY(-2px);
}
.btn-ms:active { transform:translateY(0) scale(.985); }

.ms-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  width:18px; height:18px; flex-shrink:0;
}
.ms-grid span { display:block; width:8px; height:8px; border-radius:1px; }

/* ── Divider ── */
.form-divider {
  display:flex; align-items:center; gap:12px; margin:22px 0;
}
.form-divider span:first-child,
.form-divider span:last-child { flex:1; height:1px; background:rgba(0,0,0,.08); }
.form-divider span:nth-child(2) {
  font-size:.7rem; color:var(--text-3); white-space:nowrap;
}

/* ── Portal button ── */
.btn-portal {
  width:100%; padding:14px 20px; border-radius:10px;
  border:none; background:var(--dark-2); color:#fff;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:.82rem; font-weight:600; text-decoration:none; cursor:pointer;
  position:relative; overflow:hidden;
  transition:background .25s, box-shadow .25s, transform .2s var(--ease);
}
.btn-portal::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(212,225,87,.1) 50%, transparent 70%);
  transform:translateX(-110%); transition:transform .55s var(--ease);
}
.btn-portal:hover::before { transform:translateX(120%); }
.btn-portal:hover {
  background:var(--dark-3);
  box-shadow:0 4px 24px rgba(0,0,0,.3);
  transform:translateY(-2px);
}
.btn-portal:active { transform:translateY(0) scale(.985); }
.btn-portal svg { stroke:#fff; flex-shrink:0; }

/* ── Info card ── */
.form-info {
  display:flex; gap:10px; align-items:flex-start; margin-top:24px;
  padding:14px 16px;
  background:rgba(212,225,87,.1); border:1px solid rgba(212,225,87,.22);
  border-radius:10px;
}
.form-info svg { stroke:var(--text); flex-shrink:0; margin-top:1px; }
.form-info p { font-size:.72rem; color:var(--text); line-height:1.65; }
.form-info strong { font-weight:700; }

/* ── Footer ── */
.form-footer {
  margin-top:28px; text-align:center; font-size:.67rem; color:var(--text-3);
}
.form-footer a { color:var(--text); font-weight:600; text-decoration:none; transition:color .2s; }
.form-footer a:hover { color:var(--accent); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:960px) {
  .card { max-width:100%; }
  .card-right { padding:40px 36px; }
}

@media (max-width:760px) {
  html, body { overflow:auto; height:auto; }
  .page { height:auto; min-height:100vh; overflow:auto; padding:0; align-items:flex-start; }
  .card { flex-direction:column; border-radius:0; max-width:100%; min-height:100vh; box-shadow:none; }
  .card-left { min-height:240px; flex:none; padding:28px 24px; }
  .card-left::after { width:200px; height:200px; top:-60px; right:-60px; }
  .pipeline { padding:12px 0; }
  .pipe-conn { height:14px; }
  .pipe-label { font-size:.7rem; }
  .card-right { flex:1; padding:36px 24px 52px; }
  .card-right::before, .card-right::after { display:none; }
  .form-wrap { max-width:100%; }
  .form-heading { font-size:2.2rem; }
  .form-logo { margin-bottom:32px; }
}

@media (max-width:480px) {
  .card-left { min-height:200px; padding:24px 20px; }
  .pipe-title { display:none; }
  .pipeline { flex-direction:row; flex-wrap:wrap; gap:0; justify-content:space-around; }
  .pipe-item { flex-direction:column; align-items:center; gap:6px; flex:1; min-width:60px; }
  .pipe-label { font-size:.55rem; text-align:center; }
  .pipe-conn { display:none; }
  .card-right { padding:28px 20px 44px; }
  .form-heading { font-size:2rem; }
  .form-sub { font-size:.77rem; margin-bottom:24px; }
  .btn-ms, .btn-portal { padding:12px 18px; font-size:.79rem; }
}

/* ── Utility ── */
@keyframes spin { to { transform:rotate(360deg); } }
::selection { background:rgba(212,225,87,.3); color:var(--text); }
.btn-ms:focus-visible, .btn-portal:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}