/* Login. Deliberately a different world from the console: the app proper is
   a light, clinical instrument, and this is the brutalist poster the brand
   leads with. Tokens are lifted from the Anatomic Labs landing page so the
   two are the same design, not a lookalike. */

.auth {
  --a-bg: #0a0a0a;
  --a-surface: #161616;
  --a-primary: #ff3131;
  --a-text: #f5f3f1;
  --a-muted: #8ca0ac;
  --a-border: #2a2a2a;
  /* The hero's white frame. The unlocked bar borrows the same weight, so the
     two are set from one place. */
  --a-frame-border: 2px;
  --a-font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
}

/* ------------------------------------------------------------------ login */
.auth {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr;
  /* `safe` so a short viewport scrolls from the top instead of clipping the
     poster off the top edge the way plain centring would. */
  align-content: safe center;
  justify-items: center;
  padding: clamp(24px, 5vh, 56px) 24px;
  background: var(--a-bg);
  color: var(--a-text);
  font-family: var(--a-font);
  overflow-y: auto;
}

/* Poster and form share one measure, so the form reads as the next line of
   the composition rather than as a second thing on the page. */
.auth__column { width: min(100%, 560px); }

.auth__poster { display: block; }
.auth__frame { width: 100%; }

/* The poster's exit once the bar has been slid. Delayed so the bar's pop is
   seen before the whole hero starts to go; the form arrives once it has. */
.auth__poster.is-leaving {
  animation: authFade 0.26s ease 0.32s both;
  pointer-events: none;
}
@keyframes authFade {
  to { opacity: 0; transform: translateY(-6px); }
}

.auth__panel {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 10;
  background: var(--a-primary);
  border: var(--a-frame-border) solid #fff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.auth__panel-figure {
  width: auto;
  height: 82%;
  max-width: 82%;
  object-fit: contain;
  display: block;
}
.grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-repeat: repeat;
  pointer-events: none;
}

/* Brand on the left, location flush with the panel's right edge: the caption
   spans the frame, so space-between lines the location up with the hero. */
