.wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  padding: 10vw;
  box-sizing: border-box;
  touch-action: none;
  display: grid;
  gap: 3rem;
  place-content: center;
  justify-items: center;
  background: radial-gradient(#00c1ed, #00edb6);
  text-align: center;
  overflow: hidden;
  z-index: 1;

  .loading {
    display: grid;
    place-items: center;
    width: 30vw;
    grid-template-areas: "loader";

    .loader {
      display: grid;
      place-items: center;
      grid-area: loader;
      width: 100%;
      height: 100%;

      span {
        display: block;
        background: var(--font-backgound-solid);
        width: 100%;
        height: 4px;
        border-radius: 1rem;
        transition: width 0.1s ease-in-out;
      }
    }

    .start {
      all: unset;
      pointer-events: visible;
      grid-area: loader;
      font-family: var(--font-family);
      font-size: var(--base-font);
      font-weight: normal;
      width: 10ch;
      padding: 0.8em 1em;
      background-color: var(--font-backgound-solid);
      border-radius: 3em;
      transform: scale(0);
      cursor: pointer;
    }
  }

  &.loaded .loading {
    .loader span {
      animation: 0.3s cubic-bezier(0.42, 0, 0.02, 1.3) forwards 1 normal
        loaderMorph;
    }
  }

  &.hide {
    animation: 0.3s ease-in-out forwards 1 normal hideLoading;

    .loading .loader span {
      display: none;
    }
  }

  @keyframes hideLoading {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0.5;
    }
  }

  @keyframes loaderMorph {
    0% {
      width: 100%;
      height: 4px;
      filter: blur(0);
      transform: translateZ(0);
    }
    50% {
      height: 8px;
    }
    90% {
      width: 10ch;
      height: 100%;
    }
    100% {
      opacity: 0;
      filter: blur(1px);
      transform: translateZ(0);
    }
  }
}