/* ----------------------------------------------------------------------------
   auth.css — The signed-out surfaces: the sign-in card and the vault unlock /
   migrate card, plus the breathing light behind the logo.
   Slice 5 of 16 (see css/tokens.css for the full load order).
   ------------------------------------------------------------------------- */
/* ------------------------------------------------------------ auth / unlock cards */
.login-page {
  display: grid;
  place-items: center;
  height: 100dvh;
  position: relative;
  z-index: 1;
  padding: 20px;
}

.login-card {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px;
  box-shadow: var(--shadow);
}

.login-card h1 {
  margin-bottom: 4px;
}

.login-card .stack {
  margin-top: 20px;
}

.login-logo-container {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.login-logo {
  position: relative;
  z-index: 1;
  /* above the breathing glow behind it */
  height: 52px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(225, 0, 118, 0.35));
  /* The logo itself is held STILL. It used to bob (an infinite CSS animation,
     later a JS-driven translate), but a hard-edged mark stepping through whole
     pixels reads as stutter — badly so under Safari's loose frame pacing. The
     motion now lives in .login-logo-glow behind it instead: a soft gradient
     breathing via transform:scale, where the same quantisation is invisible. */
}

/* The breathing light behind the logo. js/ambient.js pulses it with the same
   breathe value that drives the background glow, animating ONLY transform:scale
   — the one property the compositor animates without repainting. No opacity or
   filter animation (both re-rasterise the layer every frame); the soft radial
   edge means the coarse scale steps never show. */
.login-logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 170px;
  height: 95px;
  /* JS appends scale(...) to this base transform every frame */
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
      rgba(225, 0, 118, 0.22) 0%, rgba(225, 0, 118, 0) 70%);
  pointer-events: none;
  will-change: transform;
}

.brand-lg {
  font-weight: 750;
  font-size: 30px;
  letter-spacing: -0.02em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}

.warn-box {
  font-size: 13px;
  color: var(--warn-text);
  background: var(--warn-bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}