/* ==========================================================================
   SAVANTI — Secure Access · cinematic login
   Liquid Glass Spec v2 language: precision glass, crisp hairlines, no bubbles.
   Stages (body class): stage-intro → stage-brand → stage-form → stage-processing
   The Jinja error re-render (body.has-error) fast-paths straight to the form.
   ========================================================================== */

:root {
  --ink: 8 71 247;        /* Electric Blue */
  --royal: 0 51 255;
  --sky: 91 138 255;
  --ice: 184 208 255;
  --good: 55 226 168;
  --bad: 255 107 122;
  --txt: 233 237 255;
  --mut: 154 166 204;
  --mut2: 110 120 158;
  --ground-a: #05060B;
  --ground-b: #07090F;
  --hair: rgba(184, 208, 255, 0.13);
  --hair2: rgba(184, 208, 255, 0.22);
  --glass-a: rgba(255, 255, 255, 0.045);
  --glass-b: rgba(255, 255, 255, 0.015);
  --panelsolid: #0A0E1A;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* registered so the chroma ring angle animates smoothly */
@property --ring {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }
body {
  font-family: var(--sans);
  color: rgb(var(--txt));
  background: linear-gradient(180deg, var(--ground-a), var(--ground-b));
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.1px;
}

/* --------------------------------------------------------------------------
   Ambient scene — fine grid + one diagonal beam aligned with the mark's slashes
   -------------------------------------------------------------------------- */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
/* breathing aurora behind everything */
.scene .aurora {
  position: absolute; inset: -25%;
  background:
    radial-gradient(46% 38% at 28% 68%, rgb(var(--deep, 10 38 128) / 0.35), transparent 70%),
    radial-gradient(40% 34% at 74% 26%, rgb(var(--ink) / 0.22), transparent 70%);
  filter: blur(46px);
  animation: aurora-breathe 18s ease-in-out infinite alternate;
}
@keyframes aurora-breathe {
  from { transform: translate3d(-3%, 2%, 0) scale(1); opacity: 0.7; }
  to   { transform: translate3d(4%, -3%, 0) scale(1.14); opacity: 1; }
}
.scene .beam {
  position: absolute; top: -35%; left: 58%; width: 38%; height: 170%;
  transform: rotate(28deg);
  background: linear-gradient(90deg, transparent,
    rgb(var(--ink) / 0.07) 45%, rgb(var(--sky) / 0.1) 50%, rgb(var(--ink) / 0.07) 55%,
    transparent);
  filter: blur(26px);
  animation: beam-drift 22s ease-in-out infinite alternate;
}
.scene .beam.b2 {
  left: -6%; width: 26%; opacity: 0.55;
  animation: beam-drift2 30s ease-in-out infinite alternate;
}
@keyframes beam-drift  { to { transform: rotate(28deg) translateX(-10%); opacity: 0.75; } }
@keyframes beam-drift2 { from { transform: rotate(28deg) translateX(0); } to { transform: rotate(28deg) translateX(14%); } }
.scene .topline {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--ink) / 0.7), transparent);
  background-size: 200% 100%;
  animation: topline-scan 9s ease-in-out infinite;
}
@keyframes topline-scan {
  0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; }
}

/* --------------------------------------------------------------------------
   Connected-globe horizon — draws in on stage-brand, lives quietly after
   -------------------------------------------------------------------------- */
