/* Sign-in gate: the whole site root. Logo, two fields, one button. */

.gate {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--s7) var(--gutter);
}

.gate-box {
  width: 100%;
  max-width: 340px;
}

/* ---- logo ---- */
.mark {
  width: 100%;
  height: auto;
  aspect-ratio: 801.45 / 125;
  color: var(--ink);
  margin-bottom: var(--s8);
}
/* Letters wipe in left to right, then the red star settles. */
.mark-word {
  animation: wipe .8s var(--ease) both;
  clip-path: inset(0 0 0 0);
}
.mark-star {
  transform-origin: 779.5px 20.8px;
  animation: settle .45s var(--ease) .62s both;
}
@keyframes wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes settle {
  from { opacity: 0; transform: scale(.2) rotate(-70deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* ---- form ---- */
.gate-form { display: grid; gap: var(--s4); }

.field { display: grid; gap: var(--s2); }
.field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.field input {
  min-height: var(--tap);
  padding: 0 var(--s3);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  background: var(--paper);
  font-size: var(--fs-md);
  width: 100%;
  transition: border-color .15s var(--ease);
}
.field input:hover { border-color: var(--mute); }
.field input:focus { border-color: var(--ink); }

.gate-err {
  min-height: 0;
  margin: calc(var(--s2) * -1) 0 0;
  font-size: var(--fs-sm);
  color: var(--red-ink);
}
.gate-err:empty { display: none; }

.gate-form .btn { width: 100%; margin-top: var(--s2); }

/* The form never waits on the animation. */
@media (prefers-reduced-motion: reduce) {
  .mark-word, .mark-star { animation: none; }
}

/* ---- 404 ---- */
.nf { text-align: left; }
.nf p { color: var(--mute); margin-top: var(--s3); }
.nf .btn { margin-top: var(--s5); }