@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');

#loading-banner {
   --bar-width: 60px;
   --color-main: #695fdb;
   --color-clone-text: var(--color-text);
   --close-animation-duration: 0.55s;

   position: absolute;
   height: 100%;
   transition: opacity 0.3s ease-in-out;
}

#loading-banner h1 {
   position: relative;
   font-family: "Roboto", sans-serif;
   font-size: 32pt;
   top: -5px;
   color: var(--color-main);
   display: inline;
}

#loading-banner .subscript {
   position: absolute;
   font-size: 9pt;
   right: 2px;
   bottom: -4px;
   color: var(--color-clone-text);
}

#loading-banner .watermark {
   position: absolute;
   right: var(--padding);
   font-size: small;
   font-weight: bold;
   color: var(--color-main);
}

#loading-banner .hbox {
   margin-top: 30vh;
}

img.queen-icon {
   margin: auto;
   width: 34px;
   height: 34px;
   background-color: var(--color-main);
   border-radius: 3px;
   padding: 5px;
}

.hbox {
   display: flex;
   flex-direction: column;
   margin: auto;
}

.vbox {
   display: flex;
   justify-content: center;
   margin: auto;
   gap: 5px;
   animation: none;
}

.spinner {
   margin: auto;
   width: 70%;
   height: 2px;
   border-radius: 2px;
   position: relative;
   background: rgba(0, 0, 0, 0.2);
   overflow: hidden;
   animation: none;
}

.spinner-bar {
   width: var(--bar-width);
   height: inherit;
   background: var(--color-main);
   position: absolute;
   box-sizing: border-box;
   animation: sweep 0.7s ease-in-out infinite alternate;
}

.animate-closing .watermark {
   animation: fade-out var(--close-animation-duration) ease-out forwards;
}

.animate-closing .vbox {
   animation: logo-close var(--close-animation-duration) ease-out forwards;
}

.animate-closing .spinner {
   animation: spinner-close var(--close-animation-duration) ease-out forwards;
}

@keyframes fade-out {
60% {
   opacity: 0.5;
}

100% {
   opacity: 0;
}
}

@keyframes sweep {
0% {
   transform: translateX(-50%);
}

100% {
   transform: translateX(150%);
}
}

@keyframes spinner-close {
0%, 70% {
   opacity: 1;
}

45% {
   width: 70%;
}

71% {
   width: 20%;
   opacity: 1;
}

100% {
   opacity: 0;
   width: 0%;
}
}

@keyframes logo-close {
60% {
   opacity: 0.5;
   transform: translateY(10px);
}

100% {
   opacity: 0;
   transform: translateY(10px);
}
}