.auth__caption {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.auth__brand {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.5rem);
}
.auth__location {
  margin: 0;
  line-height: 1.2;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

/* ------------------------------------------------------------ unlock bar */
/* Same width as the hero so it reads as part of the poster, not a widget
   dropped beneath it. Square corners and the poster's border, per the brand. */
.unlock {
  position: relative;
  margin-top: 18px;
  height: 58px;
  /* border-box so the frame thickening on unlock doesn't grow the bar. */
  box-sizing: border-box;
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: border-color 0.18s ease, border-width 0.18s ease;
}
.unlock__fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: var(--a-primary);
  opacity: 0.22;
  pointer-events: none;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.unlock.is-dragging .unlock__fill { transition: none; }

.unlock__handle {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: 58px;
  /* border-box so the added border sits inside the 58px square instead of
     growing it. */
  box-sizing: border-box;
  display: grid;
  place-items: center;
  background: var(--a-primary);
  color: #fff;
  /* Same weight as unlock__arrow's strokeWidth, same color as the arrow
     itself (currentColor -> #fff here), the handle's outline reads as an
     extension of the icon's own line rather than a separate decoration. */
  border: 2.4px solid #fff;
  cursor: grab;
  touch-action: none;
  will-change: transform;
  /* Springs back (or snaps to the end) when released; tracks the finger with
     no lag while it is actually being dragged. */
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  /* A barely-there rightward nudge that repeats every few seconds, not a
     wave or a wobble, just a suggestion of the direction to drag. Idle for
     most of the cycle so it reads as an occasional hint, not motion that
     never stops. It's the handle itself that nudges, the same square that
     tracks the finger while dragging, not just the icon inside it. */
  animation: unlockHint 2.8s ease-in-out infinite;
}
.unlock.is-dragging .unlock__handle { cursor: grabbing; transition: none; }
/* The flight back to the start after letting go short of the end: a real
   overshoot-and-settle rather than the crisp ease the snap-to-end success
   case keeps, so a false start reads as the handle springing home, not
   snapping there. Only this one return gets it, .is-springing is added
   for exactly that flight and dropped the moment it is grabbed again. */
.unlock.is-springing .unlock__handle {
  transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Stopped while actually being dragged or once unlocked, so the hint never
   competes with the finger or fights the inline transform driving position. */
.unlock.is-dragging .unlock__handle,
.unlock.is-unlocked .unlock__handle {
  animation: none;
}
.unlock__handle:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@keyframes unlockHint {
  0%, 70%, 100% { transform: translateX(0); }
  80%           { transform: translateX(2px); }
  90%           { transform: translateX(0); }
}

.unlock__arrow,
.unlock__check {
  grid-area: 1 / 1;
  transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.unlock__check { opacity: 0; transform: scale(0.6); }

/* Reaching the end: the fill goes solid, the arrow flips to a check, the bar
   takes the hero's white frame, and the whole thing gives one short pop, the
   "click" of the lock opening. Solid red in a white frame is the poster's own
   panel in miniature, which is the point. */
.unlock.is-unlocked {
  border: var(--a-frame-border) solid #fff;
  animation: unlockPop 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.unlock.is-unlocked .unlock__fill { opacity: 1; width: 100% !important; }
/* The grain fades up with the pop. Only a `from` is given, so it settles on
   the opacity GrainOverlay sets inline, the hero's, rather than a copy of
   it kept here. Animating the overlay itself, not a wrapper: a wrapper at
   partial opacity would isolate the multiply blend and show raw grey noise. */
.unlock.is-unlocked .grain-overlay { animation: unlockGrainIn 0.3s ease both; }
@keyframes unlockGrainIn {
  from { opacity: 0; }
}
.unlock.is-unlocked .unlock__handle { background: #fff; color: var(--a-primary); }
.unlock.is-unlocked .unlock__arrow { opacity: 0; transform: translateX(6px); }
.unlock.is-unlocked .unlock__check { opacity: 1; transform: scale(1); }
@keyframes unlockPop {
  0%   { transform: scale(1);     box-shadow: 0 0 0 0 rgba(255, 49, 49, 0.55); }
  35%  { transform: scale(1.025); box-shadow: 0 0 0 10px rgba(255, 49, 49, 0); }
  100% { transform: scale(1);     box-shadow: 0 0 0 10px rgba(255, 49, 49, 0); }
}

/* The sign-in page proper. The poster has gone by the time this mounts, so
   the form is the only thing on the page: centred in the column, no panel and
   no hairline, and its entrance is the page turning over. */
.auth__form-side {
  display: flex;
  justify-content: center;
  animation: authRise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes authRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.auth__form {
  width: min(100%, 400px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.auth__form-head { display: flex; flex-direction: column; gap: 6px; }
.auth__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.auth__sub { margin: 0; font-size: 13.5px; color: var(--a-muted); line-height: 1.5; }

.auth__field { display: flex; flex-direction: column; gap: 7px; }
.auth__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a-muted);
}
.auth__input {
  appearance: none;
  width: 100%;
  padding: 12px 14px;
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: 0;
  color: var(--a-text);
  font: 400 15px var(--a-font);
  transition: border-color 0.15s ease;
}
.auth__input:focus { outline: none; border-color: var(--a-primary); }
.auth__input::placeholder { color: #5a5a5a; }

.auth__submit {
  appearance: none;
  border: 0;
  padding: 13px 18px;
  background: var(--a-primary);
  color: #fff;
  font: 600 14px var(--a-font);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.auth__submit:hover { filter: brightness(1.08); }
.auth__submit:disabled { opacity: 0.5; cursor: default; }

.auth__error { margin: 0; font-size: 13px; color: #ff7d6b; line-height: 1.45; }
.auth__notice { margin: 0; font-size: 13px; color: var(--a-muted); line-height: 1.45; }
.auth__switch { margin: 0; font-size: 13px; color: var(--a-muted); }
.auth__link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--a-text);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 860px) {
  .auth { padding: 24px 20px 32px; --a-frame-border: 1.5px; }
  .auth__panel { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .unlock.is-unlocked, .unlock.is-unlocked .grain-overlay, .auth__form-side, .auth__poster.is-leaving { animation: none; }
  .auth__poster.is-leaving { opacity: 0; }
  .unlock__handle, .unlock__fill { transition: none; }
  .unlock__handle { animation: none; }
  /* Higher specificity than the blanket rule above, so it needs its own
     override to actually lose the bouncy return under reduced motion. */
  .unlock.is-springing .unlock__handle { transition: none; }
}