/* Sign-in and the boot sequence. Before sign-in there is no data, so the seal is all there is. */

.login-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: radial-gradient(110% 80% at 50% 38%, var(--glow) 0%, var(--deep) 46%, var(--void) 100%);
}
/* When the session ends under a running app the layer is a modal <dialog>, in front of everything. */
dialog.login-layer {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
}
dialog.login-layer::backdrop {
  background: none;
}
/* Through the seal: the layer clears while the seal comes toward the viewer, and the overview
   arrives from behind it. */
.login-layer.is-through {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-in);
}
.login-layer.is-through .login-stage {
  transform: scale(2.4);
  transition: transform 340ms var(--ease-in);
}
.login {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  height: 100%;
  padding: var(--s5) var(--gutter);
  overflow: hidden;
}
.login-stage {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  width: var(--ring);
  height: var(--ring);
}
.login-ring {
  position: absolute;
  inset: 0;
}
/* A second, fainter ring further away. The two slide against each other as the pointer moves. */
.login-ring.is-far {
  inset: 8.5%;
  border: var(--hair) solid var(--line);
  border-radius: 50%;
}
.login-form {
  position: relative;
  display: grid;
  gap: var(--s2);
  width: min(280px, calc(var(--ring) - 96px));
}
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-bottom: var(--s5);
}
.login-label {
  color: var(--ink-2);
}
.login-field input {
  height: 44px;
  font: 400 var(--t-read) / 1 var(--f-mono);
  letter-spacing: 0.12em;
}
.login-msg {
  min-height: 18px;
  font-size: var(--t-small);
  color: var(--gold);
}
.login-submit {
  width: 100%;
  min-height: 44px;
}
.login-foot {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  font-size: var(--t-mini);
  color: var(--ink-3);
  text-align: center;
}
.login-foot .mono {
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- boot */
.boot-steps {
  position: absolute;
  display: grid;
  gap: var(--s3);
  width: min(260px, calc(var(--ring) - 110px));
}
.boot-step {
  display: grid;
  grid-template-columns: auto minmax(12px, 1fr) auto;
  align-items: center;
  gap: var(--s2);
  animation: boot-step 200ms var(--ease-out);
}
.boot-name {
  font: 500 var(--t-micro) / 1 var(--f-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.boot-rule {
  height: 1px;
  background: var(--line-2);
}
.boot-value {
  font: 400 var(--t-small) / 1 var(--f-mono);
  color: var(--ink);
}
@keyframes boot-step {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}
/* The seal lights one segment after another: opacity only, each a little later than the last. */
.login .seg {
  stroke: var(--cyan);
  stroke-opacity: 1;
  stroke-width: 2;
  opacity: 0.5;
  transition: opacity 90ms linear;
  transition-delay: calc(var(--i) * 12ms);
}
.login.is-booting .seg {
  opacity: 1;
}
.login.is-booting .login-form {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 140ms var(--ease-in), transform 140ms var(--ease-in);
  pointer-events: none;
}
.login.is-booting .login-foot {
  opacity: 0;
  transition: opacity 140ms;
}

.login-brand .brand-name,
.login-brand .brand-sub {
  display: inline;
}
@media (max-width: 760px) {
  .login-brand {
    margin-bottom: var(--s4);
  }
}