.globe {
  position: fixed; left: 0; right: 0; bottom: 0; height: 34vh; z-index: 1;
  pointer-events: none; opacity: 0; transition: opacity 0.8s var(--ease);
}
.globe svg { width: 100%; height: 100%; }
.globe .arc {
  fill: none; stroke: rgb(var(--sky) / 0.22); stroke-width: 1;
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
}
.globe .arc.a2 { stroke: rgb(var(--sky) / 0.16); }
.globe .arc.a3 { stroke: rgb(var(--sky) / 0.12); }
.globe .arc.m1, .globe .arc.m2 { stroke: rgb(var(--sky) / 0.14); }
.globe .lk {
  fill: none; stroke: url(#glowline); stroke-width: 1;
  stroke-dasharray: 1600; stroke-dashoffset: 1600; opacity: 0.8;
}
.globe .nodes circle {
  fill: rgb(var(--sky)); opacity: 0;
  filter: drop-shadow(0 0 5px rgb(var(--ink) / 0.9));
}
.globe .pkt { fill: #fff; opacity: 0; filter: drop-shadow(0 0 6px rgb(var(--sky))); }

/* activate on brand stage and keep alive through form/processing/error */
.stage-brand .globe, .stage-form .globe, .stage-processing .globe, .has-error .globe { opacity: 1; }
.stage-brand .globe .arc, .stage-form .globe .arc, .stage-processing .globe .arc, .has-error .globe .arc {
  animation: draw-arc 1.6s var(--ease) forwards;
}
.stage-brand .globe .lk, .stage-form .globe .lk, .stage-processing .globe .lk, .has-error .globe .lk {
  animation: draw-arc 1.4s var(--ease) 0.5s forwards;
}
.stage-brand .globe .nodes circle, .stage-form .globe .nodes circle,
.stage-processing .globe .nodes circle, .has-error .globe .nodes circle {
  animation: node-in 0.5s ease forwards, node-pulse 3.4s ease-in-out 1.4s infinite;
}
.globe .nodes circle:nth-child(2n) { animation-delay: 0.7s, 2s !important; }
.globe .nodes circle:nth-child(3n) { animation-delay: 0.9s, 2.6s !important; }
@keyframes draw-arc { to { stroke-dashoffset: 0; } }
@keyframes node-in { from { opacity: 0; } to { opacity: 0.9; } }
@keyframes node-pulse { 50% { opacity: 0.35; } }
/* data packets orbit the main route */
.stage-form .globe .pkt, .stage-processing .globe .pkt, .has-error .globe .pkt {
  opacity: 1;
  offset-path: path("M250,318 L470,232 L720,206 L985,236 L1195,322");
  animation: pkt-run 7s linear infinite;
}
.stage-form .globe .pkt.p2, .stage-processing .globe .pkt.p2, .has-error .globe .pkt.p2 {
  animation-duration: 9s; animation-delay: 2.4s; animation-direction: reverse;
}
@keyframes pkt-run { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* --------------------------------------------------------------------------
   Large ambient mark — back bottom-right, light streaks + chromatic glow
   -------------------------------------------------------------------------- */
.bigmark {
  position: fixed; right: -2vw; bottom: -5vh; z-index: 2;
  height: 60vh; aspect-ratio: 1 / 1; pointer-events: none;
  opacity: 0; transform: translateY(26px) scale(0.97);
  transition: opacity 1.1s var(--ease) 0.55s, transform 1.1s var(--ease) 0.55s;
}
.stage-form .bigmark, .stage-processing .bigmark, .has-error .bigmark {
  opacity: 0.16; transform: none;
}
.bigmark img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  animation: bm-chroma 12s ease-in-out infinite, bm-float 9s ease-in-out infinite;
}
/* chromatic light: cycling electric-blue glow (transparent white mark, so we
   drive the color via drop-shadow rather than hue-rotate) */
@keyframes bm-chroma {
  0%, 100% { filter: drop-shadow(0 0 24px rgb(var(--ink) / 0.30)); }
  50%      { filter: drop-shadow(0 0 46px rgb(var(--sky) / 0.55))
                     drop-shadow(0 0 10px rgb(var(--ice) / 0.4)); }
}
@keyframes bm-float {
  0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); }
}
/* electric light streaks racing along the slashes (masked to the mark) */
.bm-streak {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgb(var(--sky) / 0.9) 50%, transparent 60%);
  background-size: 260% 100%; background-position: 130% 0;
  mask-image: url("/public/savanti-mark-bg.png"); mask-size: contain; mask-repeat: no-repeat; mask-position: center;
  -webkit-mask-image: url("/public/savanti-mark-bg.png"); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  animation: bm-streak-run 6s ease-in-out infinite;
}
.bm-streak.s2 {
  background: linear-gradient(115deg, transparent 42%, rgb(var(--sky) / 0.6) 50%, transparent 58%);
  animation-duration: 6s; animation-delay: 3s;
}
@keyframes bm-streak-run {
  0%, 55%  { background-position: 130% 0; opacity: 0; }
  60%      { opacity: 1; }
  85%, 100%{ background-position: -30% 0; opacity: 0; }
}

