/* ============================================================
   ARGUS — LOGIN  ·  Concept C: light from the edge
   Quiet near-black void; gradient glow breathing from bottom.
   Restraint over decoration. Lots of empty space.
   ============================================================ */

body{overflow:hidden}
.stage{display:grid;grid-template-columns:1.05fr .95fr;height:100vh;width:100vw}

/* ===================== LEFT : THE VOID ===================== */
.hero{position:relative;overflow:hidden;background:var(--ink);
  display:flex;align-items:flex-end;justify-content:center}

/* the single gesture: gradient glow bleeding up from the bottom edge, breathing slowly */
.glow{position:absolute;left:50%;bottom:-14%;transform:translateX(-50%);
  width:130%;height:86%;pointer-events:none;z-index:2;
  background:
    radial-gradient(58% 100% at 50% 100%, color-mix(in srgb,var(--pink) 58%,transparent) 0%, transparent 60%),
    radial-gradient(48% 88% at 40% 100%, color-mix(in srgb,var(--violet) 54%,transparent) 0%, transparent 58%);
  filter:blur(34px);
  animation:breathe 12s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.85;transform:translateX(-50%) translateY(0) scale(1)}
  50%{opacity:1;transform:translateX(-50%) translateY(-3%) scale(1.05)}}

/* a second, slower drift layer for liquid life */
.glow.slow{height:70%;width:100%;filter:blur(58px);opacity:.6;z-index:2;
  background:radial-gradient(52% 100% at 56% 100%, color-mix(in srgb,var(--violet) 50%,transparent), transparent 58%);
  animation:drift 18s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateX(-54%) translateY(0)}50%{transform:translateX(-46%) translateY(-5%)}}

/* THE EYE — original round eyeball video, screen-blended into the glow, larger + deliberate */
.eye-stage{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);z-index:3;
  width:min(56%,520px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity 1.6s ease}
.eye-stage.ready{opacity:.8}
.eye{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 56%, transparent 72%);
          mask-image:radial-gradient(circle at 50% 50%, #000 56%, transparent 72%)}

/* a hairline thread of pure gradient — brand signal, used once */
.thread{position:absolute;left:14%;right:14%;bottom:64px;height:1px;z-index:4;
  background:var(--grad);opacity:.5}

/* the gradient scramble title — sized for a fuller sentence, 2 lines, no clipping */
.hero-title{position:absolute;left:48px;top:24%;z-index:5;width:min(80%,640px);font-family:var(--display);
  font-weight:500;font-size:clamp(34px,3.6vw,60px);line-height:1.14;letter-spacing:-.03em;padding-bottom:.12em}
.hero-title .ln{display:block;white-space:nowrap;color:var(--fg)}
.hero-title .gt{display:block;white-space:nowrap;padding-bottom:.08em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* brand layer — minimal */
.brandmark{position:absolute;top:38px;left:48px;display:flex;align-items:center;z-index:6}
.brandmark img{height:24px;width:auto;display:block}

.sysline{position:absolute;top:42px;right:48px;display:flex;align-items:center;gap:9px;z-index:6;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.sysline .d{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}

/* one quiet line of brand voice, bottom-left, small */
.whisper{position:absolute;left:48px;bottom:48px;z-index:6;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.whisper em{font-style:normal;color:var(--mute)}

/* ===================== RIGHT : THE FORM ===================== */
.panel{position:relative;background:var(--ink);border-left:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;padding:40px 64px}

.theme{position:absolute;top:46px;left:64px;display:inline-flex;align-items:center;gap:8px;z-index:7;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  cursor:pointer;user-select:none;background:none;border:none}
.theme .sw{width:36px;height:19px;border-radius:100px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);position:relative;transition:background .3s}
.theme .sw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:var(--fg);transition:transform .3s,background .3s}
.theme.light .sw::after{transform:translateX(17px);background:var(--pink)}

.toggle{position:absolute;top:42px;right:64px;display:flex;align-items:center;gap:14px;z-index:7;
  font-family:var(--mono);font-size:11px;color:var(--dim)}
.toggle a{color:var(--fg);text-decoration:none;transition:color .25s}
.toggle a:hover{color:var(--pink)}

.form{width:100%;max-width:360px}
.form .eyebrow{margin-bottom:22px}
.form h1{font-family:var(--display);font-weight:500;font-size:clamp(36px,3.6vw,50px);line-height:1.02;letter-spacing:-.03em;margin-bottom:14px}
.form h1 em{font-style:italic;color:var(--pink)}
.form .sub{color:var(--mute);font-weight:300;font-size:14.5px;line-height:1.6;margin-bottom:36px;max-width:32ch}

.sso{width:100%}
.sso svg{width:18px;height:18px;flex:0 0 auto}

.divider{display:flex;align-items:center;gap:14px;margin:26px 0;color:var(--dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}

.form .field{margin-bottom:18px}
.field .forgot{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--dim);text-decoration:none;transition:color .25s}
.field .forgot:hover{color:var(--pink)}
.ip .peek{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--dim);cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;transition:color .2s}
.ip .peek:hover{color:var(--fg)}

.form .btn{margin-top:14px}

.foot{margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.foot .admin{font-size:13px;color:var(--dim)}
.foot .admin a{color:var(--fg);text-decoration:none}
.foot .admin a .ar{color:var(--pink)}
.foot .admin a:hover{color:var(--pink)}
.clock{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim)}

/* ============ LIGHT THEME (form side previews the app default) ============ */
body.light{background:var(--lt-bg);color:var(--lt-fg)}
body.light .panel{background:var(--lt-bg);border-left:1px solid var(--lt-line)}
body.light .form h1{color:var(--lt-fg)}
body.light .form .sub{color:var(--lt-mute)}
body.light .eyebrow{color:var(--lt-dim)}
body.light .btn-ghost{color:var(--lt-fg);background:#fff;border-color:var(--lt-line)}
body.light .btn-ghost:hover{background:#faf7f2;border-color:rgba(20,18,27,.2)}
body.light .divider{color:var(--lt-dim)}
body.light .divider::before,body.light .divider::after{background:var(--lt-line)}
body.light .field label,body.light .field .forgot{color:var(--lt-dim)}
body.light .ip input{color:var(--lt-fg);background:#fff;border-color:var(--lt-line)}
body.light .ip input::placeholder{color:#a8a39d}
body.light .ip .peek{color:var(--lt-dim)}
body.light .toggle{color:var(--lt-dim)}
body.light .toggle a{color:var(--lt-fg)}
body.light .theme{color:var(--lt-dim)}
body.light .theme .sw{border-color:var(--lt-line);background:rgba(0,0,0,.04)}
body.light .foot .admin{color:var(--lt-dim)}
body.light .foot .admin a{color:var(--lt-fg)}
body.light .clock{color:var(--lt-dim)}
/* hero stays dark in both themes */

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .stage{grid-template-columns:1fr}
  .hero{display:none}
  .panel{border-left:none;padding:40px 28px}
}