:root {
  color-scheme: dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #03070a;
}

.scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 66%, rgb(106 128 141 / 18%) 0, transparent 48%),
    linear-gradient(#080e12 0, #050a0e 64%, #020507 100%);
}

.photo {
  position: absolute;
  z-index: -1;
  top: 38%;
  right: 0;
  bottom: -38%;
  left: 0;
  background-image: linear-gradient(rgb(3 7 10 / 48%), rgb(1 4 6 / 58%)), url("/background.jpg");
  background-position: right top;
  background-size: cover;
  clip-path: inset(31% 0 0);
}

.disc {
  position: absolute;
  z-index: -2;
  top: 7.5%;
  left: 50%;
  width: min(76vh, 42vw);
  min-width: 520px;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #0b1218 0, #070c11 68%, #03070a 100%);
  box-shadow: 0 80px 130px rgb(1 4 7 / 68%);
}

.disc::after {
  position: absolute;
  inset: -1px;
  border: 1px solid rgb(202 220 229 / 55%);
  border-radius: inherit;
  box-shadow: 0 -5px 18px rgb(174 204 220 / 28%);
  clip-path: inset(0 0 48%);
  content: "";
}

.atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
}

.login {
  position: absolute;
  z-index: 1;
  top: 45%;
  left: 50%;
  width: min(470px, calc(100vw - 40px));
  height: 70px;
  translate: -50% -50%;
}

.field,
input {
  display: block;
  width: 100%;
  height: 100%;
}

.field {
  position: relative;
}

input {
  border: 1px solid rgb(205 219 226 / 70%);
  border-radius: 999px;
  outline: none;
  background: rgb(8 14 18 / 12%);
  box-shadow:
    0 0 16px rgb(190 215 226 / 13%),
    inset 0 0 18px rgb(166 191 204 / 4%);
  color: rgb(220 228 232 / 82%);
  caret-color: transparent;
  font-family: inherit;
  font-size: 25px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.01em;
  padding: 0 32px;
}

input::placeholder {
  color: rgb(185 195 201 / 48%);
  opacity: 1;
}

input.message {
  font-size: 13px;
  letter-spacing: 0;
}

.field:has(input:placeholder-shown)::after {
  position: absolute;
  top: 20px;
  left: 96px;
  width: 1px;
  height: 30px;
  background: rgb(205 217 222 / 62%);
  content: "";
  animation: caret 1.05s steps(1, end) infinite;
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

@media (max-width: 680px) {
  .disc {
    width: 82vh;
    min-width: 640px;
  }

  .login {
    top: 44%;
    height: 64px;
  }

  input {
    padding: 0 26px;
    font-size: 22px;
  }

  input.message {
    font-size: clamp(7px, 2.2vw, 13px);
  }

  .field:has(input:placeholder-shown)::after {
    top: 18px;
    left: 78px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .field:has(input:placeholder-shown)::after {
    animation: none;
  }
}