/*-----------------------------------*\
  #PRELOAD.CSS
\*-----------------------------------*/

.preload {
  position: fixed;
  inset: 0;
  background-color: var(--gold-crayola);
  z-index: 10;
  display: grid;
  place-content: center;
  justify-items: center;
  transition: var(--transition-2);
}

.preload > *            { transition: var(--transition-1); }
.preload.loaded > *     { opacity: 0; }
.preload.loaded         { transition-delay: 250ms; transform: translate(100%); }

.circle {
  width: 112px;
  height: 112px;
  border-radius: var(--radius-circle);
  border: 3px solid var(--white);
  border-block-start-color: var(--smoky-black-3);
  margin-block-end: 45px;
  animation: rotate360 1s linear infinite;
}

.preload .text {
  background-image: var(--loading-text-gradient);
  background-size: 500%;
  font-size: calc(2rem + 3vw);
  font-weight: var(--weight-bold);
  line-height: 1em;
  text-transform: uppercase;
  letter-spacing: 16px;
  padding-inline-start: 16px;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 1% var(--eerie-black-3);
  animation: loadingText linear 2s infinite;
}

@keyframes loadingText {
  0%   { background-position: 100%; }
  100% { background-position: 0%; }
}