/* ==========================================================================
   STAGE 1 — the mark assembles from its diagonal slashes
   Five clip-path bands parallel to the "/" axis; each slides in along it.
   ========================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.intro-mark { position: relative; width: min(240px, 44vw); aspect-ratio: 925 / 1043; }
.intro-mark .slice {
  position: absolute; inset: 0;
  background: url("/public/savanti-mark.png") center / contain no-repeat;
  opacity: 0;
  transform: translate(-46px, 46px);
  animation: slice-in 0.62s var(--ease) forwards;
}
/* bands parallel to the "/" diagonal (x+y = c), slight overlap kills seams */
.slice.s1 { clip-path: polygon(0 0, 42% 0, 0 42%); animation-delay: 0.10s; }
.slice.s2 { clip-path: polygon(38% 0, 72% 0, 0 72%, 0 38%); animation-delay: 0.22s; }
.slice.s3 { clip-path: polygon(68% 0, 100% 0, 100% 6%, 6% 100%, 0 100%, 0 68%); animation-delay: 0.34s; }
.slice.s4 { clip-path: polygon(100% 2%, 100% 42%, 42% 100%, 2% 100%); animation-delay: 0.46s; }
.slice.s5 { clip-path: polygon(100% 38%, 100% 100%, 38% 100%); animation-delay: 0.58s; }
@keyframes slice-in {
  from { opacity: 0; transform: translate(-46px, 46px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translate(0, 0); }
}
/* specular glint sweeps across the assembled mark (masked to its shape) */
.intro-mark .glint {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%);
  background-size: 240% 100%; background-position: 120% 0;
  mask-image: url("/public/savanti-mark.png");
  mask-size: contain; mask-repeat: no-repeat; mask-position: center;
  -webkit-mask-image: url("/public/savanti-mark.png");
  -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  animation: glint-pass 0.7s ease-out 0.95s forwards;
}
@keyframes glint-pass {
  from { opacity: 1; background-position: 130% 0; }
  to   { opacity: 0; background-position: -30% 0; }
}
.intro-mark .halo {
  position: absolute; inset: -18%;
  background: radial-gradient(circle, rgb(var(--ink) / 0.32), transparent 62%);
  filter: blur(14px); opacity: 0; z-index: -1;
  animation: halo-pulse 0.8s var(--ease) 0.85s forwards;
}
@keyframes halo-pulse { 40% { opacity: 1; } to { opacity: 0.45; } }

/* once the brand stage begins, the intro hands off */
.stage-brand .intro, .stage-form .intro, .stage-processing .intro, .has-error .intro {
  opacity: 0; visibility: hidden;
}

/* ==========================================================================
   STAGE 2/3 — brand lockup + glass card
   ========================================================================== */
.login-container {
  position: relative; z-index: 10;
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 32px 20px;
}

