/* Name input: [ name ].reror.net on a 6px glass panel with one soft halo behind it, the owner's
   choice of the two treatments (DECISIONS 154). The glass covers the typing area, so the halo
   only shows around its edge and never under the text. It brightens and widens a little on focus,
   with opacity and transform only, so the compositor runs it (DECISIONS 84). */

.name-field {
  width: 100%;
  max-width: 720px;
}

.name-field__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 128px;
  overflow: clip;
  contain: paint;
  animation: enter var(--d-enter) var(--ease-enter) backwards;
}

.name-field__halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, var(--accent) 0%, var(--accent) 45%, transparent 100%);
  opacity: var(--halo-opacity);
  pointer-events: none;
  transition: opacity var(--d-enter) var(--ease-state), transform 1.2s var(--ease-enter);
}

.name-field__glass {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: var(--field-glass);
  height: 76px;
  padding: 0 var(--s-6);
  border-radius: var(--r-panel);
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  cursor: text;
  transition:
    transform .4s cubic-bezier(.165, .84, .44, 1),
    background-color .4s var(--ease-state),
    box-shadow .4s var(--ease-state);
}

.name-field__input {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-24);
  font-weight: 500;
  letter-spacing: .01em;
  text-align: right;
}

.name-field__input::placeholder {
  color: var(--text-2);
  font-weight: 400;
  opacity: 1;
}

.name-field__suffix {
  flex: none;
  margin-left: calc(-1 * var(--s-3));
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  color: var(--text-2);
}

.name-field__line {
  position: absolute;
  left: 30%;
  bottom: 0;
  width: 40%;
  height: 2px;
  background: var(--text);
  transform: scaleX(0);
  transition: transform .4s var(--ease-enter), background-color var(--d-hover) var(--ease-state);
}

/* Centred under the glass and pulled up into the stage's lower margin, so it reads with the
   field rather than the page edge (DECISIONS 162). */
.name-field__msg {
  min-height: 1.55em;
  margin-top: calc(-1 * var(--s-4));
  padding: 0 var(--field-inset);
  font-size: var(--fs-14);
  color: var(--text-2);
  text-align: center;
  text-wrap: balance;
}

/* Hover and focus. Focus keeps a real ring on the glass, not only the halo. */
.name-field__stage:hover .name-field__glass,
.name-field.is-hover .name-field__glass {
  box-shadow: inset 0 0 0 1px var(--glass-line-focus);
}

.name-field__stage:focus-within .name-field__glass,
.name-field.is-focus-within .name-field__glass {
  transform: translateY(-4px);
  background: var(--glass-focus);
  box-shadow: inset 0 0 0 1px var(--glass-line-focus);
}

.name-field.is-focus {
  outline: none;
}

.name-field__glass:has(.name-field__input:focus-visible),
.name-field.is-focus .name-field__glass {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.name-field__stage:focus-within .name-field__line,
.name-field.is-focus-within .name-field__line {
  transform: scaleX(1);
}

.name-field__stage:focus-within .name-field__halo,
.name-field.is-focus-within .name-field__halo {
  opacity: var(--halo-opacity-focus);
  transform: scaleX(1.04);
}

/* Phones: a little smaller, still larger than a normal input. */
@media (max-width: 480px) {
  .name-field__stage {
    height: 108px;
  }

  .name-field__glass {
    height: 64px;
    padding: 0 var(--s-4);
  }

  .name-field__input {
    font-size: var(--fs-20);
  }

  .name-field__suffix {
    font-size: var(--fs-17);
  }
}

/* Press: the glass settles a little while the pointer is down. */
.name-field__stage:active .name-field__glass,
.name-field.is-press .name-field__glass {
  transform: translateY(-2px) scale(.995);
}

/* Availability. */
.name-field[data-state="ok"] .name-field__line { background: var(--ok); transform: scaleX(1); }
.name-field[data-state="bad"] .name-field__line { background: var(--bad); transform: scaleX(1); }
.name-field[data-state="ok"] .status-dot { background: var(--ok); }
.name-field[data-state="bad"] .status-dot { background: var(--bad); }
.name-field[data-state="ok"] .name-field__msg { color: var(--ok); }
.name-field[data-state="bad"] .name-field__msg { color: var(--bad); }

.name-field .loader {
  display: none;
}

.name-field[data-state="checking"] .loader {
  display: inline-block;
}

.name-field[data-state="checking"] .status-dot {
  display: none;
}

.name-field.is-disabled .name-field__stage {
  opacity: .55;
}

.name-field.is-disabled .name-field__input {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .name-field__stage {
    animation-name: fade-in;
  }

  .name-field__stage:focus-within .name-field__halo,
  .name-field.is-focus-within .name-field__halo {
    transform: none;
  }

  .name-field__stage .name-field__glass,
  .name-field__stage:focus-within .name-field__glass,
  .name-field__stage:active .name-field__glass,
  .name-field.is-focus-within .name-field__glass,
  .name-field.is-press .name-field__glass {
    transform: none;
  }

  .name-field__line {
    transform: none;
    opacity: 0;
    transition: opacity var(--d-hover) var(--ease-state), background-color var(--d-hover) var(--ease-state);
  }

  .name-field__stage:focus-within .name-field__line,
  .name-field.is-focus-within .name-field__line,
  .name-field[data-state="ok"] .name-field__line,
  .name-field[data-state="bad"] .name-field__line {
    transform: none;
    opacity: 1;
  }
}