@keyframes loading-placeholder-bg-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translate(calc(-200% / 3));
  }
}

#loading-placeholder {
  --loadingLogoHeight: 96px;
  display: none;
}

#loading-placeholder,
#loading-placeholder * {
  box-sizing: border-box;
}

#root:empty + #loading-placeholder.show {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

#loading-placeholder .spinner {
  position: absolute;
  width: 100%;
  top: 50%;
  /* 
     A bunch of nasty calcs to get the spinner optically centered across
     different viewport heights. Once the vh goes beyond --clampMin, the 
     spinner gets shifted up proportional to vh until it reaches --clampMax.
     Units are kinda weird because calc() won't allow a value with units
     as a denominator.
  */
  --clampMin: 250;
  --clampMax: 1000;
  --initialShift: 7px;
  --shiftMultiplier: -13;
  --shiftRatio: calc(
    (100vh - (var(--clampMin) * 1px)) / (var(--clampMax) - var(--clampMin))
  );
  --clampedShiftRatio: calc(max(0px, min(1px, var(--shiftRatio))));
  transform: translateY(
    calc(
      var(--initialShift) + (var(--shiftMultiplier) * var(--clampedShiftRatio)) -
        50%
    )
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 12px;
}

#loading-placeholder .spinner-graphic {
  position: relative;
  width: var(--loadingLogoHeight);
  height: var(--loadingLogoHeight);
  background-color: #ffffff;
  mask: url(/page-load-spinner/page-load-spinner-logo.svg) 0 0 / contain no-repeat;
  -webkit-mask: url(/page-load-spinner/page-load-spinner-logo.svg) 0 0 / contain
    no-repeat;
  background: url(/page-load-spinner/page-load-spinner-logo.svg);
  background-size: contain;
}
@supports (aspect-ratio: 1 / 1) {
  #loading-placeholder .spinner-graphic {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: var(--loadingLogoHeight);
    height: auto;
  }
}
#loading-placeholder .spinner-graphic .bg {
  position: absolute;
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  animation: loading-placeholder-bg-loop 3s infinite linear;
}
#loading-placeholder .bg-image {
  background: url(/page-load-spinner/page-load-spinner-bg.png);
  background-size: 100% auto;
  background-repeat: repeat-y;
  height: var(--loadingLogoHeight);
  width: calc(var(--loadingLogoHeight) * 6);
}
@supports (aspect-ratio: 6 / 1) {
  #loading-placeholder .bg-image {
    height: 100%;
    width: auto;
    aspect-ratio: 6 / 1;
  }
}
#loading-placeholder .bg-image:nth-child(2n) {
  transform: rotate(180deg);
}

#loading-placeholder h1 {
  color: #ebeff0;
  font-family: "Inter", "Helvetica", "Arial", "sans-serif";
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.25px;
  margin-top: 24px;
  text-align: center;
}
html[data-theme-mode='light'] #loading-placeholder h1 {
  color: #5d626f;
}

#loading-placeholder .dot {
  visibility: hidden;
}
#loading-placeholder .dot.show {
  visibility: visible;
}