.brand { text-align: center; }
/* the living mark: gentle float, breathing glow, periodic glint pass */
.brand-markwrap {
  position: relative; display: inline-block;
  animation: mark-float 6s ease-in-out infinite;
}
@keyframes mark-float {
  0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); }
}
.brand-mark {
  height: 74px; width: auto; display: block;
  filter: drop-shadow(0 8px 26px rgb(var(--ink) / 0.45));
  animation: mark-breathe 6s ease-in-out infinite;
}
@keyframes mark-breathe {
  0%, 100% { filter: drop-shadow(0 8px 26px rgb(var(--ink) / 0.38)); }
  50%      { filter: drop-shadow(0 10px 34px rgb(var(--ink) / 0.62)); }
}
.brand-glint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.8) 50%, transparent 62%);
  background-size: 240% 100%; background-position: 130% 0;
  mask-image: url("/public/savanti-mark.png"); mask-size: contain; mask-repeat: no-repeat; mask-position: center;
  -webkit-mask-image: url("/public/savanti-mark.png"); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  animation: mark-glint 5.5s ease-in-out infinite;
}
@keyframes mark-glint {
  0%, 74%  { background-position: 130% 0; opacity: 0; }
  78%      { opacity: 1; }
  92%, 100%{ background-position: -30% 0; opacity: 0; }
}
.brand-word {
  margin-top: 14px;
  font-weight: 300; font-size: 30px; letter-spacing: 0.42em; text-indent: 0.42em;
  background: linear-gradient(180deg, #ffffff, rgb(var(--ice) / 0.75));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-word b { font-weight: 700; }
.brand-sub {
  margin-top: 7px;
  font: 500 9px/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase;
  color: rgb(var(--mut2));
}

/* brand + card reveal choreography */
.brand, .login-form { opacity: 0; transform: translateY(14px); }
.stage-brand .brand,
.stage-form .brand, .stage-processing .brand, .has-error .brand {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.stage-form .login-form, .stage-processing .login-form, .has-error .login-form {
  opacity: 1; transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
/* the card's children cascade in when the form stage lands */
.login-form > * { opacity: 0; transform: translateY(8px); }
.stage-form .login-form > *, .stage-processing .login-form > *, .has-error .login-form > * {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.stage-form .login-form > *:nth-child(1) { transition-delay: 0.05s; }
.stage-form .login-form > *:nth-child(2) { transition-delay: 0.12s; }
.stage-form .login-form > *:nth-child(3) { transition-delay: 0.19s; }
.stage-form .login-form > *:nth-child(4) { transition-delay: 0.26s; }
.stage-form .login-form > *:nth-child(5) { transition-delay: 0.33s; }
.stage-form .login-form > *:nth-child(6) { transition-delay: 0.40s; }

/* ---------- the glass card (Spec v2 recipe) ---------- */
.login-form {
  position: relative; isolation: isolate;
  width: min(380px, 92vw);
  padding: 26px 26px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
  border: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -8px 14px -12px rgba(255, 255, 255, 0.22),
    inset 6px 0 14px -12px rgba(0, 0, 0, 0.4),
    inset -6px 0 14px -12px rgba(0, 0, 0, 0.4);
}
/* chroma ring — a blue→white glint orbiting the card's edge */
.login-form::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; padding: 1px;
  background: conic-gradient(
    from var(--ring),
    transparent 0deg,
    rgb(var(--ink) / 0.55) 40deg,
    rgb(var(--sky) / 0.9) 70deg,
    rgba(255, 255, 255, 0.95) 90deg,
    rgb(var(--sky) / 0.9) 110deg,
    rgb(var(--ink) / 0.55) 140deg,
    transparent 200deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: ring-orbit 8s linear infinite;
}
@keyframes ring-orbit { to { --ring: 360deg; } }

/* pointer-tracked specular */
.login-form::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: radial-gradient(170px 120px at var(--mx, 80%) var(--my, -30%),
    rgba(255, 255, 255, 0.09), transparent 72%);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.login-form:hover::after { opacity: 1; }

.form-kicker {
  display: flex; align-items: center; gap: 10px;
  font: 600 9px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: rgb(var(--sky)); margin-bottom: 18px;
}
.form-kicker span { width: 22px; height: 1px; background: rgb(var(--ink)); }

/* ---------- floating-label inputs ---------- */
.input-group { position: relative; margin-bottom: 16px; }
.input-group input {
  width: 100%;
  font: 500 13.5px/1.2 var(--sans); color: rgb(var(--txt));
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hair); border-radius: 9px;
  padding: 14px 12px 0;
  height: 46px;
  outline: none; caret-color: rgb(var(--sky));
  transition: border-color 0.2s, background 0.2s, box-shadow 0.25s;
}
.input-group label {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font: 500 12.5px/1 var(--sans); color: rgb(var(--mut2));
  pointer-events: none;
  transition: all 0.22s var(--ease);
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
  top: 9px; transform: none;
  font: 600 8px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgb(var(--sky));
}
.input-group input:focus {
  border-color: rgb(var(--ink));
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 0 0 3px rgb(var(--ink) / 0.16), 0 0 18px rgb(var(--ink) / 0.18);
}
/* charge line under the field while focused */
.input-group .focusline {
  position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--sky)), transparent);
  transform: scaleX(0); transition: transform 0.35s var(--ease);
}
.input-group input:focus ~ .focusline { transform: scaleX(1); }
.input-group.filled input { border-color: var(--hair2); }

/* ---------- the button ---------- */
button[type="submit"] {
  width: 100%; height: 46px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; cursor: pointer;
  border: 1px solid rgb(var(--sky) / 0.55); border-radius: 9px;
  background: linear-gradient(180deg, rgb(var(--ink)), rgb(var(--royal) / 0.9));
  box-shadow: 0 8px 22px rgb(var(--ink) / 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  position: relative; overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.25s ease, filter 0.2s;
  margin-top: 4px;
}
button[type="submit"]:hover { filter: brightness(1.07); box-shadow: 0 10px 28px rgb(var(--ink) / 0.5), inset 0 1px 0 rgba(255,255,255,0.32); }
button[type="submit"]:active { transform: scale(0.98); }
button[type="submit"]::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.33) 50%, transparent 65%);
}
button[type="submit"]:hover::after { transform: translateX(130%); transition: transform 0.7s ease; }
.btn-arrow { font-family: var(--sans); font-size: 14px; transition: transform 0.2s var(--ease); }
button[type="submit"]:hover .btn-arrow { transform: translateX(4px); }

