.loading-screen {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  background-color: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 1;
  visibility: visible;
  overflow: hidden;
}

.loading-screen svg {
  overflow: visible;
}

.loading-screen p {
  font-family: "Dancing Script", cursive, sans-serif;
  font-size: 5em;
  margin: 0;
  margin-bottom: 1%;
}

body {
  overflow: hidden;
}

#loading-svg circle {
  fill: var(--on-surface);
  animation-name: loading;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.end-animation #loading-svg circle {
  animation-iteration-count: 2;
  transition: translate .8s ease 2.4s, opacity .1s step-start 3.2s;
}

.end-animation #loading-svg circle:nth-child(1) { translate: 41%; }
.end-animation #loading-svg circle:nth-child(2) { translate: 14%; }
.end-animation #loading-svg circle:nth-child(3) { translate: -14%; }
.end-animation #loading-svg circle:nth-child(4) { translate: -41%;  }

.end-animation #loading-svg circle:not(:nth-child(1)) {
  opacity: 0;
}

.zoom-loading .loading-screen svg {
  --_scale: 40;
  visibility: visible;
  transform: scale(var(--_scale));
  transition: transform .5s ease-in-out;
}

.zoom-loading #loading-svg circle:nth-child(1) {
  fill: var(--surface);
  transition: fill .5s ease-in-out;
}

.zoom-loading .loading-screen {
  opacity: 0;
  transition: opacity 1s ease-in-out .8s;
}

#loading-svg circle:nth-child(1) { animation-delay: .6s; }
#loading-svg circle:nth-child(2) { animation-delay: .4s; }
#loading-svg circle:nth-child(3) { animation-delay: .2s; }

.loading-all-done {
  overflow: auto;
}

.loading-all-done .loading-screen {
  display: none;
}

@keyframes loading {
  0%, 10% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-35%);
  }

  90%, 100% {
    transform: translateY(0);
  }
}