/* =====================================================
   RESET
===================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  background: #030303;
}

body {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 32px 24px;

  background:
    radial-gradient(
      circle at 50% 15%,
      #171717 0%,
      #090909 42%,
      #030303 78%
    );

  color: #f1efe9;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;

  overflow-x: hidden;
}


/* =====================================================
   MAIN
===================================================== */

main {
  position: relative;

  width: min(520px, 100%);

  text-align: center;

  transition:
    opacity 1.2s ease,
    transform 1.2s ease,
    filter 1.2s ease;
}


/* =====================================================
   TOP CODE
===================================================== */

.code {
  margin-bottom: 72px;

  color: #5d5d5d;

  font-size: 11px;
  font-weight: 400;

  letter-spacing: .48em;

  animation:
    fadeIn 1.8s ease both;
}


/* =====================================================
   TITLE
===================================================== */

.private {
  margin-bottom: 24px;

  color: #686868;

  font-size: 9px;

  letter-spacing: .55em;

  animation:
    fadeIn 1.8s .15s ease both;
}


h1 {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(42px, 8vw, 72px);

  font-weight: 400;

  line-height: 1.03;

  letter-spacing: -.045em;

  animation:
    fadeUp 1.6s .25s ease both;
}


.description {
  margin:
    30px auto
    46px;

  color: #7d7d7d;

  font-size: 13px;

  line-height: 1.8;

  animation:
    fadeUp 1.6s .4s ease both;
}


/* =====================================================
   FORM
===================================================== */

form {
  position: relative;

  width: min(320px, 100%);

  margin: 0 auto;

  animation:
    fadeUp 1.6s .55s ease both;
}


.question {
  margin-bottom: 18px;

  color: #aaa;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 16px;

  font-style: italic;

  line-height: 1.5;
}


/* =====================================================
   INPUT
===================================================== */

input {
  display: block;

  width: 100%;

  min-height: 54px;

  padding: 15px 18px;

  border:
    1px solid
    #373737;

  border-radius: 13px;

  outline: none;

  background:
    rgba(
      255,
      255,
      255,
      .025
    );

  color: #f1f1f1;

  text-align: center;

  font-family: inherit;

  font-size: 17px;

  letter-spacing: .08em;

  cursor: text;

  -webkit-appearance: none;
  appearance: none;

  transition:
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}


input::placeholder {
  color: #575757;
  opacity: 1;
}


input:hover {
  border-color: #555;
}


input:focus {
  border-color: #858585;

  background:
    rgba(
      255,
      255,
      255,
      .045
    );

  box-shadow:
    0 0 0 3px
    rgba(
      255,
      255,
      255,
      .025
    );
}


/* =====================================================
   BUTTON
===================================================== */

button {
  min-height: 46px;

  margin-top: 24px;

  padding: 13px 28px;

  border:
    1px solid
    #3a3a3a;

  border-radius: 999px;

  background: transparent;

  color: #a5a5a5;

  font-family: inherit;

  font-size: 9px;

  font-weight: 500;

  letter-spacing: .36em;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    opacity .25s ease;
}


button:hover {
  background: #eeeeea;

  border-color: #eeeeea;

  color: #111;
}


button:active {
  transform: scale(.97);
}


button:disabled {
  opacity: .4;

  cursor: wait;
}


/* =====================================================
   MESSAGE
===================================================== */

.message {
  min-height: 20px;

  margin-top: 22px;

  color: #777;

  font-size: 11px;

  line-height: 1.5;

  letter-spacing: .06em;
}


/* =====================================================
   STAGES
===================================================== */

.hidden {
  display: none !important;
}


.stage-out {
  animation:
    stageOut
    .5s
    ease
    forwards;
}


.stage-in {
  animation:
    stageIn
    .75s
    ease
    both;
}


/* =====================================================
   UNLOCK
===================================================== */

.unlocking main {
  opacity: 0;

  transform: scale(1.055);

  filter: blur(12px);
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes fadeIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


@keyframes fadeUp {

  from {
    opacity: 0;

    transform:
      translateY(12px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes stageOut {

  from {
    opacity: 1;

    transform:
      translateY(0);

    filter:
      blur(0);
  }

  to {
    opacity: 0;

    transform:
      translateY(-10px);

    filter:
      blur(5px);
  }

}


@keyframes stageIn {

  from {
    opacity: 0;

    transform:
      translateY(10px);

    filter:
      blur(5px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);

    filter:
      blur(0);
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 500px) {

  body {
    padding:
      28px
      20px;
  }

  .code {
    margin-bottom:
      54px;
  }

  h1 {
    font-size:
      clamp(
        40px,
        13vw,
        58px
      );
  }

  .description {
    margin-bottom:
      38px;
  }

  input {
    font-size:
      16px;
  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (
  prefers-reduced-motion:
  reduce
) {

  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}