/* ---------- error + footer ---------- */
.error {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 10px 12px;
  font: 500 11px/1.4 var(--mono);
  color: rgb(var(--bad));
  border: 1px solid rgb(var(--bad) / 0.45); border-radius: 9px;
  background: linear-gradient(180deg, rgb(var(--bad) / 0.1), transparent);
}
.err-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: 0 0 auto; }
.has-error .login-form { animation: nudge 0.5s var(--ease) 0.35s; }
.nudge { animation: nudge 0.4s var(--ease); }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); }
}

.form-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--hair);
  font: 500 9.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: rgb(var(--mut));
}
.form-foot > span { white-space: nowrap; }
.foot-live { display: inline-flex; align-items: center; gap: 6px; }
.livedot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgb(var(--good)); color: rgb(var(--good));
  box-shadow: 0 0 8px currentColor;
  animation: live-pulse 2.2s ease-in-out infinite;
}
@keyframes live-pulse { 50% { opacity: 0.45; box-shadow: 0 0 3px currentColor; } }
/* connection NOT secure: red state + urgent pulse */
.form-foot.unsecure .foot-live { color: rgb(var(--bad)); font-weight: 700; }
.form-foot.unsecure .livedot {
  background: rgb(var(--bad)); color: rgb(var(--bad));
  animation-duration: 0.9s;
}

.proc-card.ok { border-color: rgb(var(--good) / 0.55); }
.proc-card.ok .proc-status { color: rgb(var(--good)); }
.proc-card.ok .proc-rail i { background: linear-gradient(90deg, rgb(var(--good)), rgb(var(--good))); box-shadow: 0 0 10px rgb(var(--good) / 0.8); }

/* ==========================================================================
   STAGE 4 — processing act between click and server response
   ========================================================================== */
.processing {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: rgb(5 6 11 / 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.stage-processing .processing { opacity: 1; visibility: visible; }
.stage-processing .login-container { filter: blur(2px) brightness(0.75); transition: filter 0.4s ease; }

.proc-card {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 26px; border-radius: 14px;
  background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
  border: 1px solid var(--hair2);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(10px);
  animation: proc-in 0.45s var(--ease) forwards;
}
@keyframes proc-in { to { transform: none; } }
.proc-mark { position: relative; width: 46px; aspect-ratio: 925 / 1043; flex: 0 0 auto; }
.proc-mark img { width: 100%; height: 100%; object-fit: contain; }
.proc-mark .proc-glint {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.9) 50%, transparent 62%);
  background-size: 240% 100%;
  mask-image: url("/public/savanti-mark.png"); mask-size: contain; mask-repeat: no-repeat; mask-position: center;
  -webkit-mask-image: url("/public/savanti-mark.png"); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  animation: proc-sweep 1.1s linear infinite;
}
@keyframes proc-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.proc-lines { min-width: 240px; }
.proc-status { font: 600 11px/1 var(--mono); letter-spacing: 0.18em; color: rgb(var(--ice)); }
.proc-rail { height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.08); margin: 10px 0 8px; overflow: hidden; }
.proc-rail i {
  display: block; height: 100%; width: 5%;
  background: linear-gradient(90deg, rgb(var(--ink)), rgb(var(--sky)));
  box-shadow: 0 0 10px rgb(var(--ink) / 0.8);
  transition: width 0.4s var(--ease);
}
.proc-micro { font: 500 8.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--mut2)); }

/* ==========================================================================
   Accessibility — mandatory fallbacks
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .intro { display: none; }
  .brand, .login-form, .login-form > * { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .login-form, .proc-card, .processing {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--panelsolid);
  }
}
@media (prefers-contrast: more) {
  .login-form, .proc-card {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--panelsolid); border-color: rgb(var(--txt) / 0.6);
  }
}

/* small screens */
@media (max-width: 420px) {
  .brand-mark { height: 58px; }
  .brand-word { font-size: 24px; }
  .login-form { padding: 22px 18px 14px; }
}