@font-face {
  font-family: "Phi";
  src: url("phi.ttf") format("truetype");
  font-display: swap;
}

:root {
  --frame: 16.667ms;
  color-scheme: dark;
  font-family: "Phi", Consolas, "Courier New", monospace;
  background: #000;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 280px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

.experience {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  isolation: isolate;
  background: #000;
}

.stage {
  position: relative;
  width: min(100vw, 133.333333vh);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #000;
  contain: layout paint;
  container-type: size;
}

.phase,
.asset {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.phase {
  opacity: 0;
  visibility: hidden;
}

.asset {
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.phase-login {
  z-index: 1;
}

.state-login .phase-login,
.state-connecting .phase-connecting,
.state-complete .phase-zenith {
  opacity: 1;
  visibility: visible;
}

.state-connecting .phase-login {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition: opacity 250ms linear;
}

.state-login .login-shell {
  animation: login-shell-in 550ms linear both;
}

.state-login .login-stroke {
  animation: login-stroke-in 280ms step-end both;
  animation-delay: calc(350ms + var(--delay));
}

.login-caption-frame,
.connecting-caption-frame {
  opacity: 0;
}

.state-login .login-caption-frame:not(.login-caption-final) {
  animation: costume-frame var(--frame) linear forwards;
  animation-delay: calc(483ms + var(--delay));
}

.state-login .login-caption-final {
  animation: login-caption-final-in 220ms step-end forwards;
  animation-delay: calc(483ms + var(--delay));
}

.login-form {
  position: absolute;
  z-index: 3;
  top: 52.372%;
  left: 32.06%;
  width: 35.744%;
  height: 8.044%;
  opacity: 0;
}

.state-login .login-form {
  animation: form-in 180ms linear 700ms forwards;
}

.login-input {
  position: absolute;
  left: 0;
  width: 100%;
  height: 39.52%;
  min-width: 0;
  padding: 0 3.2%;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #222a38;
  caret-color: #3e8994;
  font: 500 clamp(7px, 1.7cqh, 15px) / 1 "Phi", Consolas, monospace;
  letter-spacing: 0;
}

.login-input-username {
  top: 0;
}

.login-input-password {
  bottom: 0;
}

.login-input::placeholder {
  color: #737a84;
  opacity: 0.8;
}

.login-input:focus {
  box-shadow: inset 0 0 0 1px #56b6c3;
}

.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #222a38;
  box-shadow: inset 0 0 0 100px #fff;
  transition: background-color 9999s ease-out;
}

.phase-connecting {
  z-index: 2;
}

.state-connecting .connecting-shell {
  animation: connecting-shell 3.167s linear both;
}

.state-connecting .connecting-stroke {
  animation: connecting-stroke 1.733s linear both;
  animation-delay: calc(400ms + var(--delay));
}

.state-connecting .connecting-caption-frame:not(.connecting-caption-final) {
  animation: costume-frame var(--frame) linear forwards;
  animation-delay: calc(600ms + var(--delay));
}

.state-connecting .connecting-caption-final {
  animation: connecting-caption-final 1.35s linear forwards;
  animation-delay: calc(600ms + var(--delay));
}

.state-connecting .connecting-bar {
  animation: connecting-bar 1.85s linear 667ms both;
}

.state-connecting .connecting-mask {
  animation: connecting-mask 1.2s linear 667ms both;
}

.phase-zenith {
  z-index: 4;
}

.state-complete .zenith-stroke {
  animation: logo-piece 0.35s linear both;
  animation-delay: var(--delay);
}

.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 login-shell-in {
  0% { opacity: 0; transform: scale(0.8); }
  18% { opacity: 0.5; transform: scale(0.881); }
  36% { opacity: 1; transform: scale(0.958); }
  68% { opacity: 1; transform: scale(1.004); }
  69%, 79% { opacity: 0; transform: scale(1.007); }
  80%, 100% { opacity: 1; transform: scale(1.009); }
}

@keyframes login-stroke-in {
  0%, 24% { opacity: 0; }
  25%, 39% { opacity: 1; }
  40%, 54% { opacity: 0; }
  55%, 100% { opacity: 1; }
}

@keyframes costume-frame {
  0%, 99% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes login-caption-final-in {
  0%, 24% { opacity: 0; }
  25%, 49% { opacity: 1; }
  50%, 69% { opacity: 0; }
  70%, 100% { opacity: 1; }
}

@keyframes form-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes connecting-shell {
  0% { opacity: 0; transform: scale(0.8); }
  2.631% { opacity: 0.5; transform: scale(0.881); }
  5.263% { opacity: 1; transform: scale(0.958); }
  9.999% { opacity: 1; transform: scale(1.004); }
  15.262% { opacity: 1; transform: scale(1.009); }
  15.263%, 16.841% { opacity: 0; transform: scale(1.009); }
  16.842%, 79.999% { opacity: 1; transform: scale(1.009); }
  80%, 81.557% { opacity: 0; transform: scale(1.009); }
  81.558%, 82.082% { opacity: 1; transform: scale(1.009); }
  82.083%, 83.661% { opacity: 0; transform: scale(1.009); }
  83.662%, 84.187% { opacity: 1; transform: scale(1.009); }
  84.188%, 85.766% { opacity: 0; transform: scale(1.009); }
  85.767% { opacity: 1; transform: scale(1.009); }
  89.473% { opacity: 0; transform: scale(0.927); }
  100% { opacity: 0; transform: scale(0.9); }
}

@keyframes connecting-stroke {
  0%, 2.885% { opacity: 0; }
  2.886%, 3.847% { opacity: 1; }
  3.848%, 6.733% { opacity: 0; }
  6.734%, 99.99% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes connecting-caption-final {
  0%, 3.703% { opacity: 1; }
  3.704%, 14.814% { opacity: 0; }
  14.815%, 88.888% { opacity: 1; }
  88.889%, 100% { opacity: 0; }
}

@keyframes connecting-bar {
  0% { opacity: 0; transform: translateX(-62.5%); }
  0.001% { opacity: 1; transform: translateX(-62.5%); }
  21.622% { opacity: 1; transform: translateX(-18.75%); }
  32.432% { opacity: 1; transform: translateX(-17.708%); }
  43.243% { opacity: 1; transform: translateX(-16.667%); }
  59.459%, 91.891% { opacity: 1; transform: translateX(0); }
  91.892%, 100% { opacity: 0; transform: translateX(0); }
}

@keyframes connecting-mask {
  0% { opacity: 0; }
  0.001%, 99.99% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes logo-piece {
  0%, 28.5% { opacity: 0; }
  28.6%, 33.2% { opacity: 1; }
  33.3%, 61.8% { opacity: 0; }
  61.9%, 66.5% { opacity: 1; }
  66.6%, 95.1% { opacity: 0; }
  95.2%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stage .asset {
    animation: none !important;
  }

  .state-login .login-shell,
  .state-login .login-stroke,
  .state-login .login-caption-final,
  .state-complete .zenith-stroke {
    opacity: 1;
  }

  .state-login .login-form {
    opacity: 1;
  }

  .state-connecting .phase-connecting {
    opacity: 1;
  }
}